簡述JavaScript模組化編程（二）
- 2019 年 10 月 3 日
- 筆記
前置閱讀：簡述JavaScript模組化（一）
在前面一文中，我們對前端模組化所經歷的三個階段進行了了解：
- CommonJs,由於是同步的，所以主要應用於伺服器端，以Node.js為代表。
- AMD，非同步模組定義，預載入，推薦依賴前置。以require.js為代表。
- CMD，通用模組載入，懶載入，推薦依賴就近。以Sea.js為代表。
而在ES6已經大行其道的今天，ES6中所提供的模組化的方法也自然而然成了我們進行JavaScript模組化編程的標準，因此ES6模組的語法雖然在一些較為老的瀏覽器上不能直出，需要進行轉譯，但卻代表著未來的JavaScript發展趨勢。
ES6模組特性
在ES6中將模組認為是自動運行在嚴格模式下並且沒有辦法退出運行的JavaScript程式碼。在一個模組中定義的變數不會自動被添加到全局共享的作用域之中，這個變數只能作用在這個作用域中。此外模組還必須導出一些外部文件可以訪問的元素，以供其他模組或程式碼使用。
除了這個基本特性，ES6模組還有兩大特性也十分重要，需要額外注意：
- 首先是在模組的頂部this值是undefined，這是由於在ES6中的模組的程式碼是在嚴格模式下執行的。（如果對this不是很熟悉的可以去看我的這篇文章：深入淺出this關鍵字）
- 其次，模組不支援HTML風格的程式碼注釋，這是早期瀏覽器所遺留下的JavaScript特性，在ES6的語法里不予支援。
基本用法-模組載入
首先我們來看瀏覽器是如何載入模組的。其實在ES6規範出來之前，web瀏覽器就規定了三種方式來引入JavaScript文件：
- 在沒有src屬性的<script>元素中直接內嵌JavaScript程式碼
- 在<script>元素中通過src屬性指定一個地址來載入JavaScript程式碼文件
- 通過Web Worker或Service Worker的方法載入並執行JavaScript程式碼
而在瀏覽器中，默認的行為就是將JavaScript作為腳本來進行載入，而非模組。所以我們要告訴瀏覽器我們載入的是模組，方法就是在<script>元素中，將type屬性指定為”module”。具體看下面的示例：
1 // 第一種方式 2 <script type=""module> 3 import { add } from "./example"; 4 let num = add(1, 1); 5 </script> 6 // 第二種方式 7 <script type="module" src="example.js"> 8 // 第三種方式，以腳本的方式載入example.js 9 let worker = new Worker("example.js");
當HTML解析器遇到<script>元素的type=”module”的時候，模組文件就開始下載，直到文件被完全解析完成才會去執行模組內的程式碼。模組文件是按照他們出現在HTML文件中順序執行的，也就是說無論用何種方式引入模組，第一個<script type=””module>總是在第二個<script type=””module>之前執行。
基本用法-導出
在ES6中我們可以使用export關鍵字將一部分程式碼暴露給其他模組，以供其他模組或程式碼使用。先讓我們來看看export關鍵字在MDN的定義吧：
export語句用於在創建JavaScript模組時，從模組中導出函數、對象或原始值，以便其他程式可以通過 import 語句使用它們。（
此特性目前僅在 Safari 和 Chrome 原生實現。它在許多轉換器中實現，如Traceur Compiler，Babel或Rollup。）
通過MDN的定義我們可以知道：export關鍵字可以將其放在任何函數、對象或原始值前面，從而將它們從模組中導出。示例如下：
1 // ./example.js 2 // 導出變數 3 export var a = 1; 4 // 導出函數 5 export function addA(value) { 6 return value + a; 7 } 8 //導出類 9 export class add1 { 10 constructor(value) { 11 this.value = value + a; 12 } 13 } 14 //這個函數就是這個模組所私有的，在外部不能訪問它 15 function say1() { 16 console.log('我是不是很帥'); 17 } 18 //這又是個函數 19 function say2() { 20 console.log('沒錯我就是很帥'); 21 } 22 //在後面對函數進行導出,它就不是私有的了 23 export say2;
需要注意的是：使用export導出的函數和類都需要一個名稱，除非使用default關鍵字，否則就不能用這個方法導出匿名函數或類。所以當我們需要導出匿名的函數或者類時，我們可以這麼做：
1 // ./example.js 2 //導出匿名函數 3 export default function(a, b) { 4 return a + b； 5 } 6 //或者導出匿名的類 7 export default class { 8 consturctor(value) { 9 this.value = value + 1; 10 } 11 }
具體關於default關鍵字的用法我會在後面做具體介紹，現在只需記住：當我們需要導出匿名的函數或者類時要使用export default語法。
基本語法-導入
在ES6中，從模組中導入的功能可以通過import關鍵字。import語句由兩部分組成：要導入元素的標識符和元素應當從哪個模組導入。
1 // ./say.js 2 import { say2 } from "./example.js"; 3 console.log(say2()); // '沒錯我就是很帥'
import 後面的大括弧中的say2表示從規定模組導入的元素的名稱。關鍵字from後面的字元串則表示要導入的模組的路徑，這通常是包含模組的.js文件的相對或絕對路徑名，需要注意的是只允許使用單引號和雙引號的字元串來包裹路徑，瀏覽器使用的路徑格式與傳給<script>元素的相同，所以必須把文件的擴展名也加上。
（註：由於Node.js遵循基於文件系統前綴以區分本地文件個包的慣例，即example是一個包，而./exampple.js是一個本地文件。為了更好的兼容多個瀏覽器Node.js環境，我們一定要在路徑前包含./或../來表示要導入的文件。）
除此之外，我們還可以導入多個元素或者直接導入整個模組：
1 // 導入多個元素 2 improt { a, addA, say2 } from "./example.js"; 3 console.log(a); // 1 4 sonsole.log(addA(1); // 2 5 6 // 導入整個模組 7 import * as example from "./example.js" 8 console.log(example.a); // 1 9 sonsole.log(example.addA(1); // 2 10 console.log(example.say2()); // '沒錯我就是很帥'
上面的導入整個模組就是把example.js中導出的所有元素全部載入到一個叫做example的對象中，而所導出的元素就會作為example的屬性被訪問。因為example對象是作為example.js中所導出成員的命名空間對象而被創建的，所以這種導入方式被稱為命名空間導入（name space import)。
還有一點要注意的是，不管import語句把一個模組寫了多少次，該模組只執行一次。意思就是，在首次執行導入模組後，實例化的模組就會被保存在記憶體中，只要使用import語句引用它就可以重複使用它：
1 // 首次導入需要載入模組example.js 2 import { a } from "./example.js" 3 // 下面的兩個import將無需載入example.js了 4 import { addA } from "./example.js" 5 import { say2 } from "./example.js"
當從模組中導入一個元素時，它與const是一樣無法定義另一個同名變數和導入一個同名元素，也無法在import語句前使用元素或者改變導出的元素的值：
1 //接上面的程式碼 2 3 say2 = 1 ; //會拋出一個錯誤
這是由於ES6的import語句為導入的元素創建的是只讀綁定的標識符，而不是原始綁定。因此元素只有在被導出的模組中才可以被修改，即使是將該模組的全部導入也無法修改其中的元素。
1 // ./example.js 2 // 這是一個函數 3 export function setA(newA) { 4 a = newA; 5 } 6 // ./say.js 7 import { a, setA } from "./example"; 8 console.log(a); // 1 9 a = 2; //拋出錯誤 10 11 // 所以我們得這麼做 12 setA(2); 13 console.log(a); // 2
調用setA(2)時會返回到example.js中去執行，將a設置為2。由於say.js導入的只是a的只讀綁定的標識符而已，因此會自動進行更改。
其他基本語法
1.語法限制
export和import在語法上還有一個重要的限制，那就是他們必須在條件語句和函數之外使用，例如：
1 if (ture) { 2 export var a = 1; //語法錯誤 3 } 4 function imp() { 5 import a from "./example.js"; //語法錯誤 6 }
由於模組語法存在的其中一個原因是讓JavaScript引擎可以靜態地確定哪些程式碼是可以導出的，因此export和import語句被設計成靜態的，不能進行任何形式的動態導出或導入。
2.重命名解決
有時在開發中，我們在導入一些元素後不想使用它們的原始名稱了，我們就可以在導出過程或者導入過程中去改變導出元素的名稱：
1 // 導出過程 2 function add(a, b) { 3 return a + b; 4 } 5 export { add as add1 }; //在導入過程中必須使用add1作為名稱 6 7 // 導入過程 8 import {add as add1 } from "./example" 9 console.log(add1(1,1)); // 2 10 console.log(typeof add); //undefined
3.模組的默認值
在CommonJS等其他的模組化規範中，從模組中導出或導入默認值是一個常見的用法，因此在ES6中也延用了這種用法並進行了優化。在ES6中我們可以使用default關鍵字來指定默認值，並且一個模組只能默認一個導出值：
1 // ./example.js 2 // 第一種默認導出語法 3 export default function(a, b) { 4 return a + b; 5 } 6 // 第二種默認導出語法 7 function add(a, b) { 8 return a + b; 9 } 10 export default add; 11 // 第三種默認導出語法 12 function add(a, b) { 13 return a + b; 14 } 15 export { add as default };
需要注意的是第三種語法，default關鍵字雖然不能作為元素的名稱，但可以作為元素的屬性名稱，因此可以使用as語法將add函數的屬性設置為default。
導入默認值的語法則是這樣的：
1 // 第一種語法 2 import add from "./example"; 3 // 第二種語法 4 import { default as add } from "./example";
看到這裡有些朋友可能會發現，我們的第一種語法中import關鍵字後面並沒有加大括弧，認為這是錯誤的。其實這是導入默認值的獨特語法，在這的本地名稱add用於表示模組導出的任何默認函數，這種語法是最純凈的，ES6標準創建團隊的大佬們也希望這種語法能成為web主流的模組導入形式。
我們前面說的導入匿名函數也同樣使用這種語法：
1 // ./example.js 2 //導出匿名函數 3 export default function(a, b) { 4 return a + b； 5 } 6 // ./say.js 7 import add from "./example"; 8 console.log(add(1,1)); // 2
在這裡本地名稱add就是用於表示上面的匿名函數的。
4.導出已導入的元素
我們同樣可以在本模組內導出我們在本模組內導入的元素，有以下幾種語法：
1 // 第一種語法 2 import { add } from ./example.js; 3 export { add }; 4 5 // 第二種語法 6 export { add } from ./example.js; 7 8 //換一個名稱導出 9 export { add as add1 } from ./example.js; //以add這個名稱導入，再以add1的名稱導出 10 11 // 導出整個模組 12 export * from ./example.js;
// 最後預祝自己8月份面試成功offer滿天飛-_-||
