簡述JavaScript模組化編程(二)

  • 2019 年 10 月 3 日
  • 筆記

前置閱讀:簡述JavaScript模組化(一)

在前面一文中,我們對前端模組化所經歷的三個階段進行了了解:

  1. CommonJs,由於是同步的,所以主要應用於伺服器端,以Node.js為代表。
  2. AMD,非同步模組定義,預載入,推薦依賴前置。以require.js為代表。
  3. 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滿天飛-_-||