ES6模块和CommonJS模块的差异:
- CommonJS模块输出的是一个值的复制,ES6输出的是值的引用
- CommonJS模块是运行时加载,ES6模块是编译时输出接口
1. CommonJS模块输出的是一个值的复制,ES6输出的是值的引用
(1) CommonJS模块输出的是一个值的复制
也就是说,一旦输出一个值,模块内部的变化就影响不到这个值。
// test.js
var counter = 2;
function incCounter() {
counter++
}
module.exports = {
counter,
incCounter
}
// main.js
var mod = require('./components/test')
console.log(mod.counter); // 2
mod.incCounter()
console.log(mod.counter); // 2
(2) ES6输出的是值的引用
ES6模块运行机制——JS引擎对脚本静态分析的时候,遇到模块加载命令import就会生成一个只读引用。等到脚本真正执行时,再根据这个只读引用到被加载的模块中取值。
ES6模块是动态引用,并且不会缓存值,模块里面的变量绑定其所在的模块。
// test.js
export let counter = 2;
export function incCounter() {
counter++
}
// main.js
import { counter, incCounter } from './components/test'
console.log(counter); // 2
incCounter();
console.log(counter); // 3
2. CommonJS模块是运行时加载,ES6模块是编译时输出接口
CommonJS加载是一个对象,该对象只有在脚本运行结束时才会生成。
而ES6模块不是对象,它的对外接口只是一种静态定义,在代码静态解析阶段就会生成。