模块
什么是模块？在前端领域可以把模块认为是完成一个系统一部分功能的代码片段，我们往往把模块定义在一个文件内，同时也会合并模块一起加载。Javascript的模块间的依赖，默认方式是按照script标签的前后顺序进行的，但是这种依赖关系十分脆弱，而且需要手工维护。
模块之间存在依赖关系，所以执行一个模块前，必须加载并执行它所依赖的模块，同时我们也要避免循环依赖，所以想在前端领域使用模块我们必须搞清楚模块的定义，依赖和加载方式，目前比较流行的2种方式是CMD和 AMD
CMD的概念
模块概念
CMD（Common Module Definition）是seajs推广过程中模块定义规范化的产物，写法类似于Nodejs的模块定义方式差异在于：
- NodeJS 里，模块文件里的 this === module.exports；SeaJS 里，this === window。
- NodeJS 里，模块文件里的 return xx 会被忽略；SeaJS 里，return xx 等价 module.exports = xx。
- NodeJS 里，require 是懒加载 + 懒执行的。在 SeaJS 里是提前加载好 + 懒执行。
- SeaJS 里，require(id) 中的 id 必须是字符串直接量。NodeJS 里没这个限制。
创建模块
通过以下示例了解CMD中模块的创建
<pre class="prettyprint linenums" style="padding: 8px; background-color: rgb(247, 247, 249); border: 1px solid rgb(225, 225, 232); margin-top: 8px; box-shadow: rgb(251, 251, 252) 40px 0px 0px inset, rgb(236, 236, 240) 41px 0px 0px inset; color: rgb(51, 51, 51); font-size: 12px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-style: initial; text-decoration-color: initial;">
define('hello', ['bui/common'], function(require, exports, module) {
var BUI = require('bui/common');
// 模块代码
});
</pre>
- 模块名称: 用于加载模块时使用，可以为空，根据路径和文件名作为模块名称
- 依赖的模块 : 设置依赖的模块，可以为空，则按照模块内部使用require函数时确定依赖的模块（未指定模块依赖关系时，不能更改require参数名称）
- 回调函数： 模块执行时执行的函数，在第一次被require前，函数内的代码不会执行。
加载模块
<pre class="prettyprint linenums" style="padding: 8px; background-color: rgb(247, 247, 249); border: 1px solid rgb(225, 225, 232); margin-top: 8px; box-shadow: rgb(251, 251, 252) 40px 0px 0px inset, rgb(236, 236, 240) 41px 0px 0px inset; color: rgb(51, 51, 51); font-size: 12px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-style: initial; text-decoration-color: initial;">
seajs.use('hello',function(Hello){
});
</pre>
- 没有全局性的require函数
- 回调函数执行前，hello模块必须加载并执行完毕
- hello依赖的模块也必须加载、执行完毕
AMD的概念
定义
AMD（Asynchronous Module Definition）,是基于requireJS指定并推广开来的一种模块定义方式，AMD基本兼容CMD 定义模块的方式，但是回调函数中，不提供exports和modules对象，只提供return 的方式定义模块
- 使用define方法定义模块，通过回调函数（factory）生成模块
- 定义模块时指定模块依赖（也可以省略）
- 多次依赖一个模块，只加载一遍
- 传递依赖的模块的引用到factory函数
- 不需要合并模块时，不需要指定模块id
模块创建
<pre class="prettyprint linenums" style="padding: 8px; background-color: rgb(247, 247, 249); border: 1px solid rgb(225, 225, 232); margin-top: 8px; box-shadow: rgb(251, 251, 252) 40px 0px 0px inset, rgb(236, 236, 240) 41px 0px 0px inset; color: rgb(51, 51, 51); font-size: 12px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-style: initial; text-decoration-color: initial;">
//Calling define with module ID, dependency array, and factory function
define('myModule', ['dep1', 'dep2'], function (dep1, dep2) {
//Define the module value by returning a value.
return function () {};
});
</pre>
模块加载
<pre class="prettyprint linenums" style="padding: 8px; background-color: rgb(247, 247, 249); border: 1px solid rgb(225, 225, 232); margin-top: 8px; box-shadow: rgb(251, 251, 252) 40px 0px 0px inset, rgb(236, 236, 240) 41px 0px 0px inset; color: rgb(51, 51, 51); font-size: 12px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-style: initial; text-decoration-color: initial;">
require('myModule',function(MyModule){
});
</pre>
AMD的模块加载使用全局函数require
Kissy的模块
模块的创建
Kissy的模块定义跟CMD和AMD有相同点，但是也有不同点，依赖模块写在最后面，factory里传入的是模块引用。
<pre class="prettyprint linenums" style="padding: 8px; background-color: rgb(247, 247, 249); border: 1px solid rgb(225, 225, 232); margin-top: 8px; box-shadow: rgb(251, 251, 252) 40px 0px 0px inset, rgb(236, 236, 240) 41px 0px 0px inset; color: rgb(51, 51, 51); font-size: 12px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-style: initial; text-decoration-color: initial;">
KISSY.add('myModule',function(dep1,dep2){
},{
requires : ['dep1', 'dep2']
});
</pre>
模块的加载
<pre class="prettyprint linenums" style="padding: 8px; background-color: rgb(247, 247, 249); border: 1px solid rgb(225, 225, 232); margin-top: 8px; box-shadow: rgb(251, 251, 252) 40px 0px 0px inset, rgb(236, 236, 240) 41px 0px 0px inset; color: rgb(51, 51, 51); font-size: 12px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-style: initial; text-decoration-color: initial;">
KISSY.use('myModule',function(S,MyModule){
});
</pre>
Kissy加载模块时，跟CMD，AMD最大的差异在于，factory函数的第一个参数是KISSY本身
BUI加载模块
BUI的模块定义按照CMD的写法，无论使用seajs还是Kissy作为Loader。
加载模块时，可以按照seajs的写法，也可以按照Kissy的写法，但是一般情况下按照BUI封装的写法，可以兼容seajs和Kissy
<pre class="prettyprint linenums" style="padding: 8px; background-color: rgb(247, 247, 249); border: 1px solid rgb(225, 225, 232); margin-top: 8px; box-shadow: rgb(251, 251, 252) 40px 0px 0px inset, rgb(236, 236, 240) 41px 0px 0px inset; color: rgb(51, 51, 51); font-size: 12px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-style: initial; text-decoration-color: initial;">
BUI.use('myModule',function(MyModule){
});
</pre>
