174 lines
5.3 KiB
Markdown
174 lines
5.3 KiB
Markdown
---
|
|
title: 模块化编程(2)
|
|
date: 2018-5-6 20:19:42
|
|
tags:
|
|
- JavaScript
|
|
- 模块化
|
|
categories:
|
|
- JavaScript
|
|
---
|
|
|
|
模块存在的价值是为了能够更方便地复用代码 , 更加有利于功能的封装
|
|
但是如果要实现的话 , 就必须要求每个人都按照同样的方式去编写模块
|
|
目前通行的JavaScript模块规范有两种 , 分别是`CommonJS`和`AMD`
|
|
<!-- more -->
|
|
### CommonJS
|
|
从node.js出现之后 , 将JavaScript用于服务器编程
|
|
同时也标志着JS的模块化编程正式诞生
|
|
在网页环境下 , 没有模块也不是特别大的问题 , 因为网页程序的复杂性和规模都相对有限 , 但是在服务器端就必须要有模块 , 否则服务器端程序就会难以扩展和维护
|
|
|
|
nodejs的模块系统 , 就是按照CommonJS规范实现的
|
|
这个规范当中 , 有一个全局方法 `require` , 用于加载模块
|
|
|
|
```javascript
|
|
var mod1 = require("module1");
|
|
mod1.biz();
|
|
```
|
|
|
|
### AMD
|
|
有了在服务端可用的模块化编程方式 , 大家很自然就想要在客户端也能实现的方式 , 并且最好能够兼容
|
|
这样同样的一个模块的代码 , 不用修改任何内容就可以同时应用于服务端和客户端
|
|
|
|
但是如果直接套用在nodejs当中的实现方式 , 就会存在线程阻塞的问题
|
|
也就是必须要等require方法执行完毕 , 加载运行这个模块的代码之后 , 后面的代码才会被执行
|
|
对于服务端来说 , 这并不是什么问题 , 因为代码都在本地 , 不可能出现长期阻塞的问题
|
|
但是对于客户端来说 , js文件需要发送http请求去获取 , 所以同步加载的方式就十分影响性能了
|
|
|
|
AMD ( Asynchronous Module Definition `异步模块定义` ) , 这种规范的要求是采用异步方式加载模块
|
|
形式如下 :
|
|
```javascript
|
|
require(["module1"], function(mod) {
|
|
mod.biz();
|
|
});
|
|
```
|
|
规范只是约定一种形式 , 具体要应用的话需要有对应的库来实现
|
|
这里通过`require.js`来介绍
|
|
|
|
### require.js
|
|
|
|
[require.js官网](http://www.requirejs.cn/)
|
|
|
|
require.js主要解决两个问题
|
|
1. 实现js文件的异步加载 , 避免网页失去响应
|
|
2. 管理模块之间的依赖性 , 便于代码的编写和维护
|
|
|
|
使用require.js需要指定一个主模块 , 以及在主模块中可以去引入若干个子模块 , 主模块相当于是程序执行的入口
|
|
( 如果没有子模块的话就不需要require.js了 )
|
|
|
|
目录结构
|
|
|
|
|
|
#### data-main入口点
|
|
```xml
|
|
<script src="js/require.js" data-main="js/main"></script>
|
|
```
|
|
js目录下的main.js就是作为主模块 , 后面的.js可以省略
|
|
|
|
#### 子模块的编写方式
|
|
require.js加载的模块 , 采用AMD规范 , 也就是说模块必须按照AMD的规范来写
|
|
模块必须采用特定的define函数来定义
|
|
```javascript
|
|
//module1.js
|
|
define(function(){
|
|
return {
|
|
biz : function(){
|
|
console.log("子模块的方法");
|
|
}
|
|
}
|
|
})
|
|
```
|
|
这个函数返回的对象就是这个模块需要暴露出的对象
|
|
|
|
如果该模块需要依赖其他模块
|
|
```javascript
|
|
//module2.js
|
|
define(["module1"],function(mod1){
|
|
function biz2() {
|
|
return mod1.biz() + "ok";
|
|
}
|
|
return {
|
|
biz : biz2
|
|
}
|
|
});
|
|
```
|
|
|
|
#### 主模块的编写方式
|
|
|
|
```javascript
|
|
//main.js
|
|
require(["modules/module1","modules/module2"],
|
|
function(mod1,mod2){
|
|
//mod1和mod2分别是在子模块中暴露出的对象
|
|
});
|
|
```
|
|
require函数接受两个参数 , 第一个参数是子模块的相对路径和名称 ( 如果在同一个路径下可以不加路径 ) , **必须是一个数组**
|
|
第二个参数是子模块加载完成之后执行的回调函数
|
|
|
|
<font color='blueviolet'>更加灵活的自定义加载</font>
|
|
|
|
模块的引入采用的是子模块的js文件与主模块文件的相对位置
|
|
如果要加在的子模块较多 , 这么相对路径就需要加在每个子模块的前面
|
|
为了更清晰一些 , 我们可以采用下面的方式
|
|
```javascript
|
|
require.config({
|
|
//注意这里的baseUrl是相对于引入主模块的页面的路径
|
|
//页面是 /require_demo/test.html
|
|
//子模块位于 /require_demo/other/module3.js
|
|
baseUrl : "./other/",
|
|
paths : {
|
|
mod3 : "module3",
|
|
mod4 : "module4"
|
|
}
|
|
});
|
|
//上面的代码相当于对子模块的路径创建了映射
|
|
//下面才是真正引入模块
|
|
require(["mod3","mod4"], function(mod3, mod4){
|
|
mod3.biz3();
|
|
mod4.biz4();
|
|
});
|
|
```
|
|
上面的写法其实就等价于
|
|
```javascript
|
|
require(["../other/module3","../other/module4"],
|
|
function(mod3, mod4){
|
|
mod3.biz3();
|
|
mod4.biz4();
|
|
});
|
|
```
|
|
> paths里面也可以直接使用完整的网络URL地址
|
|
|
|
#### 加载非规范的模块
|
|
采用上面的方式去加载的子模块 , 模块当中必须按照AMD的规范去写
|
|
如果子模块本身并不符合这个要求
|
|
在不方便修改子模块的情况下 , 我们可以采用如下的方式去加载
|
|
|
|
```javascript
|
|
require.config({
|
|
shim : {
|
|
underscore : {
|
|
exports : "_"
|
|
}
|
|
},
|
|
paths : { //这部分并没有什么差别
|
|
underscore : "./plugins/underscore"
|
|
}
|
|
});
|
|
|
|
require(["underscore"], function(_) {
|
|
//测试代码
|
|
_.each([1,10,20],console.log);
|
|
});
|
|
```
|
|
未按照AMD规范编写的模块 , 通常采用的是暴露出一个变量放入到window当中作为全局变量 , 比如underscore这个库 , 暴露出的就是`_`
|
|
|
|
##### 模块依赖性声明
|
|
```javascript
|
|
|
|
shim : {
|
|
"jquery.scroll" : {
|
|
deps : ["jquery"],
|
|
exports : "jQuery.fn.scroll"
|
|
}
|
|
}
|
|
```
|