CommonJS和AMD

Posted 2020-10-04

在JavaScript模块一文中介绍了如何组织代码实现模块化。模块化能隐藏私有的属性和方法，只暴露出公共接口。这样别人就不需要从头开始造轮子，直接用你的模块中定义的功能就行了。而且保证了命名空间，不会出现命名冲突。

但如果没有一套规范做参照，每个人都随自己的喜好定义模块，使用别人的模块就会出现障碍。本篇就介绍一下通用的定义JS模块的规范：CommonJS和AMD

CommonJS

Nodejs的模块系统就采用CommonJS模式。CommonJS标准规定，一个单独的文件就是一个模块，模块内将需要对外暴露的变量放到exports对象里，可以是任意对象，函数，数组等，未放到exports对象里的都是私有的。用require方法加载模块，即读取模块文件获得exports对象。

例如定义个hi.js：

var str = ‘Hi‘;

function sayHi(name) {
  console.log(str + ‘, ‘ + name + ‘!‘);
}

module.exports = sayHi;

在hi模块中定义了sayHi函数，用exports将它暴露出去。未被暴露出去的变量str是无法被外部访问的。其他模块要用这个函数的话，需要先require这个hi模块：

var Hi = require(‘./hi‘);
Hi(‘Jack‘);     // Hi, Jack!

第一行里的变量Hi，其实就是hi.js里用module.exports = sayHi;输出的sayHi函数。

注意上面用require加载时写的是相对路径，让Nodejs去指定路径下加载模块。如果省略相对路径，默认就会在node_modules文件夹下找hi模块，那很可能因为找不到而报错。如果你加载的是Node内置模块，或npm下载安装后的模块，可以省略相对路径，例如：

var net = require(‘net‘);
var http = require(‘http‘);

在JavaScript模块一文中介绍过JS模块的写法，这里出现的module，exports，require是JS的新语法吗？不是新语法，只是CommonJS的语法糖。Node会将上述hi.js编译成：

// 准备module对象:
var module = {
    id: ‘hi‘,
    exports: {}
};
var load = function (module) {
    function sayHi(name) {
        console.log(‘Hi, ‘ + name + ‘!‘);
    }

    module.exports = sayHi;
    return module.exports;
};
var exported = load(module);
// 保存module:
save(module, exported);

上来先定义一个module对象，属性id是该模块名即文件名，属性exports就是最终需要暴露出来的对象。因此我们在hi.js代码里明明没有var声明过module对象，但module.exports = sayHi;居然不会报错。原因就是module是Node在加载js文件前已经事先替我们准备好了。最后Node会用自定义函数save将这个module对象保存起来。

Node保存了所有的module对象后，当我们用require()获取module时，Node会根据module.id找到对应的module，并返回module. exports，这样就实现了模块的输出。

CommonJS是同步的，意味着你想调用模块里的方法，必须先用require加载模块。这对服务器端的Nodejs来说不是问题，因为模块的JS文件都在本地硬盘上，CPU的读取时间非常快，同步不是问题。

但在客户端浏览器用CommonJS加载模块将取决于网速，如果采用同步，网络情绪不稳定时，页面可能卡住。因此针对客户端出现了AMD异步模块定义。

AMD

AMD（Asynchronous Module Definition）异步加载模块。AMD标准规定，用define来定义模块，用require来加载模块：

define(id, [depends], factory);  
require([module], callback);

先看define定义模块的示例：

define([‘module1‘, ‘module2‘], function (module1, module2) {
    ……
    return { … };
});

第一个参数id是你的模块名，上例省略。事实上这个id没什么用，就是给开发者看的。

第二个参数[depends]是该模块所依赖的其他模块，上例中该模块依赖另两个模块module1和module2。如果你定义的模块不依赖其他任何模块，该参数可以省略。

第三个参数factory，生产出（即return出）一个对象供外部使用（我看到有的资料里将该参数命名为callback，感觉callback语义方面有点暧昧，命名成factory更贴切）。

定义好模块后，再看用require加载模块的示例：

require([‘yourModule1‘, ‘yourModule2‘], function (yourModule1, yourModule2) {
    ……
});

可以和CommonJS的require方法对比一下，AMD的require多了一个参数callback。

第一个参数是需要加载的模块名，可以是一个数组，意思是加载多个模块。加载模块时，如果该模块的define里有[depends]参数，就会先加载[depends]里指定的依赖模块。加载完[depends]里的依赖模块后，运行define里的factory方法得到该模块的实例。然后将该实例依次传入第二参数callback作为参数。

第二个参数callback回调函数，参数是根据第一个参数，依次加载模块后得到的实例对象。等第一个参数指定的模块全部加载完后，会执行该callback。

require加载过程分几步：

第一步，将依赖列表的模块名转换为URL，常见的是basePath + moduleID + ".js"。例如：

require(["aaa", "bbb"], function(a, b){});
//将在require内部被转换成：
//require(["http://1.2.3.4/aaa.js", 
//         "http://1.2.3.4/bbb.js"], function(a, b){});

第二步，从检测对象数组里查看该模块是否被加载过（状态是否为2），或正在被加载（状态是否为1）。只有从来没加载过此节点，才会进入加载流程。

第三步，将该模块的状态设为1，表示正在被加载。创建script标签，模块的URL添加到src里，并绑定onload，onreadystatechange，onerror事件，将script插入DOM树中开始加载。浏览器加载完后会触发绑定的on事件，里面可以将模块的状态改为2，表明已经加载完毕。

第四步，将模块的URL，依赖列表，状态等构建一个检测对象数组，供第二步检测用。

你可以将所有需要用到模块里变量和方法的代码，都放到callback中。require下面的代码将继续执行，这样就能避免浏览器卡住假死的情况。

实现了AMD规范的JS库有：require.js。看一个用require.js的例子：

//myModule1.js
define(function() {
    var m1 = {};
    m1.say = function() {
        console.log(‘Hi myModule1!‘);
    }
    return m1;
});

//myModule2.js
define([‘myModule3‘], function(m3) {
    var m2 = {};
    m2.say = function() {
        m3.say();
        console.log(‘Hi myModule2!‘);
    }
    return m2;
});

//myModule3.js
define(function() {
    var m3 = {};
    m3.say = function() {
        console.log(‘Hi myModule3!‘);
    }
    return m3;
});

//html
console.log("before require");
require([‘myModule1‘,‘myModule2‘], function(m1, m2){         
    m1.say();
    m2.say();
});
console.log("after require");
//before require
//after require
//Hi myModule1!
//Hi myModule3!
//Hi myModule2!

HTML中先执行console.log(“before require”);，打印出第一条。

然后执行require，因为require.js是AMD异步加载，所以执行require后的console.log(“after require”);语句，打印出第二条。

执行require依次加载模块。先加载myModule1。发现myModule1的define里无[depends]参数，不依赖其他模块。因此运行define里的factory方法获得myModule1的实例对象m1。

再加载myModule2。发现myModule2依赖myModule3，因此加载myModule3。myModule3无[depends]参数，不依赖其他模块。因此运行factory获得myModule3的实例对象m3。

加载完myModule3后，运行myModule2的factory获得myModule2的实例对象m2。

myModule2也加载完毕后，require的所有模块均加载完毕，运行回调函数。前面获得的实例对象m1和m2作为参数传给回调函数。

运行m1.say();打印出第三条

运行m2.say();，根据方法定义，先运行m3.say();打印出第四条，再运行console.log(‘Hi myModule2!’);打印出第五条。

有些库并没有严格遵照AMD，用define()函数定义的模块，此时需要用shim技术（所谓shim就是垫片，即把一个新的API引入到一个旧环境中，并且仅靠旧环境中已有的手段来实现）。例如require.js就为require.config定义了shim属性，我们用它来加载并没有采用AMD规范的underscore和backbone这两个库：

require.config({
    shim: {
        ‘underscore‘:{
            exports: ‘_‘
        },
        ‘backbone‘: {
            deps: [‘underscore‘, ‘jquery‘],
            exports: ‘Backbone‘
        }
    }
});

当然本篇并不是介绍require.js，更多require.js的用法请自行参照官网

总结

无论是被Nodejs采用的服务器端的CommonJS规范，还是客户端的AMD规范，都可以将我们自定义的模块规范化，便于供他人使用。

作者：张歆琳
链接：http://www.jianshu.com/p/fc858878d891
來源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。