ES6模块和CommonJS模块的差异

160 阅读1分钟

ES6模块和CommonJS模块的差异:

  1. CommonJS模块输出的是一个值的复制,ES6输出的是值的引用
  2. 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模块不是对象,它的对外接口只是一种静态定义,在代码静态解析阶段就会生成。