模块化的价值
- 最主要的目的
解决命名冲突
依赖管理 - 其他价值
提高代码可读性
代码解耦，提高复用性
通行的JS模块规范主要有2种：CommonJS 和 AMD
CommonJS
先从CommonJS说起，是由服务器端的JS应用带来的，是由NodeJS发扬光大的，标志着JS模块化编程正式登上舞台
- 1.定义模块： 根据CommonJS规范，一个单独的文件就是一个模块。每一个模块都是一个单独的作用域，也就是说，在该模块内部定义的变量，无法被其他模块读取，除非定义为global对象的属性。
- 2.模块输出： 模块只有一个出口，module.exports对象，我们需要把模块希望输出的内容放到该对象
- 3.加载模块： 加载模块使用require方法，该方法读取一个文件并执行，返回文件内部的module.exports对象
使用举例：
// 模块定义 myModal.js
var name = 'deejay';
function sayName () {
console.log(name);
}
function sayFullName(firstName) {
console.log(firstName + name);
}
module.exports = {
sayName: sayName,
sayFullName: sayFullName,
}
// 加载模块
var nameModule = require('./myModal.js');
nameModule.sayName();
不同的实现对require时的路径有不同要求，一般情况可以省略js扩展名，可以使用相对路径，也可以使用绝对路径，甚至可以省略路径直接使用模块名（前提是该模块是系统内置模块）
在浏览器端存在的问题
require是同步的，模块系统需要同步读取模块文件内容，并编译执行以得到模块接口。在服务器端实现没什么问题，但是在浏览器端实现问题却很多。
浏览器端加载js最佳最容易的方式是在document中插入script标签。但是脚本标签天生异步，传统CommonJS模块在浏览器环境中无法正常加载。
解决思路是之一是：开发一个服务器端的组件，对模块代码做静态分析，将模块与它的依赖列表一起返回给浏览器端。这很好用，但是需要服务器安装额外的组件，并因此要调整一系列底层架构。
另一种解决思路是，用一套标准模板来封装模块定义，但是对于模块应该怎么定义和怎么加载，又产生了分歧：
AMD
Asynchronous Module Definition,异步模块定义。是一个在浏览器端模块化开发的规范。
由于不是JS原生支持，使用AMD规范进行页面开发时需要用到相应的库函数，也就是RequireJS
RequireJS主要解决2个问题：
- 1，多个JS文件可能有依赖关系，被依赖的文件需要早于依赖他的文件加载到浏览器
- 2，JS加载的时候浏览器会停止页面渲染，加载文件越多，页面失去响应时间越长
看一个使用RequireJS的例子：
//定义模块 比如新建一个名为myModule.js的文件
define(['依赖的JS模块'],function () {
var name = 'deejay';
function sayName() {
console.log(name);
}
return {
sayName: sayName,
}
});
//要加载模块时
require(['myModule.js'],function (my) { //my就是myModule.js return的东西
my.sayName();
})
语法
RequireJS定义了一个函数define,它是全局变量，用来定义模块
define(id?, dependencies?, factory);
- 1,id： 可选参数，用来定义模块的标识，如果没有提供该参数，脚本文件名（）
- 2，dependencies： 是一个当前模块依赖的模块名称数组
- 3, factory：工厂方法，模块初始化要执行的函数或者对象。如果为函数，他应该只被执行一次。如果是对象，则此对象应该为模块的输出值。
在页面上使用require函数加载模块
require([dependencies],function () {});
require()函数接受2个参数
- 1，第一个参数是一个数组，表示所依赖的模块
- 2，第二个参数是一个回调函数，当前面指定的模块都加载完成之后，它将被调用。加载的模块会以参数形式传入该函数，从而在回调函数内部就可以使用这些模块。
require()函数在加载依赖的函数的时候是异步加载的，这样浏览器不会失去响应，它指定的回调函数，只有前面的模块都加载完成之后，才会运行，解决了依赖性的问题。
CMD
Common Module Definition 通用模块定义,CMD规范是国内发展出来的，就像AMD有个RequireJS,CMD有个浏览器的实现SeaJS,SeaJS要解决的问题和RequireJS一样，只不过在模块定义方式和模块加载（可以说运行，解析）时机上有所不同。
语法
Sea.js推崇一个模块一个文件，遵循统一的写法
define
define(id?,deps?,factory)
因为CMD推崇：
- 1.一个文件一个模块，所以经常就用文件名作为模块id
- 2.CMD推崇依赖就近，所以一般不在define的参数中写依赖，在factory中写
factory有三个参数
function (require,exports,module)
require
require是factory函数的第一个参数
require(id)
require是一个方法，接受模块标识作为唯一参数，用来获取其他模块提供的接口
exports
exports是一个对象，用来向外提供模块接口
module
module是一个对象，上面存储了与当前模块相关联的一些属性和方法
使用举例：
//定义模块 比如新建一个myModule.js
define(function (require, exports, module) {
var $ = require('jquery.js'); // 依赖就近
$('div').addClass('active');
});
//加载这个模块
seajs.use(['myModule.js'],function () {
});
AMD和CMD直观的看上去，差异就是seajs可以按需的去加载模块，而RequireJS要先写好依赖。现在基本上seajs已经废弃了，都是使用RequireJS（webpack之前）。
AMD规范与CMD规范
var modal = require('modal');
$btn.on('click',function () {
modal.open();
});
要想实现这样的加载组件的效果：
AMD规范
语法：
denfine(id?,denpendencies?,factory) {}
//使用举例
define('modal',['jqurey,dialog'],function ($,Dialog) {
$('.modal').show();
Dialog.open();
});
实现AMD的库有RequireJS,curl,Dojo
CommonJS规范
是服务器端的规范，NodeJS采用了这个规范。
- 1，在一个模块中，存在一个自由的变量'require'，它是一个函数。
这个require函数接受一个模块标识符
require返回外部模块所输出的API
如果出现依赖闭环，那么外部模块在被它的传递依赖所require的时候可能被并没有执行完成；在这种情况下，require返回的对象必须至少包含此外部模块在调用require函数（会进入当前模块执行环境）之前就已经准备完毕的输出。
如果请求的模块不能返回，那么require必须抛出一个错误。 - 2，在一个模块中，会存在一个名为exports的自由变量，它是一个对象，模块可以在执行的时候把自身的API加入到其中。
- 3，模块必须使用exports对象来作为输出的唯一表示。
CMD规范
书写格式为：
define(function (require,exports,module) ) {
}
