深度扫盲JavaScript的模块化(AMD , CMD , CommonJs 和 ES6)

时间:2024-10-27 20:07:44

原文地址

https://blog.****.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 采取的是通用事件机制,插件类型更丰富。