From fcca7591810896c54ee9d3f9d5da7436c4c8e925 Mon Sep 17 00:00:00 2001 From: qianguyihao Date: Fri, 13 Apr 2018 09:43:52 +0800 Subject: [PATCH] =?UTF-8?q?add=EF=BC=9ACMD=E7=9B=B8=E5=85=B3=E3=80=82?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- 09-Node.js/02-JavaScript模块化01：CommonJS.md | 2 +- 09-Node.js/02-JavaScript模块化02：AMD.md | 6 +- 09-Node.js/02-JavaScript模块化03：CMD.md | 267 +++++++++++++++++- 3 files changed, 269 insertions(+), 6 deletions(-) diff --git a/09-Node.js/02-JavaScript模块化01：CommonJS.md b/09-Node.js/02-JavaScript模块化01：CommonJS.md index f7667c1..c7248ad 100644 --- a/09-Node.js/02-JavaScript模块化01：CommonJS.md +++ b/09-Node.js/02-JavaScript模块化01：CommonJS.md @@ -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/)** 在推广过程中对模块化定义的规范化产出。淘宝团队开发。 ``` diff --git a/09-Node.js/02-JavaScript模块化02：AMD.md b/09-Node.js/02-JavaScript模块化02：AMD.md index a42b095..7b167c7 100644 --- a/09-Node.js/02-JavaScript模块化02：AMD.md +++ b/09-Node.js/02-JavaScript模块化02：AMD.md @@ -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、自定义模块 diff --git a/09-Node.js/02-JavaScript模块化03：CMD.md b/09-Node.js/02-JavaScript模块化03：CMD.md index 7ee7976..8f2746a 100644 --- a/09-Node.js/02-JavaScript模块化03：CMD.md +++ b/09-Node.js/02-JavaScript模块化03：CMD.md @@ -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规范实现的模块化开发解决方案。 +官网链接： + +- + +- + +推荐学习链接： + +- + +- + ### 暴露模块的方式 +> 不管是定义没有依赖的模块，还是定义有依赖的模块，参数只有一个，那就是 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，并导入 + +- 官网: + +- GitHub： + +在官网下载`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 + + + + + + + + Document + + + + + + + + + + +``` + +打印结果： + +20180412_1955.png + + + +```javascript + + +``` + + + + + + + +```javascript + + +``` + + + + + + +```javascript + + +``` \ No newline at end of file