CMD（seajs）的使用详解

一、模块定义

模块定义文档：CMD 模块定义规范 · Issue #242 · seajs/seajs · GitHub

CMD规范：https://github.com/cmdjs/specification/blob/master/draft/module.md

核心：

在 CMD 规范中，一个模块就是一个文件。代码的书写格式如下：

define(factory);

factory 可以是一个函数，也可以是一个对象或字符串。

factory 为对象、字符串时，表示模块的接口就是该对象、字符串。通过require载入它们时，就是返回对象或者字符串。

factory 为函数时，表示是模块的构造方法。执行该构造方法，可以得到模块向外提供的接口。factory 方法在执行时，默认会传入三个参数：require、exports 和 module。这三个参数可根据情况省略，甚至全部省略也可以。

模块定义方式有很多种，根据需求选择：

这里只介绍factory为函数的情况，这是seajs推荐的做法，同时也是个万金油。

提示：永远只使用exports或者module其中一种导出。

//基本形式define(function(require, exports, module) {// 模块代码});

require在需要从模块内部引入外部模块的时候添加。

以下认识还是比较重要的：require执行的时候是同步方式，阻塞脚本执行，所以通过这种方式加载的外部模块，总是能够保证加载完成之后才会被调用，它一般用来加载需要立刻调用的模块。require.async执行是异步方式，不阻塞脚本（脚本加载完成，执行回调），在加载的时候，如果立刻调用外部模块，而外部模块还没下载完成，那么就会出错，所以它一般用来加载不需要立刻调用的模块。两种方式配合使用，可以用来提高首次载入速度。

另外，如果要设置按条件加载，那么就使用require.async。原因如下：

seajs在加载模块的时候，会扫描factory函数内部的所有require调用，并把require调用参数作为该模块的依赖模块，全部加载。如果使用require做条件加载，那么条件是无效的，因为seajs总会扫描到条件语句内部的require，并加载它。

exports在需要通过exports单个导出模块接口的时候添加。

module在需要通过module.exports整个导出一个对象的时候添加。

但是seajs推崇统一的写法，也就是说永远都保持上述书写方式。

典型举例：

//不依赖外部模块//采用exports导出//moduleA.jsdefine(function(require,exports,module){exports.helloA=function(){console.log("This is moduleA.helloA!");}exports.helloExp="moduleA + exports";
});

//依赖外部模块//采用module导出//moduleB.jsdefine(function(require,exports,module){var moduleA = require("./moduleA");moduleA.helloA();//调用moduleA中的hello()方法console.log("moduleA:",moduleA.helloExp);module.exports = {helloB:function(){console.log("This is moduleB!");}}});

总结：与模块定义与调用相关的五个API为define，require，require.async ，exports，module.exports。

二、模块的加载

seajs对于模块的加载自然依赖于seajs，所以需要在对应的html文档中引入seajs。

<script src="./static/sea.js"></script>

然后与加载相关的两个API是seajs.config和seajs.use。

其中seajs.config用来创建一些基本配置，seajs.use用来引入入口点js文件。


<script>seajs.config({base:"./",alias:{moduleA:"lib/moduleA.js"}});seajs.use("./app.js");
</script>

seajs.config配置项还是挺多的，常用的就是base，alias，path了。

更多配置项：配置 · Issue #262 · seajs/seajs · GitHub

seajs.use用来在html文档中引入任意模块，一次性引入一个或者以数组形式引入多个。

更多具体内容：https://github.com/seajs/seajs/issues/260

三、总结

seajs是一种CMD规范的实现，其常用的API有7个：define，require，require.async，exports，module.exports，seajs.config，seajs.use。

通过这7个API，我们可以定义模块，调用模块，在html中加载模块。

需要使用更多功能特性可以参考附录中的seajs文档。

附：

seajs文档：Sea.js - A Module Loader for the Web

例子地址：https://github.com/comefromezero/FrontModule