深度扫盲JavaScript的模块化（AMD , CMD , CommonJs 和 ES6）

 

原文地址

https://blog.csdn.net/haochangdi123/article/details/80408874

1、commonJS

一、内存状况

对于基本数据类型，属于复制。即会被模块缓存。同时，在另外一个模块能够对该模块输出的变量从新赋值。

对于复杂数据类型，属于浅拷贝。因为两个模块引用的对象指向同一个内存空间，所以对该模块的值作修改时会影响另外一个模块。

// b.js
let num = 1;
let obj = {
    name: 'hcd'
};
setTimeout(() => {
  console.log('b.js-num:', num);
  console.log('b.js-name:', obj.name);
}, 1000)
module.exports = {
  num,
  obj
}



// a.js
let mod = require('./b.js')
mod.num = 2;
mod.obj.name = 'newName'
console.log('a.js-num:', mod.num);
console.log('a.js-name:', mod.obj.name);



//运行node
node a.js
a.js-num:  2
a.js-name: newName
b.js-num:  1         // 1秒后
b.js-name: newName  // 1秒后

二、执行状况

当使用require命令加载某个模块时，就会运行整个模块的代码。

当使用require命令加载同一个模块时，不会再执行该模块，而是取到缓存之中的值。也就是说，CommonJS模块不管加载多少次，都只会在第一次加载时运行一次，之后再加载，就返回第一次运行的结果，除非手动清除系统缓存。

循环加载时，属于加载时执行。即脚本代码在require的时候，就会所有执行。一旦出现某个模块被”循环加载”，就只输出已经执行的部分，还未执行的部分不会输出。

// a.js
exports.done = false
let b = require('./b.js')
console.log('a.js-1', b.done)
exports.done = true
console.log('a.js-2', '执行完毕')




// b.js
exports.done = false
let a = require('./a.js')
console.log('b.js-1', a.done)
exports.done = true
console.log('b.js-2', '执行完毕')




// c.js
let a = require('./a.js')
let b = require('./b.js')

console.log('c.js-1', '执行完毕', a.done, b.done)



运行node c.js
b.js-1 false
b.js-2 执行完毕
a.js-1 true
a.js-2 执行完毕
c.js-1 执行完毕 true true

2、AMD

一、官方定义

模块自己和模块之间的引用能够被异步的加载，是一个概念

先引入的模块，后使用的引用模块的方法，因此咱们称之为依赖前置

二、AMD优势

包括异步的调用和自己的高扩展性，

它实现了解耦，模块在代码中也可经过识别号进行查找。

3、cmd

同步模块定义，是一个概念 

原则： 依赖就近原则

4、ES6

ES6 模块输出的是值的引用，输出接口动态绑定，而 CommonJS 输出的是值的拷贝

ES6 模块编译时执行，而 CommonJS 模块老是在运行时加载

 

附 AMD和CMD的区别

AMD 经过 require.js实现 
CMD 经过 sea.js实现

一、相同处

RequireJS 和 Sea.js 都是模块加载器，倡导模块化开发理念，核心价值是让 JavaScript 的模块化开发变得简单天然。

二、不一样之处

定位有差别。RequireJS 想成为浏览器端的模块加载器，同时也想成为 Rhino / Node 等环境的模块加载器。Sea.js 则专一于 Web 浏览器端，同时经过 Node 扩展的方式能够很方便跑在 Node 环境中。
遵循的规范不一样。RequireJS 遵循 AMD（异步模块定义）规范，Sea.js 遵循 CMD （通用模块定义）规范。规范的不一样，致使了二者 API 不一样。Sea.js 更贴近 CommonJS Modules/1.1 和 Node Modules 规范。

RequireJS 是依赖前置，Sea.js是依赖就近

RequireJS 是先加载后执行，seaJS是按需加载执行（amd2.0添加了按需加载的方法）

插件机制不一样。RequireJS 采起的是在源码中预留接口的形式，插件类型比较单一。Sea.js 采起的是通用事件机制，插件类型更丰富。