forked from theluyuan/Web
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…
Reference in New Issue
Block a user