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

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

// 也就是說(shuō),一旦輸出一個(gè)值,模塊內(nèi)部的變化就影響不到這個(gè)值// 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,并未增加// 一個(gè)解決辦法就是將counter放在函數(shù)的返回值里面輸出 // lib.js var counter = 3; function incCounter(){counter++; } module.exports ={get counter() { return counter},incCounter: incCounter, }; // 注:get在獲取counter屬性時(shí)會(huì)執(zhí)行,返回counter的值.

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

// 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標(biāo)準(zhǔn)入門》(第3版)P477~P479

總結(jié)

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

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