1. 为什么要使用模块化？
JS的发展初期 ，仅需实现简单的用户交互逻辑，而随着CPU、浏览器性能的大幅度提升，很多页面逻辑迁移到了客户端，且随着web2.0时代的到来，Ajax技术得到了广泛的应用，jQuery等前端库层出不穷，前端代码日益膨胀。此时JS极其简单的代码组织已无法驾驭如此庞大规模的代码，此时参考其他的语言，例如JAVA有一个package的概念，将逻辑上相关的代码组织到一个包里，每个包互相独立，不会相互影响，这样就可以将代码分块组织。而JS在设计之初，并未提供类似的功能，因此开发者开始模拟类似的功能，来隔离、组织复杂的JS代码，这就是前端模块化的开始。
模块化最初的思路就是在一个文件中编写几个相关的函数，需要的时候加载函数所在的文件，调用函数。然而这样做污染了全局变量，无法保证不与其他模块变量名冲突，且模块成员之间没有什么关系。
之后为解决上面的问题，采用对象的写法，将所有的模块成员封装到一个对象中，var module = {fn1: function(){...}, fn2: function(){...}}在调用模块的时候引用对应的文件module.fn()，这样做避免了污染变量，同时模块里的成员也有了关系，但是在外部可以随意修改内部成员var module.fn1 = 1。
最后出现了一种思路，就是通过立即执行函数，来隐藏内部的变量与函数，立即执行函数将内部的变量与函数都包裹在自己的作用域中，外部无法修改，这种做法就是现阶段模块化的基础。
目前JS模块化规范主要有两种：CommonJS和AMD。
2.CMD、AMD、CommonJS 规范分别指什么？有哪些应用
CommonJS
CommonJS是在服务器端的规范，由Node.js发扬光大。CommonJS包含以下三部分：
- 定义模块：根据CommonJS规范，一个单独的文件就是一个模块。每一个模块都是一个单独的作用域，也即在该模块内部定义的变量，无法被其他模块读取，除非定义为global对象的属性。
- 模块输出：模块只有一个出口，
modules.export对象，我们把模块希望输出的内容放入该对象。 - 加载模块：加载模块使用
require方法，该方法读取一个文件并执行，返回文件内部的module.exports对象。
//定义一个模块math.js
module.exports = function(){
var sum = 0, i = 0, args = arguments
while(i < args.length){
sum += args[i++]
}
return sum;
};
//main.js加载模块
var add = require('math.js')
console.log(add(1,2,3)) // 用node运行，输出结果为6
上述代码首先定义一个了模块math.js，并通过module.exports输出了一个函数，接着在另一个文件中用require加载了这个函数。这就是CommonJS的基本用法。然而可以注意到，上面的代码中require是同步的，模块系统需同步读取模块文件内容，并编译执行以得到模块接口。这在服务器端可以实现，但是在浏览器端，加载JS代码最常见的方式是在document中插入script标签，但script标签天生是异步的，所以CommonJS规范无法在浏览器端实施。
所以就有一种思路，可以用一套标准模板来封装模板定义，于是有了以下两种规范：AMD和CMD。
AMD
AMD（Asynchronous Module Definition），异步模块定义，是一个在浏览器端开发的模块化规范。由于原生JS不支持AMD规范，因此要用到一个库函数"require.js"。AMD采用异步加载的模式，模块的加载不影响它后面语句的运行。所有依赖这个模块的语句，都定义在一个回调函数中，等加载完成后，这个回调函数才会运行。依旧用上述的例子，首先在html里通过script标签里引入require.js：
<script src="./require.js" data-main="./main.js"></script>
以上代码中data-main属性的作用是指定网页程序的主模块，即main.js会第一个被require.js加载。
//定义模块math.js
define(function (){
var add=function(){
var sum=0,i=0,args = arguments;
while(i < args.length){
sum += args[i++];
}
return sum
}
return {
add: add
};
})
//main.js加载模块
require(['math'],function(math){
console.log(math.add(1,2,3))
}) // 在浏览器端运行，输出结果为6。
requireJS定义了一个函数define，它是一个全局变量，用于定义模块。语法为：
define([[id,] dependencies,] factory)
- id 可选参数，用于定义模块的标识，如果没有就默认为脚本文件名（去掉扩展名）
- dependencies 可选参数，是当前模块依赖的模块名称数组
- factory 工厂方法，模块初始化要执行的函数或对象，如果是对象，该对象为该模块的输出值，如果是函数，则应该只执行一次。
加载模块使用require函数
require([dependencies], function(){})
require函数接收两个参数，前一个为一个数组，表示依赖的模块，后一个为一个回调函数，将在所有依赖加载成功后调用，加载的模块会以参数的形式传入该函数，从而在该函数内部可以使用这些模块。由于require函数在加载依赖的时候是异步加载，这样浏览器不会失去响应，并且会等所有依赖加载成功后再执行回调函数，解决了依赖性问题。
CMD
另一种规范叫做CMD（Common Module Definition），通用模板定义，是由国内发展而来。就如AMD有一个requireJS，CMD用的是seaJS。seaJS要解决的问题和requireJS一样，只是在模块定义方式和模块加载时机上有所不同。
CMD规范中，一个模块就是一个文件，写法为：
define(factory)
factory为函数时，表示模块的构造方法。执行该构造方法，可以得到模块向外提供的接口。factory有三个参数：
function(require,exports,module)
- require是一个方法，
require(id)接收模块标识作为唯一参数，用来获取其他模块提供的接口。 - exports是一个对象，用来向外提供模块接口。
- module是一个对象，该对象上存储了与当前模块相关联的一些属性和方法。
//定义模块module.js
define(function(require,exports,module){
var a = require('./a')
a.dosomething
//some code
var b = require('./b')
b.dosomething
//some code
}
//加载模块
seajs.use(['module.js'],function(){
// do something
});
从上述代码可以看出，CMD与AMD的最大的不同点在于CMD推崇依赖就近，即只有在用到某个模块的时候再去require，而AMD推崇依赖前置，在定义模块的时候就要声明其依赖。
同样是异步加载 ，AMD会在加载模块完成后就执行该模块，所有模块加载执行完后进入require的回调函数，执行主逻辑。所以依赖模块的执行顺序和书写顺序不一定一致，哪个先下载，哪个先执行。而CMD加载完某个依赖模块后并不执行，只是下载而已，在所有依赖模块加载完成后，进入主逻辑，遇到require语句的时候才执行对应的模块，所以模块的执行顺序和书写顺序是完全一致的。
网友评论