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

2021-11-02 14:28:13

原文地址

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

一、commonJS

1、内存情况

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

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

// 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秒后

2、执行情况

当使用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

二、AMD

1、官方定义

模块本身和模块之间的引用可以被异步的加载，是一个概念

先引入的模块，后使用的引用模块的方法，所以我们称之为依赖前置

2、AMD优点

包括异步的调用和本身的高扩展性，

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

三、cmd

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

原则：依赖就近原则

四、ES6

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

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

附 AMD和CMD的区别

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

1、相同处

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

2、不同之处

定位有差异。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 采取的是通用事件机制，插件类型更丰富。

码农公寓