JavaScript中模块“写法”

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

 

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

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

 

这能代表“模块”吗？这就是一个JS对象啊。原来概念就是这么喊出来的，以为有多么深奥。

 

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

 

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

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

 

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

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

 

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

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

 

 

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

 

哪一种更好呢？ 哪一种更适合在浏览器端呢？

 

纯从代码风格上说，是萝卜白菜各有所爱。只要我们运用了“模块化”的思想来开发就行了。

 

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

 

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

 

 

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

 

1，将一些零散代码封装成一个有用的单元（encapsulate）

2，导出模块的接口API（exports）

3，方便友好引用其它模块（dependency）

 

下一篇：JavaScript在服务器端的模块化