• CommonJS模塊是運行時加載,ES6模塊是編譯時輸出接口
  是因為CommonJS加載的是一個對象(module.exports屬性),該對象只有在腳本運行結(jié)束時才會生成.而ES6模塊不是對象,它的對外接口只是一種靜態(tài)定義,在代碼靜態(tài)解析階段就會生成.

• CommonJS模塊輸出的是一個值的復(fù)制，ES6模塊輸出的是值得引用

// 也就是說,一旦輸出一個值,模塊內(nèi)部的變化就影響不到這個值// lib.js var counter = 3; function incCounter() {counter++; } module.exports = {conuter: counter,incCounter: incCounter, };// main.js var mod = require('./lib');console.log(mod.counter); // 3 mod.incCounter(); console.log(mod.counter); // 3// 注:可以看到,雖然執(zhí)行了incCounter() ,即:counter++, 但是打印出counter的值還是3,并未增加// 一個解決辦法就是將counter放在函數(shù)的返回值里面輸出 // lib.js var counter = 3; function incCounter(){counter++; } module.exports ={get counter() { return counter},incCounter: incCounter, }; // 注:get在獲取counter屬性時會執(zhí)行,返回counter的值.

ES6模塊的運行機制:JS引擎對腳本靜態(tài)分析的時候,遇到模塊加載命令import就會生成一個只讀引用。等到真正執(zhí)行時,再根據(jù)這個只讀引用到被加載的模塊中取值。因此,ES6模塊是動態(tài)引用,并且不會緩存值,模塊里面的變量綁定其所在的模塊.

// lib.js export let counter = 3; export function incCounter() {counter++; }// main.js import { counter, incCounter } from './lib'; console.log(counter); // 3 incCounter(); console.log(counter); // 4

參考《ES6標準入門》(第3版)P477~P479

總結(jié)

以上是生活随笔為你收集整理的javascript --- ES6模块与CommonJS模块的差异的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。