ES6 模块与 CommonJS 模块的差异

• CommonJS 模块输出的是一个值的拷贝，ES6 模块输出的是值的引用
  ○ CommonJS 模块一旦输出一个值，模块内部的变化就影响不到这个值。除非输出一个可以返回内部值的函数,才能得到内部变动后的值。
  ○ ES6 模块是动态引用，并且不会缓存值，模块里面的变量绑定其所在的模块。（JS 引擎对脚本静态分析的时候，遇到模块加载命令import，就会生成一个只读引用。等到脚本真正执行时，再根据这个只读引用，到被加载的那个模块里面去取值。原始值变了，import加载的值也会跟着变。）
• CommonJS 模块是运行时加载，ES6 模块是编译时输出接口
  ○ 因为 CommonJS 加载的是一个对象（即module.exports属性），该对象只有在脚本运行完才会生成。而 ES6 模块不是对象，它的对外接口只是一种静态定义，在代码静态解析阶段就会生成。
• CommonJS 模块的require()是同步加载模块，ES6 模块的import命令是异步加载，有一个独立的模块依赖的解析阶段

代码阅读

//commonJS
//./a.js
let count = 1;
setCount = () => {
count++;
}
setTimeout(() => {
console.log('a', count)
}, 1000);
module.exports = {
count,
setCount
}
//./b.js
const obj = require('./a.js');
obj.setCount();
console.log('b', obj.count)
setTimeout(() => {
console.log('b next', obj.count);
}, 2000);

输出是
b 1
a 2
b next 1

//es6 模块
//./a.js
let count = 1;
let setCount = () => {
count++;
}
setTimeout(() => {
console.log('a', count)
}, 1000);
export { count, setCount }
//./b.js
import * as obj from "./a.js";
obj.setCount();
console.log('b', obj.count)
setTimeout(() => {
console.log('b next', obj.count);
}, 2000);

b 2
a 2
b next 2

最后

以上就是激动小伙为你收集整理的module 和 commonJSES6 模块与 CommonJS 模块的差异代码阅读的全部内容，希望文章能够帮你解决module 和 commonJSES6 模块与 CommonJS 模块的差异代码阅读所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。