FED

©FrontEndDev.org
2015 - 2024
web@2.22.0 api@2.20.0

coolie入门4-如何书写 CMD 模块

开发环境

开发环境下,模块的书写非常的方便、简洁。总览如下:

define(function(require, exports, module){
    require('./some/module.js');
    module.exports = 123;
});

具体细节如下:

1、一个文件一个模块

开发环境下,一个文件必须是一个模块,管理方便,颗粒化,文件路径就是模块 ID。

- js
|-- a.js 一个文件一个模块
|-- b.js
|-- c.js
|-- d.js
`-- ...

2、不写模块 ID

开发环境下,不能写模块的 ID,模块加载器会自动以模块文件所在的地址为模块 ID,这也是为什么一个文件里只能写一个模块的原因了。

define('不要在此写模块 ID', function(require, exports, module){
    // code
});

3、不显式模块依赖

开发环境下,不需要显示书写模块的依赖,直接使用require即可。

define('不要在此写模块 ID', [
    // 这么写是不推荐的
    './path/to/a.js',
    './path/to/b.js'
], function(require, exports, module){
    // code
});

4、require 关键字不能更换

在加载模块的时候,会以require关键字作为提取模块依赖的匹配,因此不能修改它。exportsmodule可以修改。

define(function(requireabc, exports, module){
    // 不能将`require`关键字替换
    var a = requireabc('./path/to/a.js');
});

5、模块依赖必须是显式

模块依赖中不能包含变量,也不能重写require关键字。

define(function(require, exports, module){
    // 模块依赖地址不能包含变量等信息
    var md = window.a  ? './path/to/a.js' : './path/to/b.js';
    var a = require(md);
});

6、依赖模块必须为本地相对地址

模块依赖必须为本地相对地址,并且不推荐将模块地址的文件后缀省略,因为模块为 js 文件,因此默认的文件后缀为.js

define(function(require, exports, module){
    // 不能写绝对路径的模块
    // 允许的模块地址为
    // ./path/to/a.js
    // path/to/a.js
    // /path/to/a.js
    var a = require('./path/to/a.js');
});

7、模块出口必须在module.exports

模块的出口地址是exports,它是一个空对象,因此可以直接在上面添加属性和方法,如:

exports.name = 'cloudcome';
exports.sayName = function(){
    alert(this.name);
};

如果模块的出口是一个函数,那么就必须覆盖exports

module.exports = function(name){
    alert(name);
};

8、文本模块

文本模块直接写文本内容即可。但需要注意的是,模块加载器只加载文本模块,而不会去执行响应的文本操作,如将 css 内容插入到页面上、或者将 html 模板文件渲染成 html 内容,这些事情需要相应的脚本来做,如 alien 中的modification模块的importStyle方法来导入 css 内容,以及Template模块将 html 模板渲染成 html 内容。

// 纯文本引入
require('text!./some.txt');

// css 文本,构建时会压缩`some.css`
require('css!./some.css');

// html 文本,构建时会压缩`some.html`
require('html!./some.html');

生产环境

生产环境无需关心,从开发环境到生产环境,由coolie代劳,它将模块路径、内容都进行压缩,并且对所有依赖模块进行合并。相关的coolie操作,后文详述。 如下图,是一个典型的生产环境代码:

img.png

图示中,第一个模块为入口模块,入口模块的 ID 为 0,依赖了1,2,3,4,5共5个模块,第3-7行分别对应了1,2,3,4,5这5个模块。其中第1行为coolie的构建时间。