ES6 Module的載入實現

瀏覽器載入

傳統方法：在html網頁中，瀏覽器通過

載入規則

瀏覽器載入es6模板，也是使用網頁中插入乙個模組foo.js，由於type屬性設為module，所以瀏覽器知道這是乙個 es6 模組。

瀏覽器對於帶有type="module"的es6模組允許內嵌在網頁中，語法行為與載入外部指令碼一致；

外部的模組指令碼（foo.js）,有幾點需要注意:

(1) **是在模組作用域之中執行，而不是在全域性作用域執行，模組內部的頂層變數，外部不可見。

(2) 模組之中，可以使用import命令載入其他模組（.js字尾不可省略，也可以使用export命令輸出對外介面）

(3)模組之中，頂層的this關鍵字返回undefined，而不是指向window，也就是說：在模組頂層使用this關鍵字是無意義的；

(4)同乙個模組如果載入多次只執行一次；

//例項模組
import utils from "";
const x =1;
console.log(x ===window)// false
console.log(this === undefined) //true
delete x ;//語法錯誤，不能刪除x

利用頂層的this等於undefined這個語法點，可以偵測當前**是否在 es6 模組之中。

const isnotmodulescript = this !== undefined;

es6模組與commonjs模組的差異

（1）commonjs模組輸出的是乙個值的拷貝，es6模組輸出得失值的引用；

（2）commonjs模組是執行時載入，es6模組是編譯時輸出介面。

commonjs模組輸出的是值的拷貝，也就是說一旦輸出乙個值，模組內部的變化就影響不到這個值；


var counter = 3;
function incounter ()
module.exports = ;
//在main.js裡面載入這個模組
var mod = require(".lib");
console.log(mod.counter);//3
mod.incounter();
console.log(mod.counter);//3

lib.js模組載入以後，他的內部變化就影響不到輸出的mod.counter了，這是因為mod.counter是乙個元素型別的值；

es6模組的執行機制與commonjs不一樣，js引擎對指令碼靜態分析的時候，遇到模組載入命令import，就會生成乙個唯讀引用。等到指令碼真正執行時，再根據這個唯讀引用，到被載入的那個模組裡面去取值。原始值變了，import載入的值也會跟著變。因此，es6 模組是動態引用，並且不會快取值，模組裡面的變數繫結其所在的模組。


export let counter = 3;
export function incounter () 
import  from "./lib";
console.log(counter);//3
incounter();
console.log(counter);//4

es6 模組輸入的變數counter是活的，完全反應其所在模組lib.js內部的變化。

內部變數

es6 模組應該是通用的，同乙個模組不用修改，就可以用在瀏覽器環境和伺服器環境。為了達到這個目標，node 規定 es6 模組之中不能使用 commonjs 模組的特有的一些內部變數。

首先，就是this關鍵字。es6 模組之中，頂層的this指向undefined；commonjs 模組的頂層this指向當前模組，這是兩者的乙個重大差異。

其次，以下這些頂層變數在 es6 模組之中都是不存在的。

arguments

require

module

exports

filename

dirname

commonjs模組的載入原理

commonjs的乙個模組，就是乙個指令碼檔案，require命令第一次載入該指令碼，就會執行這個指令碼，然後在記憶體生成乙個物件。

,
loaded:true,
...}

node內部載入模組後生成的乙個物件，該物件的id屬性是模組名，exports屬性是模組輸出的各個介面，loaded屬性是乙個布林值，表示該模板的指令碼是否執行完畢，等等屬性;

以後需要用到這個模組的時候就會到export屬性上面取值，即使再次執行require命令，也不會再次執行該模組，而是到快取之中取值，也就是說：commonjs模組無論載入多少次，只在第一次載入時執行一次，以後再載入，就返回第一次執行的結果；

備註：es6模組：每乙個模組只載入一次，每乙個js只執行一次，如果下次再去載入同目錄下同檔案，直接從記憶體中讀取。

備註：模組化的好處主要是兩點：

1. 避免全域性變數汙染

2. 有效的處理依賴關係

ES6 Module的載入實現

學習記錄 ES6 module

ES6 Module 多種用法

帶你了解ES6 Module

ES6 Module的載入實現

學習記錄 ES6 module

ES6 Module 多種用法

帶你了解ES6 Module

相關推薦