我们为什么要模块化？
一般出来什么东西，说明当前的工具有其缺陷，或者是为了方便什么。
那么我们就来看看通过模块，我们可以做到什么？
我们可以只关注自己的核心逻辑，而不用考虑其中的辅助功能。比如我们想要实现计算两个文本框中数值的和，我们只需要关注业务逻辑,而不需要关注自己如何查找到该元素（查找到元素可以交给jquery来做，还解决了兼容性问题）。
通过模块，我们可以方便的使用别人的代码，需要什么模块就引入对应的依赖模块。
我们先来看看几种原生js的实现模块化得方法（下面说的每一个方法都是为了解决上一种方法出现的问题）：
-
原始的模块写法：
function a1(){ } function a2(){ } 缺点：污染全局变量，可能造成变量冲突，无法直观的显示二者的联系 -
解决上一问题
var module = {
a1: function(){
},
a2: function(){
}
}
缺点：用户可以在外面修改module内的变量
- 解决上一问题
var module = (function(){
var m1 = function(){
};
var m2 = function(){
};
return {
m1 : m1,
m2 : m2
};
});
通过立即执行函数，这样就解决了模块内部变量可能被修改的问题
缺点： 如果此模块需要依赖另一个模块才能生效
- 解决上一问题
var module = (function(mod){
mod.m1 = function(){
};
return mod;
})(another_module);
下面我们介绍现在应用广泛的javascript模块规范：CommonJS,AMD,以及国内的CMD。
- CommonJS
我们先来说CommonJS，在其中有一个require()方法，用于加载模块
比如：
假设我们的一个模块（add_module）中有一个求两数之和的方法，在另一个地方我们就可以通过下面的方法使用这个求和方法。
var addModule = require(‘add_module’);
addModule.add(1,2);
- AMD
既然已经有了CommonJS，为什么还会出现AMD呢？
因为CommonJS不适合浏览器环境，上面的代码假如在浏览器中执行，那么浏览器需要时间来加载add_module，如果网络条件不好，浏览器会出现“假死”状态。因此浏览器端不能采用“同步加载”，而应该使用“异步加载”。
AMD（异步模块定义），采用异步的方式加载模块，所有需要依赖其他模块的语句都被定义在回调函数中。
用AMD的语法改写上面CommonJS的写法：
require([‘add_module’],function(addModule){
addModule.add(1,2);
});
- 基于AMD规范的javascript库：require.js
require.js是为了实现下面的两个效果：
- 实现js文件的异步加载，避免网页失去响应；
- 管理模块之间的依赖性，便于代码的编写和维护。
3.1 使用require.js
从官网下载require.js，在html中引入
<script src="js/require.js" defer async="true" ></script>
async属性表明这个文件需要异步加载，避免网页失去响应。IE不支持这个属性，只支持defer，所以把defer也写上。
引入我们自己写的需要执行的js文件
<script src="js/require.js" data-main=“main” defer async="true" ></script>
data-main属性的作用是，指定网页程序的主模块。在上例中，就是js目录下面的main.js，这个文件会第一个被require.js加载。由于require.js默认的文件后缀名是js，所以可以把main.js简写成main。
main.js文件:
require(['moduleA', 'moduleB'], function (moduleA, moduleB){
// some code here
});
require()函数接受两个参数。第一个参数是一个数组，表示所依赖的模块，上例就是['moduleA', 'moduleB']，即主模块依赖这2个模块；第二个参数是一个回调函数，当前面指定的模块都加载成功后，它将被调用。加载的模块会以参数形式传入该函数，从而在回调函数内部就可以使用这些模块。
require()异步加载moduleA，moduleB，浏览器不会失去响应；它指定的回调函数，只有前面的模块都加载成功后，才会运行，解决了依赖性的问题。
比如我们需要依赖jquery
require(['jquery'], function ($){
// some code here
});
主模块的依赖模块是['jquery']。
默认情况下，require.js假定这个模块与main.js在同一个目录，文件名为jquery.js，然后自动加载。
使用require.config()方法，我们可以对模块的加载行为进行自定义。require.config()就写在主模块（main.js）的头部。
参数就是一个对象，这个对象的paths属性指定各个模块的加载路径。
如果我们的依赖文件和main.js不在同一文件夹下呢？
require.config({
paths: {
"jquery": "lib/jquery.min"
}
});
也可以通过配置baseUrl来改变基目录
require.config({
baseUrl: "js/lib",
paths: {
"jquery": "jquery.min"
}
});
自定义的require.js加载的模块，采用AMD规范，即就是模块必须采用特定的define()函数来定义。
- 如果一个模块不依赖其他模块，那么可以直接定义在define()函数之中。
define(function (){
var add = function (x,y){
return x+y;
};
return {
add: add
};
});
- 如果这个模块还依赖其他模块，那么define()函数的第一个参数，必须是一个数组，指明该模块的依赖性。
define(['myLib'], function(myLib){
function foo(){
myLib.doSomething();
}
return {
foo : foo
};
});
加载非规范的模块
理论上，require.js加载的模块，必须是按照AMD规范、用define()函数定义的模块。但是实际上，虽然已经有一部分流行的函数库（比如jQuery）符合AMD规范，更多的库并不符合。那么，require.js是否能够加载非规范的模块呢？
回答是可以的。
这样的模块在用require()加载之前，要先用require.config()方法，定义它们的一些特征。
举例来说，underscore和backbone这两个库，都没有采用AMD规范编写。如果要加载它们的话，必须先定义它们的特征。
require.config({
shim: {
'underscore':{
exports: '_'
},
'backbone': {
deps: ['underscore', 'jquery'],
exports: 'Backbone'
}
}
});
require.config()接受一个配置对象，这个对象除了有前面说过的paths属性之外，还有一个shim属性，专门用来配置不兼容的模块。具体来说，每个模块要定义（1）exports值（输出的变量名），表明这个模块外部调用时的名称；（2）deps数组，表明该模块的依赖性。
4.CMD
关于CMD的介绍，大家可以点击这里查看；
关于AMD和CMD的比较，大家可以点击这里看玉伯写的一篇评论；
SeaJS和RequireJS的区别，大家可以点击这里。
本文内容是我自己在阮一峰博客的基础上整理的，原文大家可以查看：
http://www.ruanyifeng.com/blog/2012/10/javascript_module.html
http://www.ruanyifeng.com/blog/2012/10/asynchronous_module_definition.html
http://www.ruanyifeng.com/blog/2012/11/require_js.html
网友评论