模块化编程

通行的 Javascript 模块规范共有两种：CommonJS 和 AMD。

CommonJS

　　2009年，美国程序员 Ryan Dahl 创造了 node.js 项目，将 Javascript 语言用于服务器端编程。

　node.js 的模块系统，就是参照 CommonJS 规范实现的。在 CommonJS 中，有一个全局性方法 require ()，用于加载模块。假定有一个数学模块 math.js，就可以像下面这样加载。

var math = require ('math'); 

　　然后，就可以调用模块提供的方法：

var math = require ('math');
math.add (2,3); // 5 

　AMD 是"Asynchronous Module Definition"的缩写，意思就是"异步模块定义"。它采用异步方式加载模块，模块的加载不影响它后面语句的运行。所有依赖这个模块的语句，都定义在一个回调函数中，等到加载完成之后，这个回调函数才会运行。

　　AMD 也采用 require ()语句加载模块，但是不同于 CommonJS，它要求两个参数：

require ([module], callback); 

　　第一个参数[module]，是一个数组，里面的成员就是要加载的模块；第二个参数 callback，则是加载成功之后的回调函数。如果将前面的代码改写成 AMD 形式，就是下面这样：

require (['math'], function (math) {
    math.add (2, 3);
}); 

　目前，主要有两个 Javascript 库实现了 AMD 规范： require.js  和  curl.js

　require.js 的诞生，就是为了解决这两个问题：

（1）实现 js 文件的异步加载，避免网页失去响应；

（2）管理模块之间的依赖性，便于代码的编写和维护。

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。

放大模式

　　如果一个模块很大，必须分成几个部分，或者一个模块需要继承另一个模块，这时就有必要采用"放大模式"（augmentation）。

var module1 = (function (mod){
　　mod.m3 = function () {
　　　　//...
　　};
　　return mod;
})(module1); 

　　上面的代码为 module1 模块添加了一个新方法 m3()，然后返回新的 module1 模块。

　　五、宽放大模式（Loose augmentation）

　　在浏览器环境中，模块的各个部分通常都是从网上获取的，有时无法知道哪个部分会先加载。如果采用上一节的写法，第一个执行的部分有可能加载一个不存在空对象，这时就要采用"宽放大模式"。

var module1 = ( function (mod){
　　//...
　　return mod;
})(window.module1 {}); 

　　与"放大模式"相比，＂宽放大模式＂就是"立即执行函数"的参数可以是空对象。

立即执行函数写法

　　使用"立即执行函数"（Immediately-Invoked Function Expression，IIFE），可以达到不暴露私有成员的目的。

var module1 = (function(){
　　var _count = 0;
　　var m1 = function(){
　　　　//...
　　};
　　var m2 = function(){
　　　　//...
　　};
　　return {
　　m1 : m1,
　　m2 : m2
　　};
})(); 

　　使用上面的写法，外部代码无法读取内部的_count 变量。

console.info (module1._count); //undefined

　　module1就是 Javascript 模块的基本写法。