JavaScript模块化

为什么要使用模块化

---

所谓的模块化，就是将网页的功能打包成单独的模块来使用，一个模块就是实现特定功能的文件，有了模块，我们就可以更方便地使用别人的代码，想要什么功能，就加载什么模块。
使用模块化的主要目的

• 解决命名冲突
• 依赖管理
  使用模块化的次要目的
• 提高可读性
• 代码解耦，提高复用性

CMD，AMD，commonJS

---

CMD

所谓的CMD是common module definition的缩写，CMD规范是国内发展出来的，就类似AMD有个requireJS，CMD有SeaJS一样，requireJS和SeaJS所要解决的问题一样，只是在解决问题的手段上存在着一些差异

语法
SeaJS遵从一个模块一个文件的写法，因此就常用文件名作为模块ID。
CMD推崇依赖就近，所以一般不在define的参数中写依赖，在factory中写。

factory有三个参数

factory(require, exports, module)

---

require
require是factory中的第一个参数

require(id)

require是一个方法，接受 模块标识 为唯一参数，用来获取其他模块的提供的接口。

---

exports
exports是一个对象，用来对外界提供模块接口

---

module
module 是一个对象，上面存储了与当前模块相关联的一些属性和方法

---

demo

// 定义模块  myModule.js
define(function(require, exports, module) {
  var $ = require('jquery.js')
  $('div').addClass('active');
});

// 加载模块
seajs.use(['myModule.js'], function(my){

});

---

AMD

AMD指的是Asynchronous Module Definition，由于不是原生JS支持，使用AMD所对应的函数库也就是requireJS，实际上AMD 是 RequireJS 在推广过程中对模块定义的规范化的产出。

AMD主要解决两个问题

• 多个js文件可能有依赖关系，被依赖的文件需要早于依赖它的文件加载到浏览器
• js加载的时候浏览器会停止页面渲染，加载文件越多，页面失去响应时间越长

语法
require定义了一个函数define，它是全局变量，用来定义模块

define(id?, dependencies?, factory);

• id：可选参数，用来定义模块的标识，如果没有提供该参数，脚本文件名（去掉拓展名）
• dependencies：是一个当前模块依赖的模块名称数组
• factory：工厂方法，模块初始化要执行的函数或对象。如果为函数，它应该只被执行一次。如果是对象，此对象应该为模块的输出值

在页面上使用require函数加载模块

require([dependencies], function(){})

require()函数接受两个参数，分别为

• 第一个参数是一个数组，表示所依赖的模块
• 第二个参数是一个回调函数，当前面指定的模块都加载成功后，它将被调用。加载的模块会以参数形式传入该函数，从而在回调函数内部就可以使用这些模块

require()函数在加载依赖的函数的时候是异步加载的，这样浏览器不会失去响应，它指定的回调函数，只有前面的模块都加载成功后，才会运行，解决了依赖性的问题。

---

commonJS

CommonJS是服务器端模块的规范，Node.js采用了这个规范。Node.JS首先采用了js模块化的概念。

• 在一个模块中，存在自由变量require，它是一个函数
  1.这个”require”函数接收一个模块标识符。
  2.“require”返回外部模块所输出的API。
  3.如果出现依赖闭环(dependency cycle)，那么外部模块在被它的传递依赖（transitive dependencies）所require的时候可能并没有执行完成；在这种情况下，”require”返回的对象必须至少包含此外部模块在调用require函数（会进入当前模块执行环境）之前就已经准备完毕的输出。
  4.如果请求的模块不能返回，那么”require”必须抛出一个错误。

• 在一个模块中，会存在一个名为”exports”的自由变量，它是一个对象，模块可以在执行的时候把自身的API加入到其中。

• 模块必须使用”exports”对象来做为输出的唯一表示。