JavaScript中模块“写法”

在JavaScript模块到底是什么，能用代码具体展现一下吗？

 

其实上一篇已经写了一段事件模块代码

?

1 2 3 4 5 6 7 8

event = function() {     // do more     return {         bind: function() {},         unbind: function() {},         trigger: function() {}     };  }();

这能代表“模块”吗？这就是一个JS对象啊，以为有多么深奥。

 

是的，JavaScript中模块多数时候被实现为一个对象。这么看来，多数时候我们都写过“模块”（但没有在整个项目中应用模块化思想）。或许每个人写模块的方式（风格）还不同。比如上面的事件模块是一个匿名函数执行，匿名函数中封装了很多代码，最后通过return返回给event变量，这个event就是事件模块的接口。

 

又如jQuery，它也是一个匿名函数执行，但它并不返回接口对象。而是将自己暴露给window对象。

?

1 2 3 4 5

(function(window){     // ..     // exports     window.jQuery = window.$ = jQuery; })(window);

 

再如SeaJS，它一开始就将接口公开了

?

1 2 3 4

/**  * Base namespace for the framework.  */ this.seajs = { _seajs: this.seajs };

 

后续是很多的匿名函数执行给变量seajs添加很多工具方法。注意，这里的this在浏览器环境指window对象，如果是定位在浏览器中，这个this也可以去掉。就象Ext。

?

1 2 3 4 5 6 7

Ext = {     /**      * The version of the framework      * @type String      */     version : '3.1.0' };

 

呃，我们已经看到了四种方式写模块（把jQuery，SeaJS，Ext看成模块，呃很大的模块）。

 

哪一种更好呢？ 哪一种更适合在浏览器端呢？纯从代码风格上说，是萝卜白菜各有所爱。只要我们运用了“模块化”的思想来开发就行了。

 

但如果有一种统一的语法格式来写模块岂不是更好，就不会出现各用各的风格来写模块而使代码乱糟糟。

 

这就是目前的现状，开发者强烈需要一种统一的风格来写模块（最好是语言内置了）。这时一些组织出现了，最具代表的如CommonJS，AMD。此外ECMAScript也开始着手模块的标准化写法。

 

无论它们提供什么样的写法，我们需要的仅仅是

• 将一些零散代码封装成一个有用的单元（encapsulate）
• 导出模块的接口API（exports）
• 方便友好引用其它模块（dependency）

 

服务器端的JSer是幸运的，它有Node.js，Node.js遵循了一个称为CommonJS的规范。CommonJS其中就有对写模块的标准化。当然模块化只是其中的一部分而已。具体来说Node.js实现了

• Modules/1.0
• Promises/B (http://github.com/kriskowal/q)
• Promises/D (https://github.com/kriskowal/q)
• Unit Testing/1.0

 

模块化方面它实现了Modules/1.0（已经更新到1.1.1）。

 

以下是node中是写模块的一个示例。

 

math.js

?

1 2 3 4 5 6 7

exports.add = function() {     var sum = 0, i = 0, args = arguments, l = args.length;     while (i < l) {         sum += args[i++];     }     return sum; };

increment.js

?

1 2 3 4

var add = require('math').add; exports.increment = function(val) {     return add(val, 1); };

main.js，该文件为入口文件

?

1 2 3

var inc = require('increment').increment; var a = 1; inc(a); // 2

这就写了一个math、increment、main模块。math提供了add方法来实现数字相加。increment模块依赖于math模块，它提供increment方法实现相加。main获取到increment方法，执行相加操作。

 

以上代码示例可以看到

1. node要求一个js文件对应一个模块。可以把该文件中的代码想象成是包在一个匿名函数中，所有代码都在匿名函数中，其它模块不可访问除exports外的私有变量
2. 使用exports导出API
3. 使用require加载其它模块

 

CommonJS module基本要求如下

1. 标示符require，为一个函数，它仅有一个参数为字符串，该字符串须遵守Module Identifiers的6点规定
2. require方法返回指定的模块API
3. 如果存在依赖的其它模块，那么依次加载
4. require不能返回，则抛异常
5. 仅能使用标示符exports导出API

 

Modules/1.1较1.0仅增加了标示符module，require函数增加了main和paths属性。而仔细比对1.1与1.1.1后发现除了格式调整了下几乎没有变化。

 

相关：

Modules

Modules/1.0

Modules/1.1

Modules/1.1.1

 

下一篇：Node.js模块格式在浏览器中的尝试