>[success] # 執行過程 1. **ES Module**在**被JS引擎解析時**，開始構建，會根據，根據地址查找js文件，并且下載，將其解析成模塊記錄（Module Record），如下圖根據每個文件依賴導入依次去下載，然后每個下載模塊都有一個自己作用域的空間  2. 實例化（Instantiation），對模塊記錄進行實例化，并且分配內存空間，解析模塊的導入和導出語句，把模塊指向對應的內存地址  3. 運行（Evaluation），運行代碼，計算值，并且將值填充到內存地址中  >[success] # export 和 import 特點 1. **import 導入成員并不是復制一個副本**，而是直接導入模塊成員的引用地址，也就是說 import 得到的變量與** export 導入的變量在內存中是同一塊空間**。一旦模塊中成員修改了，這里也會**同時修改**  2. 導入模塊成員變量**是只讀的**，但是需要注意如果導入的是一個對象，對象的屬性讀寫不受影響 * index.js ~~~ import { name, age } from './module.js' console.log(name, age) // 導入成員并不是復制一個副本， // 而是直接導入模塊成員的引用地址， // 也就是說 import 得到的變量與 export 導入的變量在內存中是同一塊空間。 // 一旦模塊中成員修改了，這里也會同時修改， setTimeout(function () { console.log(name, age) }, 1500) // 導入模塊成員變量是只讀的 // name = 'tom' // 報錯 // 但是需要注意如果導入的是一個對象，對象的屬性讀寫不受影響 // name.xxx = 'xxx' // 正常 ~~~ * module.js ~~~ var name = 'jack' var age = 18 export { name, age } setTimeout(function () { name = 'ben' }, 1000) ~~~ [關于import.meta](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Statements/import.meta) >[success] # export 和 import ~~~ 1.一下只是一個小的總結，具體可以參考'周愛民'老師的文章 ~~~ [周愛民老師的文章](https://time.geekbang.org/column/article/166491) [mdn的文章](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Statements/export) >[danger]##### node 和 es6 導出的區別 * 引用周愛民老師文章中的內容 ~~~ 1. ECMAScript 6 模塊是靜態裝配的，而傳統的 Node.js 模塊卻是動態加載的。因而兩種模塊的實現效果 與處理邏輯都大相徑庭，Node.js 無法在短期內提供有效的手段幫助開發者將既有代碼遷移到新的模塊規范下 ~~~ >[danger] ##### 總結 * export 能導出什么 ~~~ 1.本質上 export 也就只能導出這六種聲明語法所聲明的標識符 ~~~ [關于六種聲明語法](http://www.hmoore.net/cyyspring/more/1292116) ~~~ 1.這里只是簡單總結：因此可以看到最常見的導出方式 // 導出“（聲明的）名字” export <let/const/var> x ...; export function x() ... export class x ... export {x, y, z, ...}; // 導出“（重命名的）名字” export { x as y, ...}; export { x as default, ... }; // 導出“（其它模塊的）名字” export ... from ...; 2.比較特別的default 可以看做： export default function() {} // 類似于如下代碼 //（但并不在當前模塊中聲明名字"default"） export var default = function() {} 3.這里運行機制簡單理解： 4.ESModule 根據 import 構建依賴樹，所以在代碼運行前名字就是已經存在于上下文， 然后在運行模塊最頂層代碼，給名字綁定值，就出現了‘變量提升’的效果。 ~~~