4.學習 ES-module

這是我參與8月更文挑戰的第4天，活動詳情查看：8月更文挑戰

es module, ES Module的使用也很簡單，相關語法也不多，核心是import和export

全部主流瀏覽器都將支持 ES 模塊

1.模塊解決什麼問題？

用 JavaScript 編碼就是管理變量。這一切都是關於爲變量賦值，或爲變量添加數字，或將兩個變量組合在一塊兒並將它們放入另外一個變量中

let a = 1;
a += 2
複製代碼

因爲做用域在 JavaScript 中的工做方式，函數沒法訪問在其餘函數中定義的變量

若是您確實想在範圍以外共享變量怎麼辦？處理這個問題的一種常見方法是將它放在您上方的範圍內……例如，放在全局範圍內,但它們會致使一些煩人的問題。

首先，全部腳本標籤都須要按正確的順序排列。而後你必須當心確保沒有人把這個順序弄亂。

若是您確實弄亂了該順序，那麼在運行過程當中，您的應用程序將拋出錯誤

一旦您可以在模塊之間導出和導入變量，就能夠更輕鬆地將代碼分解爲能夠相互獨立工做的小塊。而後你能夠組合和從新組合這些塊，有點像樂高積木，從同一組模塊建立全部不一樣類型的應用程序。

2.模塊如何提供幫助？

模塊提供了一種更好的方式來組織這些變量和函數。使用模塊，能夠將有意義的變量和函數組合在一塊兒。

這將這些函數和變量放入模塊範圍。模塊做用域可用於在模塊中的函數之間共享變量

Module Instances

當使用模塊進行開發時，會構建一個依賴關係圖。不一樣依賴項之間的鏈接來自使用的任何導入語句

從入口文件開始，瀏覽器或者Node就沿着每一條"import"語句找到下面的代碼。

main.js

import { count } from './counter.js';
import { render } from './dispaly.js';
複製代碼

可是，瀏覽器卻使用不了這些文件。全部的文件都必需要轉變爲一系列被叫作「Module Records（模塊記錄）的數據結構，這樣瀏覽器才能明白這些文件的內容。

在這以後，module record須要被轉化爲「module instance（模快實例）」。一個module instance包含2種東西：code和state。

code就是一系列的操做指令，就像菜單同樣。可是，光有菜單，並不能做出菜，你還須要原材料。

而state就是原材料。State就是變量在每個特意時間點的值。固然，這些變量只是內存裏面一個個保存着值的小盒子的小名而已。

模塊實例的產生步驟

對於，ES Module來講，這須要經歷三個步驟：

• 1: 構建- 找到，下載全部的文件而且解析爲module records。
• 2: Instantiation（實例化）- 在內存裏找到全部的「盒子」，把全部導出的變量放進去（可是暫時還不求值）。而後，讓導出和導入都指向內存裏面的這些盒子。這叫作「linking(連接)」。
• 3: Evaluation（求值）- 執行代碼，獲得變量的值而後放到這些內存的「盒子」裏。

構建

對於每個模塊來講，構建階段，每一個模塊都會發生三件事:

• 1: 去哪裏下載包含模塊的文件（又叫「 module resolution（模塊識別）」）
• 2: 獲取文件（經過從一個URL下載或者從文件系統加載）
• 3: 把文件解析爲module record（模塊記錄）

1.查找文件並獲取它

加載程序將負責查找文件並下載它。首先它須要找到入口點文件。在 HTML 中，您可使用腳本標記告訴加載器在哪裏找到它。

<script src="main.js" type="module"></script>
複製代碼

解析

如今咱們已經獲取了這個文件，咱們須要把它解析成一個模塊記錄。這有助於瀏覽器瞭解模塊的不一樣部分是什麼。

建立模塊記錄後，將其放置在模塊映射中。這意味着不管什麼時候從如今開始請求它，加載器均可以從該地圖中提取它。

解析中有一個細節看似微不足道，但實際上卻有很大的影響。全部模塊都被解析，就好像它們"use strict"在頂部同樣

實例化

實例結合了代碼和狀態。該狀態存在於內存中，所以實例化步驟就是將事物鏈接到內存中。

首先，JS引擎建立一個模塊環境記錄。這管理模塊記錄的變量。而後它在內存中找到全部導出的框。模塊環境記錄將跟蹤內存中的哪一個框與每一個導出相關聯。

僅供學習參考

參考

• es-modules-a-cartoon-deep-dive/