http://www.ruanyifeng.com/blog/2012/10/javascript_module.html
本文内容
- 引入
- 模块化
- 最初写法
- 对象写法
- 立即执行函数写法
- 放大模式
- 宽放大模式
- 把模块作为参数
- 模块化规范：CommonJS 和 Asynchronous Module Definition
- CommonJS
- Asynchronous Module Definition
- 用 require.js 加载模块
引入
1995 年 Javascript 诞生时，只是一种为了用于交互的简单的网页脚本语言，像如果你忘记填写用户名，就跳出一个警告，当时的网速只有 28Kbps，这样简单的交互也让 Web 服务器做显然不合适。
如今，Javascript 几乎无所不能，从前端到后端，各种匪夷所思、令人瞠目结舌的用途，程序员用它完成越来越庞大的项目，代码复杂度也在直线飙升。单个网页包含 10000 行 Javascript 代码，早就司空见惯。2010 年，一个工程师透露：Gmail 代码长度是 443000 行！另外，Web 应用程序越来越像桌面应用程序，需要一个团队分工协作、进度管理、单元测试等等，开发者不得不使用软件工程的方法，管理网页的业务逻辑。
编写和维护越来越庞大复杂的代码将越来越困难。Javascript 模块化编程，已经成为一个迫切的需求。理想情况下，开发者只需要实现核心的业务逻辑，其他都可以加载别人已经写好的模块。但是，Javascript 不是一种模块化编程语言，其语法不支持“类”，更别说“模块”了。
正在制定中的 ECMAScript标准 第六版，将正式支持“类”和“模块”，但还需要很长时间才能投入实用。
鉴于此，Javascript 社区做了很多努力。本文总结了当前＂Javascript 模块化编程＂的最佳实践。但是，在此之前，你最好还是体会一下如何用 Javascript 模拟“类”，这是进行 Javascript 模块化编程和其面向对象编程的基础，进而使用面向对象的继承、接口，甚至是设计模式。
模块化
最初写法
该方法，你肯定不陌生，但凡是开始写 Javascript 代码的人，都是从这种方法开始的。几个在一起的函数就是一个模块。如下所示：
function m1(){
// do something
}
function m2(){
// do something
}
上面函数 m1 和 m2，组成一个模块。使用的时候，直接调用就行了。
该方法的缺点很明显：“污染”了全局变量，因为不能保证是否与其他模块发生变量名的冲突，而且模块成员之间看不出直接关系。
对象写法
为了解决上面写法的缺点，可以把模块写成一个对象，所有的模块成员都放到这个对象里。
var module1 = new Object({
_count : 0,
m1 : function (){
// do something
},
m2 : function (){
// do something
}
});
现在函数 m1 和 m2 都封装在 module1 对象里。使用时直接调用就行，如下所示：
module1.m1();
这样做的问题是，会暴露所有模块成员（属性和方法），内部状态可以被外部修改。如下所示，外部可以直接修改内部计数器的值：
module1._count = 5;
立即执行函数写法
使用“立即执行函数（Immediately-Invoked Function Expression，IIFE）”，可以达到不暴露私有成员的目的。
var module1 = (function(){
var _count = 0;
var m1 = function(){
// do something
};
var m2 = function(){
// do something
};
return {
m1 : m1,
m2 : m2
};
})();
这样外部代码就无法修改内部变量 _count。
console.info(module1._count); //undefined
这就是 module1 的基本写法，下面对这种写法改进。
放大模式
如果一个模块很大，就必须拆分；或是，一个模块继承另一个模块，此时，有必要采用“放大模式”。
var module1 = (function (mod){
mod.m3 = function () {
// do something
};
return mod;
})(module1);
上面的代码为 module1 模块添加了一个新方法 m3，然后返回新的 module1 模块。
宽放大模式
实际中，模块的各个部分通常都是从网上获取，有时无法知道哪个部分会先加载。如果采用上一节的写法，第一个执行的部分有可能加载一个不存在对象，这时就需要采用“宽放大模式”。
var module1 = ( function (mod){
// do something
return mod;
})(window.module1 || {});
把模块作为参数
独立性是模块的重要特点，模块内部最好不与程序的其他部分直接交互。为了在模块内部使用全局变量，必须显式地将其他变量输入到模块。
var module1 = (function ($, YAHOO) {
// do something
})(jQuery, YAHOO);
这个 module1 模块需要使用 jQuery 和 YUI，就把这两个现在流行的库（模块）作为参数输入到你的 module1。这样，除了保证模块的独立性，还使模块之间的依赖关系更明显。参见 Ben Cherry：JavaScript Module Pattern: In-Depth。
以上就是 Javascript 模块的基本写法和需要注意的地方，接下来，说明如何规范地使用模块。
模块化规范：CommonJS 和 Asynchronous Module Definition
模块规范
为什么要规范？有了模块后，我们就可以更方便地使用别人的代码，需要什么，就加载什么。但这样做的前提是，大家必须以同样的方式编写模块，否则你有你的写法，我有我的写法，那岂不是乱套了！Javascript 目前还没有官方规范，但通行规范有两种：CommonJS 服务器端模块化规范和 AMD 客户端模块化规范。
CommonJS 服务器端模块化规范
2009年，美国程序员 Ryan Dahl 创造了 node.js 项目，将 Javascript 语言用于服务器端编程。node.js 模块系统就是参照 CommonJS 实现的。这标志着“Javascript模块化编程”正式诞生。因为老实说，在浏览器环境下，没有模块也不是特别大的问题，毕竟网页程序的复杂性有限；但是在服务器端，一定要有模块，与操作系统和其他应用程序互动，否则根本没法编程。
在 CommonJS 中，有一个全局性方法 require()，用于加载模块。假定有一个数学模块 math.js，可以像下面这样加载。
var math = require('math');
然后，就可以调用模块提供的方法：
var math = require('math');
math.add(2,3); // 5
本文主要针对浏览器的客户端脚本模块化编程，因此，对 node.js，以及 CommonJS 不多做介绍。
有了服务器端模块后，很自然地，大家就想要客户端模块。而且最好两者能够兼容，一个模块不用修改，在服务器和浏览器都可以运行。但是很可惜，由于一个重大的局限，使得 CommonJS 规范不适用于浏览器环境。如上代码所示，如果在浏览器中运行，会存在一个很大的问题，看出来了吗？
var math = require('math');
math.add(2, 3);
显然，math.add(2, 3) 必须在 require('math') 成功执行后才能运行，也就是说，math.add 必须等 math.js 通过网络成功加载后，才能执行。这样，如果加载时间很长，整个应用就会停在那里一直等待。
这对服务器端脚本没问题，因为模块就在本地硬盘，加载的速度就是读取磁盘的速度。但对于浏览器来说，这个问题大了，因为相对浏览器，模块都存放在服务器端，等待时间取决于网速。这样，浏览器很可能处于“假死”状态。
因此，浏览器端的模块，不能采用"同步加载"（synchronous），只能采用"异步加载"（asynchronous）。这就是AMD规范诞生的背景。
Asynchronous Module Definition（AMD）客户端模块化规范
AMD 是“异步模块定义”。它采用异步方式加载模块。所有依赖这个模块的语句都放在回调函数中，等到模块成功加载后，回调函数才会运行。AMD 虽然也采用 require 加载模块，但不同于CommonJS，它两个参数：
require([module], callback);
其中，
- 第一个参数 [module]，是一个数组，要加载模块的名称。
- 第二个参数 callback，是成功加载后的回调函数。
前面代码可以改行如下所示：
require(['math'], function (math) {
math.add(2, 3);
});
math 模块 和 math.add 方法不是同步的，所以浏览器不会“假死”。显然，AMD 比较适合浏览器环境。
目前，主要有两个 Javascript 库实现了 AMD 规范：require.js 和 curl.js。本文介绍非常流行的库 require.js。
用 require.js 加载模块
为什么要使用 require.js？
最初，所有 Javascript 代码都写在一个文件里面，只要加载这一个文件就够了。可是后来，代码越来越多，一个文件显然不行了，必须拆分，依次加载。下面网页代码，你肯定不陌生。
<script src="1.js"></script>
<script src="2.js"></script>
<script src="3.js"></script>
<script src="4.js"></script>
<script src="5.js"></script>
<script src="6.js"></script>
该代码依次加载多个 js 文件。这样的写法有很大的缺陷：
- 加载 js 文件时，浏览器会停止网页渲染，加载文件越多，网页失去响应的时间就越长。
- 由于 js 文件之间是有依赖关系的，必须严格保证加载顺序。依赖性最大的模块一定要最后加载，当依赖关系很复杂的时候，代码的编写和维护会变得很困难。
require.js 就是为了解决这些问题而产生的：
- 实现 js 文件的异步加载，避免网页失去响应。
- 管理模块之间的依赖性，便于代码的编写和维护。
加载 require.js
先在官方网站下载最新版本的 require.js。下载后，假定把它放在 js 子目录下，用下面代码加载：
<script src="js/require.js"></script>
可加载这个文件本身也可能因为网络或是服务器问题，不能成功加载，而造成网页失去响应。解决方法有两个，一个是把它放在网页底部加载，另一个是写成下面这样：
<script src="js/require.js" defer async="true" ></script>
async 属性表明文件需要异步加载，避免网页失去响应。IE 不支持这个属性，只支持 defer，所以把 defer 也写上。
自定义主模块
加载 require.js 后，就要加载我们自己的代码了。假定我们自己的代码文件是 main.js，它是你的“主模块”，也放在 js 目录下面。那么，只需要写成下面这样就行了：
<script src="js/require.js" data-main="js/main"></script>
data-main 属性的作用是，指定网页程序的主模块。在上例中，就是 js 目录下面的 main.js，这个文件会第一个被 require.js 加载。由于 require.js 默认的文件后缀名是 js，所以可以把 main.js 简写成 main。
main.js 是“主模块”，意味着是整个网页的入口代码，有点像 C 语言的 main() 函数，所有代码都从这儿开始运行。
如果我们的代码不依赖任何其他模块，那么可以直接写入 javascript 代码。
// main.js
alert("加载成功！");
要这么写就没必要使用 require.js。实际的情况是，主模块依赖于其他模块，这就需要使用 AMD 规范定义的的 require 函数了。
// main.js
require(['moduleA', 'moduleB', 'moduleC'], function (moduleA, moduleB, moduleC){
// some code here
});
require 函数有两个参数，其中，
- 第一个参数，是一个数组，表示所依赖的模块，本代码是 ['moduleA', 'moduleB', 'moduleC']，即主模块依赖三个模块。
- 第二个参数，是一个回调函数，当指定的所有模块都成功加载后，才会被调用。加载的模块以参数形式传入该函数，从而在回调函数中使用这些模块。
这样，require 异步加载 moduleA，moduleB 和 moduleC，浏览器不会失去响应；指定了回调函数，只有当所有模块都加载成功才会运行，解决了 js 依赖性的问题。
假设，主模块依赖 jquery、underscore 和 backbone 三个模块，main.js 可以这样写：
require(['jquery', 'underscore', 'backbone'], function ($, _underscore, Backbone){
// some code here
});
自定义加载
默认情况下，require.js 假设你的模块与 main.js 在同一目录，文件名分别为 jquery.js，underscore.js 和 backbone.js，然后自动加载。
使用 require.config 方法，我们可以自定义对模块加载的行为。require.config 写在主模块（main.js）的顶部。其参数是一个 paths 对象，指定各个模块的加载路径。如下所示：
require.config({
paths: {
"jquery": "jquery.min",
"underscore": "underscore.min",
"backbone": "backbone.min"
}
});
上面代码表明你的三个模块文件与 main.js 在同一个 js 目录。如果这些模块在其他目录，如 js/lib 目录，则有两种写法。要么逐一指定，要么直接指定基目录。
require.config({
paths: {
"jquery": "lib/jquery.min",
"underscore": "lib/underscore.min",
"backbone": "lib/backbone.min"
}
});
或是，
require.config({
baseUrl: "js/lib",
paths: {
"jquery": "jquery.min",
"underscore": "underscore.min",
"backbone": "backbone.min"
}
});
如果某个模块在另一台主机上，也可以直接指定它的网址，比如：
require.config({
paths: {
"jquery": "https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min"
}
});
require.js 要求，每个模块是一个单独的 js 文件。但这样，加载多个模块就会发出多个 HTTP 请求，影响网页的加载速度。因此，require.js 提供了一个优化工具，当模块部署完毕以后，该工具将多个模块合并在一个文件中，减少 HTTP 请求次数。
加载 AMD 规范的模块
require.js 加载的模块必须采用 AMD 规范。具体来说，模块必须采用 define 函数来定义。如果一个模块不依赖其他模块，那么可以直接定义在define()函数之中。
假设，有一个 math.js 文件，定义了一个 math 模块。如下所示：
// math.js
define(function (){
var add = function (x,y){
return x+y;
};
return {
add: add
};
});
那么，加载该模块的方法如下所示：
// main.js
require(['math'], function (math){
alert(math.add(1,1));
});
如果 math.js 模块还依赖其他模块，那么，define 函数的第一个参数（类型是数组），指明该模块的依赖性。
define(['myLib'], function(myLib){
function foo(){
myLib.doSomething();
}
return {
foo : foo
};
});
当 require 函数加载 math.js 前，会先加载 myLib.js 文件。
加载非 AMD 规范的模块
理论上，require.js 加载的模块必须符合 AMD 规范，即用 define 函数定义的模块。但实际情况是，虽然已经有一部分流行的函数库（比如 jQuery）符合 AMD 规范，更多的库并不符合。那么，require.js 是否能够加载非规范的模块呢？当然可以。加载非规范模块前，要先用 require.config 方法，定义它们的一些特征。
例如，上面三个模块：jquery.js、underscore.js 和 backbone.js，其中，jQuery.js 符合规范，而 underscore 和 backbone 这两个库不符合。如果要加载它们的话，必须先定义它们的特征。
require.config({
shim: {
'underscore':{
exports: '_'
},
'backbone': {
deps: ['underscore', 'jquery'],
exports: 'Backbone'
}
}
});
require.config 接受一个配置对象 shim，专门用来配置不兼容的模块。具体来说，每个模块要定义：
- exports值（输出的变量名），表明这个模块外部调用时的名称。
- deps数组，表明该模块的依赖性。
比如，jQuery 插件可以这样定义：
shim: {
'jquery.scroll': {
deps: ['jquery'],
exports: 'jQuery.fn.scroll'
}
}
require.js 插件
require.js 还提供一系列插件，实现一些特定的功能。
domready 插件，可以让回调函数在页面 DOM 结构加载完成后再运行。
require(['domready!'], function (doc){
// called once the DOM is ready
});
text 和 image 插件，则是允许require.js加载文本和图片文件。
define([
'text!review.txt',
'image!cat.jpg'
],
function(review,cat){
console.log(review);
document.body.appendChild(cat);
}
);
类似的插件还有 json 和 mdown，用于加载 json 文件和 markdown 文件。