模块化：CMD、AMD、CommonJS

文章地址：

1. 模块化：CMD、AMD、CommonJS
2. CommonJS规范

模块化：CMD、AMD、CommonJS

CommonJS

CommonJS是服务器端模块的规范，由Node推广使用，webpack也采用这种规范编写

commonJs规范：

CommonJS模块规范主要分为三部分：模块定义、模块标识、模块引用。

模块定义：module对象：在每一个模块中，module对象代表该模块自身。 export属性：module对象的一个属性，它向外提供接口。输出模块变量的最好方法是使用module.exports对象。一个单独的文件就是一个模块。每一个模块都是一个单独的作用域，也就是说，在该模块内部定义的变量，无法被其他模块读取，除非定义为global对象的属性。

模块标识：传递给require方法的参数，必须是符合小驼峰命名的字符串，或者以 . 、… 、开头的相对路径，或者绝对路径。

模块引用：加载模块使用require(同步加载)，该方法读取一个文件并执行，返回文件内部的module.exports对象。

优势：

在后端，JavaScript的规范远远落后并且有很多缺陷，这使得难以使用JavaScript开发大型应用。比如：没有模块系统、标准库较少、没有标准接口、缺乏包管理系统、列表内容

1. CommonJS模块规范很好地解决变量污染问题，每个模块具有独立空间，互不干扰，命名空间相比之下就不太好。
2. CommonJS规范定义模块十分简单，接口十分简洁。
3. CommonJS模块规范支持引入和导出功能，这样可以顺畅地连接各个模块，实现彼此间的依赖关系
4. CommonJS规范的提出，主要是为了弥补JavaScript没有标准的缺陷，已达到像Python、Ruby和Java那样具备开发大型应用的基础能力，而不是停留在开发浏览器端小脚本程序的阶段

缺点：

没有并行加载机制
由于CommonJS是同步加载模块，这对于服务器端是很不好的，因为所有的模块都放在本地硬盘。等待模块时间就是硬盘读取文件时间，很小。但是，对于浏览器而言，它需要从服务器加载模块，涉及到网速，代理等原因，一旦等待时间过长，浏览器处于”假死”状态。
所以浏览器端不是很适合Common.Js，出现另一种规范AMD

AMD

AMD 是运行在浏览器环境的一个异步模块定义规范 ，是RequireJS 在推广过程中对模块定义的规范化产出。

AMD规范

AMD推崇依赖前置，在定义模块的时候就要声明其依赖的模块

优点

用户体验好，因为没有延迟，依赖模块提前执行了。

CMD

CMD是一个通用模块定义规范；是SeaJs推广过程中对模块定义的规范化产出

CMD规范

CMD推崇依赖就近，只有在用到某个模块的时候才会去require

优点

性能好，因为只有用户需要的时候才执行。

CommonJS规范

require的内部处理流程

require命令是CommonJS规范之中，用来加载其他模块的命令。它其实不是一个全局命令，而是指向当前模块的module.require命令，而后者又调用Node的内部命令Module._load。

Module._load = function(request, parent, isMain) {
  // 1. 检查 Module._cache，是否缓存之中有指定模块
  // 2. 如果缓存之中没有，就创建一个新的Module实例
  // 3. 将它保存到缓存
  // 4. 使用 module.load() 加载指定的模块文件，
  //    读取文件内容之后，使用 module.compile() 执行文件代码
  // 5. 如果加载/解析过程报错，就从缓存删除该模块
  // 6. 返回该模块的 module.exports
};

上面的第4步，采用module.compile()执行指定模块的脚本，逻辑如下。

Module.prototype._compile = function(content, filename) {
  // 1. 生成一个require函数，指向module.require
  // 2. 加载其他辅助方法到require
  // 3. 将文件内容放到一个函数之中，该函数可调用 require
  // 4. 执行该函数
};

上面的第1步和第2步，require函数及其辅助方法主要如下。

• require(): 加载外部模块；
• require.resolve()：将模块名解析到一个绝对路径；
• require.main：指向主模块；
• require.cache：指向所有缓存的模块；
• require.extensions：根据文件的后缀名，调用不同的执行函数。

一旦require函数准备完毕，整个所要加载的脚本内容，就被放到一个新的函数之中，这样可以避免污染全局环境。该函数的参数包括require、module、exports，以及其他一些参数。

(function (exports, require, module, __filename, __dirname) {
  // YOUR CODE INJECTED HERE!
});

Module._compile方法是同步执行的，所以Module._load要等它执行完成，才会向用户返回module.exports的值。

脑图：