add:CMD相关。
This commit is contained in:
		
							parent
							
								
									07cb09c4f8
								
							
						
					
					
						commit
						fcca759181
					
				@ -109,7 +109,7 @@ CommonJS 就是一套约定标准,不是技术。用于约定我们的代码
 | 
			
		||||
- define 定义模块:define([`require`,`foo`],function(){return});
 | 
			
		||||
```
 | 
			
		||||
 | 
			
		||||
- **[CMD规范](https://github.com/amdjs/amdjs-api)**:是 **[SeaJS](http://seajs.org/)** 在推广过程中对模块化定义的规范化产出。淘宝团队开发。
 | 
			
		||||
- **[CMD规范]()**:是 **[SeaJS](http://seajs.org/)** 在推广过程中对模块化定义的规范化产出。淘宝团队开发。
 | 
			
		||||
 | 
			
		||||
```
 | 
			
		||||
 | 
			
		||||
 | 
			
		||||
@ -13,7 +13,7 @@ RequireJS:一个基于AMD规范实现的模块化开发解决方案。
 | 
			
		||||
 | 
			
		||||
### 暴露模块的方式
 | 
			
		||||
 | 
			
		||||
**定义没有依赖的模块**:
 | 
			
		||||
**定义没有依赖的模块**:(参数只有一个 function)
 | 
			
		||||
 | 
			
		||||
```javascript
 | 
			
		||||
define(function () {
 | 
			
		||||
@ -24,7 +24,7 @@ define(function () {
 | 
			
		||||
```
 | 
			
		||||
 | 
			
		||||
 | 
			
		||||
**定义有依赖的模块**:
 | 
			
		||||
**定义有依赖的模块**:(参数有两个:模块名、function)
 | 
			
		||||
 | 
			
		||||
```javascript
 | 
			
		||||
//定义有依赖的模块:第一个参数为数组
 | 
			
		||||
@ -105,7 +105,7 @@ index.html
 | 
			
		||||
 | 
			
		||||
然后将`require.js`文件拷贝到项目的`js/libs/`目录中。
 | 
			
		||||
 | 
			
		||||
这样的话,就导入哈哦了。
 | 
			
		||||
这样的话,就导入成功了。
 | 
			
		||||
 | 
			
		||||
 | 
			
		||||
### 3、自定义模块
 | 
			
		||||
 | 
			
		||||
@ -5,16 +5,279 @@
 | 
			
		||||
 | 
			
		||||
### CMD的概念
 | 
			
		||||
 | 
			
		||||
**CMD**(Asynchronous Module Definition):异步模块定义。AMD专门用于浏览器端,模块的加载是异步的。
 | 
			
		||||
**CMD**(Asynchronous Module Definition):同步模块定义。CMD专门用于浏览器端,模块的加载是同步的。模块在使用时才会加载执行。
 | 
			
		||||
 | 
			
		||||
[**CMD规范**](https://github.com/amdjs/amdjs-api):是 **[SeaJS](http://requirejs.org/)** 在推广过程中对模块化定义的规范化产出。
 | 
			
		||||
[**CMD规范**]():是 **[SeaJS](http://seajs.org/)** 在推广过程中对模块化定义的规范化产出。
 | 
			
		||||
 | 
			
		||||
 | 
			
		||||
### SeaJS
 | 
			
		||||
 | 
			
		||||
SeaJS:一个基于CMD规范实现的模块化开发解决方案。
 | 
			
		||||
 | 
			
		||||
官网链接:
 | 
			
		||||
 | 
			
		||||
- <http://seajs.org/>
 | 
			
		||||
 | 
			
		||||
- <https://github.com/seajs/seajs>
 | 
			
		||||
 | 
			
		||||
推荐学习链接:
 | 
			
		||||
 | 
			
		||||
- <http://www.zhangxinxu.com/sp/seajs/>
 | 
			
		||||
 | 
			
		||||
- <http://es6.ruanyifeng.com/#docs/module>
 | 
			
		||||
 | 
			
		||||
 | 
			
		||||
### 暴露模块的方式
 | 
			
		||||
 | 
			
		||||
> 不管是定义没有依赖的模块,还是定义有依赖的模块,参数只有一个,那就是 function。
 | 
			
		||||
 | 
			
		||||
**定义没有依赖的模块**:
 | 
			
		||||
 | 
			
		||||
```javascript
 | 
			
		||||
define(function (require, exports, module) {
 | 
			
		||||
 | 
			
		||||
    exports.xxx = value
 | 
			
		||||
 | 
			
		||||
    //暴露模块
 | 
			
		||||
    module.exports = value
 | 
			
		||||
 | 
			
		||||
})
 | 
			
		||||
```
 | 
			
		||||
 | 
			
		||||
参数只有一个,那就是 function。function 里有三个参数:
 | 
			
		||||
 | 
			
		||||
 | 
			
		||||
**定义有依赖的模块**:
 | 
			
		||||
 | 
			
		||||
```javascript
 | 
			
		||||
//定义有依赖的模块
 | 
			
		||||
define(function (require, exports, module) {
 | 
			
		||||
 | 
			
		||||
    //引入依赖的模块(同步的方式)
 | 
			
		||||
    var module2 = require('./module2')
 | 
			
		||||
 | 
			
		||||
    //引入依赖的模块(异步的方式)
 | 
			
		||||
    require.async('./module3', function (m3) {
 | 
			
		||||
 | 
			
		||||
    })
 | 
			
		||||
 | 
			
		||||
    //暴露模块
 | 
			
		||||
    exports.xxx = value
 | 
			
		||||
})
 | 
			
		||||
 | 
			
		||||
```
 | 
			
		||||
 | 
			
		||||
上面的代码可以看到,在引入依赖的模块时,有两种引入的方式:同步和异步。
 | 
			
		||||
 | 
			
		||||
 | 
			
		||||
### 引入模块的方式
 | 
			
		||||
 | 
			
		||||
```javascript
 | 
			
		||||
define(function (require) {
 | 
			
		||||
 | 
			
		||||
    var m1 = require('./module1')
 | 
			
		||||
    var m4 = require('./module4')
 | 
			
		||||
 | 
			
		||||
    m1.show()
 | 
			
		||||
    m4.show()
 | 
			
		||||
})
 | 
			
		||||
```
 | 
			
		||||
 | 
			
		||||
 | 
			
		||||
 | 
			
		||||
 | 
			
		||||
## SeaJS的使用举例(自定义模块)
 | 
			
		||||
 | 
			
		||||
 | 
			
		||||
 | 
			
		||||
### 1、创建项目结构
 | 
			
		||||
 | 
			
		||||
 | 
			
		||||
在工程文件中新建如下目录:
 | 
			
		||||
 | 
			
		||||
 | 
			
		||||
```
 | 
			
		||||
js
 | 
			
		||||
    | libs
 | 
			
		||||
      	| sea.js
 | 
			
		||||
    | modules
 | 
			
		||||
      	| module1.js
 | 
			
		||||
      	| module2.js
 | 
			
		||||
      	| module3.js
 | 
			
		||||
      	| module4.js
 | 
			
		||||
      	| main.js     //主模块
 | 
			
		||||
index.html
 | 
			
		||||
```
 | 
			
		||||
 | 
			
		||||
 | 
			
		||||
### 2、下载SeaJS,并导入
 | 
			
		||||
 | 
			
		||||
- 官网: <https://seajs.github.io/seajs/docs/#downloads>
 | 
			
		||||
 | 
			
		||||
- GitHub:<https://github.com/seajs/seajs>
 | 
			
		||||
 | 
			
		||||
在官网下载`sea.js`文件,然后将其拷贝到项目的`js/libs/`目录中。这样的话,就导入成功了。
 | 
			
		||||
 | 
			
		||||
 | 
			
		||||
### 3、自定义模块
 | 
			
		||||
 | 
			
		||||
 | 
			
		||||
(1)module1.js:
 | 
			
		||||
 | 
			
		||||
 | 
			
		||||
 | 
			
		||||
```javascript
 | 
			
		||||
//定义没有依赖的模块
 | 
			
		||||
define(function (require, exports, module) {
 | 
			
		||||
    let name = '我是 module1 中的内容';
 | 
			
		||||
    function foo1() {
 | 
			
		||||
        return name;
 | 
			
		||||
    }
 | 
			
		||||
 | 
			
		||||
    //暴露模块
 | 
			
		||||
    module.exports = { foo1 };  //暴露出去的是 foo1这个函数对象
 | 
			
		||||
});
 | 
			
		||||
```
 | 
			
		||||
 | 
			
		||||
 | 
			
		||||
(2)module2.js:
 | 
			
		||||
 | 
			
		||||
```javascript
 | 
			
		||||
//定义没有依赖的模块
 | 
			
		||||
define(function (require, exports, module) {
 | 
			
		||||
    let name = '我是 module2 中的内容';
 | 
			
		||||
    function foo2() {
 | 
			
		||||
        console.log(name);
 | 
			
		||||
    }
 | 
			
		||||
 | 
			
		||||
    //暴露模块
 | 
			
		||||
    module.exports = foo2;  //可以理解成:exports就是 foo2 这个函数
 | 
			
		||||
});
 | 
			
		||||
```
 | 
			
		||||
 | 
			
		||||
(3)module3.js:
 | 
			
		||||
 | 
			
		||||
```javascript
 | 
			
		||||
//定义没有依赖的模块
 | 
			
		||||
define(function (require,exports,module) {
 | 
			
		||||
    let data = '我是 module3 中的内容';
 | 
			
		||||
    function foo3() {
 | 
			
		||||
        console.log(data);
 | 
			
		||||
    }
 | 
			
		||||
 | 
			
		||||
    //暴露模块
 | 
			
		||||
    exports.module3 = { foo3 };  //可以理解成:给 export 对象暴露了 module3 这个属性,这个属性里有foo3 这个函数。
 | 
			
		||||
});
 | 
			
		||||
```
 | 
			
		||||
 | 
			
		||||
(4)module4.js:
 | 
			
		||||
 | 
			
		||||
这个模块依赖了 module2 和 module3。
 | 
			
		||||
 | 
			
		||||
```javascript
 | 
			
		||||
//定义有依赖的模块
 | 
			
		||||
define(function (require, exports, module) {
 | 
			
		||||
    let name = '我是 module4 中的内容';
 | 
			
		||||
 | 
			
		||||
    //同步的方式引入 module2
 | 
			
		||||
    let myModule2 = require('./module2');
 | 
			
		||||
    myModule2();
 | 
			
		||||
 | 
			
		||||
    //异步的方式引入 module3
 | 
			
		||||
    require.async('./module3', function (myModule3) {
 | 
			
		||||
        myModule3.module3.foo3();
 | 
			
		||||
    });
 | 
			
		||||
 | 
			
		||||
    function foo4() {
 | 
			
		||||
        console.log(name);
 | 
			
		||||
    }
 | 
			
		||||
 | 
			
		||||
    exports.foo4 = foo4;
 | 
			
		||||
})
 | 
			
		||||
```
 | 
			
		||||
 | 
			
		||||
(5)main.js:
 | 
			
		||||
 | 
			
		||||
- `module1.js`没有依赖其他的模块,它是独立的
 | 
			
		||||
 | 
			
		||||
- `module4.js`依赖了`module2`和`module3`。
 | 
			
		||||
 | 
			
		||||
因此,让`main.js`依赖`module1.js`和`module4`就够了。
 | 
			
		||||
 | 
			
		||||
main.js:
 | 
			
		||||
 | 
			
		||||
```javascript
 | 
			
		||||
//主模块(主模块不需要导出)
 | 
			
		||||
define(function (require) {
 | 
			
		||||
 | 
			
		||||
    //导入 module1
 | 
			
		||||
    let module1 = require('./module1');
 | 
			
		||||
    console.log(module1.foo1());  //执行foo1函数后,将返回值打印
 | 
			
		||||
 | 
			
		||||
    //导入 module4
 | 
			
		||||
    let module4 = require('./module4');
 | 
			
		||||
    module4.foo4();
 | 
			
		||||
 | 
			
		||||
});
 | 
			
		||||
 | 
			
		||||
```
 | 
			
		||||
 | 
			
		||||
 | 
			
		||||
(6)index.html:
 | 
			
		||||
 | 
			
		||||
 | 
			
		||||
```html
 | 
			
		||||
<!DOCTYPE html>
 | 
			
		||||
<html lang="en">
 | 
			
		||||
 | 
			
		||||
<head>
 | 
			
		||||
    <meta charset="UTF-8">
 | 
			
		||||
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
 | 
			
		||||
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
 | 
			
		||||
    <title>Document</title>
 | 
			
		||||
</head>
 | 
			
		||||
 | 
			
		||||
<body>
 | 
			
		||||
    <!-- 引入 sea.js库 -->
 | 
			
		||||
    <script src="js/libs/sea.js"></script>
 | 
			
		||||
    <script>
 | 
			
		||||
        // 引入主模块
 | 
			
		||||
        seajs.use('./js/modules/main.js');
 | 
			
		||||
    </script>
 | 
			
		||||
</body>
 | 
			
		||||
 | 
			
		||||
</html>
 | 
			
		||||
 | 
			
		||||
```
 | 
			
		||||
 | 
			
		||||
打印结果:
 | 
			
		||||
 | 
			
		||||
20180412_1955.png
 | 
			
		||||
 | 
			
		||||
 | 
			
		||||
 | 
			
		||||
```javascript
 | 
			
		||||
 | 
			
		||||
 | 
			
		||||
```
 | 
			
		||||
 | 
			
		||||
 | 
			
		||||
 | 
			
		||||
 | 
			
		||||
 | 
			
		||||
 | 
			
		||||
 | 
			
		||||
```javascript
 | 
			
		||||
 | 
			
		||||
 | 
			
		||||
```
 | 
			
		||||
 | 
			
		||||
 | 
			
		||||
 | 
			
		||||
 | 
			
		||||
 | 
			
		||||
 | 
			
		||||
```javascript
 | 
			
		||||
 | 
			
		||||
 | 
			
		||||
```
 | 
			
		||||
		Loading…
	
	
			
			x
			
			
		
	
		Reference in New Issue
	
	Block a user