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

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

// 也就是說,一旦輸出一個值,模塊內部的變化就影響不到這個值// 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// 注:可以看到,雖然執行了incCounter() ,即:counter++, 但是打印出counter的值還是3,并未增加// 一個解決辦法就是將counter放在函數的返回值里面輸出 // lib.js var counter = 3; function incCounter(){counter++; } module.exports ={get counter() { return counter},incCounter: incCounter, }; // 注:get在獲取counter屬性時會執行,返回counter的值.

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

// 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

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。