add:CMD相关。

This commit is contained in:
qianguyihao 2018-04-13 09:43:52 +08:00
parent 07cb09c4f8
commit fcca759181
3 changed files with 269 additions and 6 deletions

View File

@ -109,7 +109,7 @@ CommonJS 就是一套约定标准,不是技术。用于约定我们的代码
- define 定义模块define([`require`,`foo`],function(){return}); - define 定义模块define([`require`,`foo`],function(){return});
``` ```
- **[CMD规范](https://github.com/amdjs/amdjs-api)**:是 **[SeaJS](http://seajs.org/)** 在推广过程中对模块化定义的规范化产出。淘宝团队开发。 - **[CMD规范]()**:是 **[SeaJS](http://seajs.org/)** 在推广过程中对模块化定义的规范化产出。淘宝团队开发。
``` ```

View File

@ -13,7 +13,7 @@ RequireJS一个基于AMD规范实现的模块化开发解决方案。
### 暴露模块的方式 ### 暴露模块的方式
**定义没有依赖的模块** **定义没有依赖的模块**(参数只有一个 function
```javascript ```javascript
define(function () { define(function () {
@ -24,7 +24,7 @@ define(function () {
``` ```
**定义有依赖的模块** **定义有依赖的模块**参数有两个模块名、function
```javascript ```javascript
//定义有依赖的模块:第一个参数为数组 //定义有依赖的模块:第一个参数为数组
@ -105,7 +105,7 @@ index.html
然后将`require.js`文件拷贝到项目的`js/libs/`目录中。 然后将`require.js`文件拷贝到项目的`js/libs/`目录中。
这样的话,就导入哈哦了。 这样的话,就导入成功了。
### 3、自定义模块 ### 3、自定义模块

View File

@ -5,16 +5,279 @@
### CMD的概念 ### 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规范实现的模块化开发解决方案。 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、自定义模块
1module1.js
```javascript
//定义没有依赖的模块
define(function (require, exports, module) {
let name = '我是 module1 中的内容';
function foo1() {
return name;
}
//暴露模块
module.exports = { foo1 }; //暴露出去的是 foo1这个函数对象
});
```
2module2.js
```javascript
//定义没有依赖的模块
define(function (require, exports, module) {
let name = '我是 module2 中的内容';
function foo2() {
console.log(name);
}
//暴露模块
module.exports = foo2; //可以理解成exports就是 foo2 这个函数
});
```
3module3.js:
```javascript
//定义没有依赖的模块
define(function (require,exports,module) {
let data = '我是 module3 中的内容';
function foo3() {
console.log(data);
}
//暴露模块
exports.module3 = { foo3 }; //可以理解成:给 export 对象暴露了 module3 这个属性这个属性里有foo3 这个函数。
});
```
4module4.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;
})
```
5main.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();
});
```
6index.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
```