为什么要使用模块化？
随着互联网技术的发展，网页的JavaScript代码越来越庞大，越来越复杂，复杂的网页通常需要团队分工合作、进度管理等，开发者迫切需要能隔离、组织庞大的JavaScript代码的功能，也就是这里所说的模块化。
一个模块就是一个实现特定功能的文件，有了模块，我们就可以更方便地使用别人的代码，想要什么功能，就加载什么模块。同时还解决了命名冲突，变量污染等问题。
模块化开发规范在前端先驱们的探索中一步步形成。从最开始的函数封装 --->对象-->立即执行函数，到后来的CommonJS、AMD、CMD。
CommonJS、AMD、CMD
- CommonJS规范
CommonJS是服务器端模块的规范，Node.js采用了这个规范。Node.JS首先采用了js模块化的概念。它的主要内容：
定义模块 根据CommonJS规范，一个单独的文件就是一个模块。每一个模块都是一个单独的作用域，也就是说，在该模块内部定义的变量，无法被其他模块读取，除非定义为global对象的属性
模块输出： 模块只有一个出口，module.exports对象，我们需要把模块希望输出的内容放入该对象
加载模块： 加载模块使用require方法，该方法读取一个文件并执行，返回文件内部的module.exports对象。
//模块定义 myModel.js
var name = 'Byron';
function printName(){
console.log(name);
}
module.exports = {
printName: printName,
}
//加载模块
var nameModule = require('./myModel.js');
nameModule.printName();
CommonJS的局限：由于require是同步的，模块系统需要同步读取模块文件内容，并编译执行以得到模块接口。这在服务器端可以很好的执行，因为模块都放在本地硬盘，直接读取就行了。但CommonJS却不适合浏览器环境，比如：
var math = require('math');
math.add(2, 3);
后面的代码执行依赖于前面加载的模块math，浏览器加载是异步的，如果加载时间很长，后面的代码也无法执行，会一直卡在那里。为了解决这个问题，诞生了AMD和CMD规范。
- AMD
AMD 即Asynchronous Module Definition，中文名是异步模块定义的意思。语法：
1.用define来定义模块。
define(id?, dependencies?, factory);
id：可选参数，用来定义模块的标识，如果没有提供该参数，脚本文件名（去掉拓展名）
dependencies：是一个当前模块依赖的模块名称数组
factory：工厂方法，模块初始化要执行的函数或对象。如果为函数，它应该只被执行一次。如果是对象，此对象应该为模块的输出值
2.用require来加载模块。
require([dependencies], function(){});
require()函数接受两个参数：
第一个参数是一个数组，表示所依赖的模块
第二个参数是一个回调函数，当前面指定的模块都加载成功后，它将被调用。加载的模块会以参数形式传入该函数，从而在回调函数内部就可以使用这些模块
require()函数在加载依赖的函数的时候是异步加载的，这样浏览器不会失去响应，它指定的回调函数，只有前面的模块都加载成功后，才会运行，解决了依赖性的问题。
- CMD
CMD（[Common Module Definition] 模块定义规范。在 CMD 规范中，一个模块就是一个文件。代码的书写格式如下：
define(function(require, exports, module) {
// 模块代码
});
require 是一个方法，接受 模块标识 作为唯一参数，用来获取其他模块提供的接口；exports 是一个对象，用来向外提供模块接口；module 是一个对象，上面存储了与当前模块相关联的一些属性和方法。
- AMD和CMD的区别：
AMD 是 RequireJS 在推广过程中对模块定义的规范化产出。
CMD 是 SeaJS 在推广过程中对模块定义的规范化产出。
AMD:提前执行（异步加载：依赖先执行）+延迟执行。
CMD:延迟执行（运行到需加载，根据顺序执行）。
CMD 推崇依赖就近，AMD 推崇依赖前置。
// CMD
define(function(require, exports, module) {
var a = require('./a')
a.doSomething()
// 此处略去 100 行
var b = require('./b') // 依赖可以就近书写
b.doSomething()
// ...
})
// AMD 默认推荐的是
define(['./a', './b'], function(a, b) { // 依赖必须一开始就写好
a.doSomething()
// 此处略去 100 行
b.doSomething()
...
})
网友评论