JavaScript模块规范(CommonJS,AMD)

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规范,都可以将我们自定义的模块规范化,便于供他人使用。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 148,827评论 1 317
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 63,511评论 1 266
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 99,318评论 0 218
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 42,108评论 0 189
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 50,112评论 1 266
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 39,387评论 1 185
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 30,905评论 2 283
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 29,657评论 0 177
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 33,144评论 0 223
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 29,744评论 2 225
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 31,100评论 1 236
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 27,565评论 2 222
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 32,041评论 3 216
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 25,769评论 0 9
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,301评论 0 178
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 34,173评论 2 239
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 34,313评论 2 242

推荐阅读更多精彩内容