web系列之模块化——AMD、CMD、CommonJS、ES6 整理&&比较

AMD、CMD、CommonJS、ES6

1、AMD

AMD，Asynchronous Module Definition, 异步模块定义。它是一个在浏览器端模块化开发的规范。 它不是javascript原生支持，因此使用AMD规范进行页面开发须要用到对应的库，也就是RequireJS，AMD实际上是RequireJS在推广的过程当中对模块定义的范围化的产出。

requireJS主要解决两个问题：

• 多个js文件存在依赖关系时，被依赖的文件须要早于依赖它的文件加载到浏览器
• js加载的时候浏览器会阻塞渲染线程，加载文件越多，页面失去响应的时间越长

用法： require须要一个root来做为搜索依赖的开始(相似package.json的main)，data-main来指定这个root。

<script src="script/require.js" data-main="script/app.js"></script>
复制代码

这样就指定了root是app.js，只有直接或者间接与app.js有依赖关系的module才会被插入到html中。

• define()函数：用来定义模块的函数。args0: 需引入模块的名字数组，arg1：依赖引入以后的callback，callback的参数就是引入的东西。若是有多个依赖，则参数按照引入的顺序依次传入。

define(['dependence_name'], (args) => {
// args就是从dependence_name引入的东西
// ... Your fucking code ...
   return your_export;
});
复制代码

• require()函数： 用来引入模块的函数。

require(['import_module_name'], (args) => {
// args就是从import_module_name引入的东西
// ... Your fucking code ...
});
复制代码

• require.config配置：
  • baseUrl:加载module的根路径
  • paths：用于映射不存在根路径下面的模块路径
  • shimes：加载非AMD规范的js

2、CMD

CMD， Common Module Definition， 通用模块定义。 CMD是在sea.js推广的过程当中产生的。在CMD规范中，一个模块就是一个文件。

define(function(require, exprots, module) {
	const fs = require('fs');  //接受模块标识做为惟一参数
	// exports，module则和CommonJS相似
	exports.module = {
		props: 'value'
	};
});

seajs.use(['test.js'], function(test_exports) {
// ....
});
复制代码

null	AMD	CMD
定义module时对依赖的处理	推崇依赖前置，在定义的时候就要声明其依赖的模块	推崇就近依赖，只有在用到这个module的时候才去require
加载方式	async	async
执行module的方式	加载module完成后就会执行该module，全部module都加载执行完成后会进入require的回调函数，执行主逻辑。依赖的执行顺序和书写的顺序不必定一致，谁先下载完谁先执行，可是主逻辑 必定在全部的依赖加载完成后才执行(有点相似Promise.all)。	加载完某个依赖后并不执行，只是下载而已。在全部的module加载完成后进入主逻辑，遇到require语句的时候才会执行对应的module。module的执行顺序和书写的顺序是彻底一致的。

3、CommonJS

English time： Common -- 常识 W3C官方定义的API都只能基于Browser，而CommonJS则弥补了javascript这方面的不足。

NodeJS是CommonJS规范的主要实践者。它有四个重要的环境变量为模块化的实现提供支持：module、exports、require、global。 实际用时，使用module.exports(不推荐使用exports)定义对外输出的API，用require来引用模块。CommonJS用同步的方式加载模块。在Server上模块文件都在本地磁盘，因此读取很是快没什么不妥，可是在Browser因为网络的缘由，更合理的方案是异步加载。 CommonJS对模块的定义主要分为：模块引用、模块定义、模块标识3个部分。

一、模块引用：

const fs = require('fs');
复制代码

require的执行步骤：

1. 若是是核心模块， 如fs，则直接返回模块
2. 若是是路径，则拼接成一个绝对路径，而后先读取缓存require.cache再读取文件。(若是没有扩展名，则以js => json => node(以二进制插件模块的方式去读取)的顺序去识别)
3. 首次加载后的模块会在require.cache中，因此屡次require，获得的对象是同一个(引用的同一个对象)
4. 在执行模块代码的时候，会将模块包装成如下模式，以便于做用域在模块范围以内。

(function (exports, require, module, __filename, __dirname) {
  // module codes
});
复制代码

5. 包装以后的代码同过vm原生模块的runInThisContext()方法执行(相似eval，不过具备明确上下文不会污染环境)，返回一个function对象。 最后将当前模块对象的exports、require方法、module以及文件定位中获得的完整文件路径(包括文件名)和文件目录传递给这个function执行。

二、模块定义：

function fn() {}
exports.propName = fn;
module.exports = fn;
复制代码

一个module对象表明模块自己，exports是module的属性。通常经过在exports上挂载属性便可定义导出，也能够直接给module.exports赋值来定义导出(推荐)。

三、模块标识：

模块标识就是传递给require()方法的参数，能够是相对路径或者绝对路径，也能够是符合小驼峰命名的字符串。 NodeJS中CommonJS的实现：Node中模块分为Node提供的核心模块和用户编写的文件模块。

核心模块在Node源代码的编译过程当中，编译进了二进制执行文件。在Node启动的时候部分核心模块就加载到了memory中，因此在引用核心模块的时候，文件定位和编译执行步骤能够省略，而且在路径判断中优先判断，因此它的加载速度是最快的。 文件模块则是在运行时动态加载，须要完整的路径分析，文件定位、编译执行等过程，速度较核心模块慢。 在NodeJS中引入模块须要经历以下3个步骤：

1. 路径分析：module.paths = [‘当前目录下的node_modules’, ‘父目录下的node_modules’, …， ‘跟目录下的node_modules’]

2. 文件定位：文件扩展名分析、目录和包的处理。

   • 文件扩展名分析：Node会按.js => .json => .node的次序补足扩展名依次尝试。（在尝试的过程当中会调用同步的fs模块来查看文件是否存在）
   • 目录和包的处理：可能没有对应的文件，可是存在相应的目录。这时Node会在此目录中查找package.json，并JSON.parse出main(入口文件)对应的文件。若是main属性错误或者没有package.json，则将index做为main。若是没有定位成功任何文件，则到下一个模块路径重复上述工做，若是整个module.paths都遍历完都没有找到目标文件，则跑出查找失败错误。

3. 编译执行：在Node中每一个模块文件都是一个对象，编译执行是引入文件模块的最后一个阶段。定位到文件后，Node会新建一个模块对象，而后根据路径载入并编译。对于不一样的文件扩展名，其载入的方式也有所不一样：

   • .js: 经过fs模块同步读取文件后编译执行
   • .node：这是C++编写的扩展文件，经过dlopen()加载最后编译生成的文件。
   • .json：同.js文件，以后用JSON.parse解析返回结果。 其他文件： 都按js的方式解析。

null	CommonJS	ES6
keywords	exports, require, module, __filename. __dirname	import, export
导入	const path = require('fs'); 必须将一个模块导出的全部属性都引入	import path from 'path'; 能够只引入某个
导出	module.exports = App;	export default App;
导入的对象	随意修改 值的copy	不能随意修改 值的reference
导入次数	能够任意次require，除了第一次，以后的require都是从require.cache中取得	在头部导入，只能导入一次
加载	运行时加载	编译时输出接口

ES6模块

ES6的模块已经比较熟悉了，用法很少赘述，直接上码：

import { prop } from 'app';   //从app中导入prop
import { prop as newProp } from 'app';   // 功能和上面同样，不过是将导入的prop重命名为newProp

import App from 'App';   // 导入App的default
import * as App from 'App';  // 导入App的全部属性到App对象中

export const variable = 'value'; // 导出一个名为variable的常量
export {variable as newVar};   // 和import 的重命名相似，将variable做为newVar导出

export default variable = 'value';  // 将variable做为默认导出
export {variable as default};   // 和上面的写法基本同样

export {variable} from 'module';  // 导出module的variable ，该模块中没法访问
export {variable as newVar} from 'module';  // 下面的本身看 不解释了
export {variable as newVar} from 'module';
export * from 'module';
复制代码

ps：ES6模块导入的变量(其实应该叫常量更准确)具备如下特色： 变量提高、至关于被Object.freeze()包装过同样、import/export只能在顶级做用域

ES6模块区别于CommonJS的运行时加载，import 命令会被JavaScript引擎静态分析，优先于模块内的其余内容执行(相似于函数声明优先于其余语句那样)， 也就是说在文件的任何位置import引入模块都会被提早到文件顶部。

ES6的模块 自动开启严格模式，即便没有写'use strict'; 。 运行一个包含import声明的模块时，被引入的模块先导入并加载，而后根据依赖关系，每一个模块的内容会使用深度优先的原则进行遍历。跳过已经执行过的模块，避免依赖循环。

okey~接下来老哥再看看(查查)import到底干啥了： 标准几乎没有谈到import该作什么，ES6将模块的加载细节彻底交给了实现。 大体来讲，js引擎运行一个模块的时候，其行为大体可概括为如下四步：

1. 解析：engine去解析模块的代码，检查语法等。
2. 加载：递归加载全部被引入的模块，深度优先。
3. 连接：为每一个新加载的模块建立一个做用域，并将模块中的声明绑入其中（包括从其余模块中引入的）。 当js引擎开始执行加载进来的模块中的代码的时候，import的处理过程已经完了，因此js引擎执行到一行import声明的时候什么也不会干。引入都是静态实现的，等到代码执行的时候就啥都不干了。

既然说到了模块(module)，那就顺便提一下它和脚本(script)的区别(注意，我这里说的区别仅限于在Web浏览器中)：

-	module	script
使用方式 (固然还有其余的执行方式，在这里不作过多讨论)	<script src="./source.js type="module" />	<script src="./source.js type="text/javascript" />
下载	①遇到<script>时，会自动应用defer。 ②下载 && 解析module。 ③递归下载module中导入的资源。下载阶段完成。	遇到<script>时默认阻塞文档渲染，开启下载。
执行方式	①下载完成后会递归执行module中导入的资源。 ②而后执行module自己。 ps：内联module少了下载module自己的步骤，其余步骤和引入的module相同。	默认是下载完成当即执行

参考连接：

前端模块化：CommonJS,AMD,CMD,ES6

ES6 的模块系统

深刻浅出NodeJS