原文地址
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 采取的是通用事件机制,插件类型更丰富。