Javascript模組化開發基礎

認識模組

JS 作為一名程式語言，一直以來沒有模組的概念。嚴重導致大型專案開發受阻，js 檔案越寫越大，不方便維護。其他語言都有模組的介面，比如 Ruby 的 require，python 的 import，C++ 天生的 #include，甚至 CSS 都有 @import。在 ES6 之前，有主要的2個模組化方案：CommonJS 和 AMD。前者用於伺服器，後者用於瀏覽器。CommonJS 這樣引入模組：

let {stat, exists, readFile} = require('fs');

AMD 和 CommonJS 引入模組方法差不多，其代表是 require.js。這裡我們主要研究 ES6 提供的方法：

import {stat, exists, readFile} from 'fs'

這個方法相比之前的方案，具有以下優點：

• 最大的優點就是編譯的時候完成模組載入，稱之為"編譯時載入", 而 CommonJS 使用的是 "執行時載入"。明顯 ES6 效率更高
• 不再需要 UMD 模組格式，未來伺服器和瀏覽器一定都能支援這種方法
• 將來瀏覽器 API 可以用模組的格式提供，不需要做成全域性變數或 navigator 的屬性
• 不需要反覆的封裝和定義名稱空間，直接以模組形式提供即可
• 模組預設工作在嚴格模式，即使沒有指定"use strict", 關於嚴格模式可以看：嚴格模式特點
• 一個模組就是一個檔案，有效地減少了全域性變數汙染

export 和 import

模組功能主要由2個命令組成：export 和 import。export 關鍵字用於規定模組的對外介面，import 關鍵字用於輸入其他模組提供的功能。這裡需要知道的是，ES6 中模組匯出的都會構成一個物件。

• export 匯出模組的部分方法屬性或類

export var a = 1;
export var b = 2;
export var c = 3;

上面匯出了3個變數，和下面的下法等價：

var a = 1;
var b = 2;
var c = 3;
export {a, b, c};    //這種寫法更好，在檔案結尾統一匯出，清晰明瞭

當然還可以匯出函式和類

//匯出一個函式 add
export function add(x,y){
  return x + y;
}
//匯出一個類
export default class Person{}

還可以在匯出時候對引數重新命名：

function foo(){}
function bar(){}

export {foo, bar as bar2, bar as bar3}     //bar 被重新命名為 bar2,bar3輸出了2次

• import 匯入命令可以匯入其他模組通過 export 匯出的部分

// abc.js
var a = 1;
var b = 2;
var c = 3;
export {a, b, c}

//main.js
import {a, b, c} from './abc';      //接受的變數用大括號表示，以解構賦值的形式獲取
console.log(a, b, c);

匯入的時候也可以為變數重新取一個名字

import {a as aa, b, c};
console.log(aa, b, c)

如果想在一個模組中先輸入後輸出同一個模組，import語句可以和export語句寫在一起。

// 正常寫法
import {a, b, c} form './abc';
export {a, b, c}

// 使用簡寫, 可讀性不好，不建議
export {a, b, c} from './abc';

//ES7 提議，在簡化先輸入後輸出的寫法。現在不能使用，也不建議使用，可讀性不好
export a, b, c from './abc'

使用 import 和 export 需要注意一下幾個方面：

• export 必須寫在所在模組作用於的頂層。如果寫在了內部作用於會報錯
• export 輸出的值是動態繫結的，繫結在其所在的模組。

// foo.js
export var foo = 'foo';

setTimeout(function() {
  foo = 'foo2';
}, 500);

// main.js
import * as m from './foo';
console.log(m.foo); // foo
setTimeout(() => console.log(m.foo), 500); //foo2            500ms 後同樣會被修改

• import 具有宣告提升，而且會提升到整個檔案最上面
• import 獲得的變數都是隻讀的，修改它們會報錯
• 在 export 輸出內容時，如果同時輸出多個變數，需要使用大括號{}，同時 import 匯入多個變數也需要大括號
• import 引入模組的預設字尾是 .js, 所以寫的時候可以忽略 js 副檔名
• import 會執行要所載入的模組。如下寫法僅僅執行一個模組，不引入任何值

import './foo';    //執行 foo.js 但不引入任何值

模組整體載入

當然模組可以作為整體載入，使用*關鍵字，並利用 as 重新命名得到一個物件，所有獲得的 export 的函式、值和類都是該物件的方法：

// abc.js
export var a = 1;
export var b = 2;
export var c = 3;

// main.js
import * as abc from './abc';
console.log(abc.a, abc.b, abc.c);

上面 main.js 中的整體載入可以用 module 關鍵字實現：

//暫時無法實現
module abc from './abc';
console.log(abc.a, abc.b, abc.c);   //1 2 3

注意，以上2種方式獲得的介面，不包括 export default 定義的預設介面。

export default

為了使模組的使用者可以不看文件，或者少看文件，輸出模組的時候利用 export default 指定預設輸出的介面。使用 export defalut 輸出時，不需要大括號，而 import 輸入變數時，也不需要大括號(沒有大括號即表示獲得預設輸出)

// abc.js
var a = 1, b = 2, c = 3;
export {a, b};
export default c;     //等價於 export default 3;

// main.js
import {a, b} from './abc';
import num from './abc';        // 不需要大括號, 而且可以直接改名(如果必須用原名不還得看手冊麼?)
console.log(a, b, num)            // 1 2 3

本質上，export default輸出的是一個叫做default的變數或方法，輸入這個default變數時不需要大括號。

// abc.js
var a = 20;
export {a as default};

// main.js
import a from './abc'; // 這樣也是可以的
console.log(a);        // 20

// 這樣也是可以的
import {default as aa} from './abc';
console.log(aa);       // 20

如果需要同時輸入預設方法和其他變數可以這樣寫 import:

import customNameAsDefaultExport, {otherMethod}, from './export-default';

這裡需要注意：一個模組只能有一個預設輸出，所以 export default 只能用一次

模組的繼承

所謂模組的繼承，就是一個模組 B 輸出了模組 A 全部的介面，就彷彿是 B 繼承了 A。利用 export * 實現：

// circleplus.js
export * from 'circle';            //當然，這裡也可以選擇只繼承其部分介面，甚至可以對介面改名
export var e = 2.71828182846;
export default function(x){        //重新定義了預設輸出，如果不想重新定義可以：export customNameAsDefaultExport from 'circle';
  return Math.exp(x);
}

//main.js
import * from 'circleplus';        //載入全部介面
import exp from 'circleplus';      //載入預設介面
//...use module here

上面這個例子 circleplus 繼承了 circle。值得一提的是，export * 不會再次輸出 circle 中的預設輸出(export default)。

在使用和定義模組時，希望可以做到以下幾個建議：

• Module 語法是 JavaScript 模組的標準寫法，堅持使用這種寫法。使用 import 取代 require, 使用 export 取代module.exports
• 如果模組只有一個輸出值，就使用 export default，如果模組有多個輸出值，就不使用 export default
• 儘量不要 export default 與普通的 export 同時使用
• 不要在模組輸入中使用萬用字元。因為這樣可以確保你的模組之中，有一個預設輸出(export default)
• 如果模組預設輸出一個函式，函式名的首字母應該小寫；如果模組預設輸出一個物件，物件名的首字母應該大寫

ES6 模組載入的實質

ES6 模組載入的機制是值的應用，而 CommonJS 是值的拷貝。這意味著， ES6 模組內的值的變換會影響模組外對應的值，而 CommonJS 不會。 ES6 遇到 import 時不會立刻執行這個模組，只生成一個動態引用，需要用的時候再去裡面找值。有點像 Unix 中的符號連結。所以說 ES6的模組是動態引用，不會快取值。之前的這個例子就可以說明問題：

// foo.js
export let counter = 3;
export function inc(){
  counter++;
}

// main.js
import {counter, inc} from './foo';
console.log(counter);    //3
inc();
console.log(counter);    //4

我們看一個 CommonJS 的情況

// foo.js
let counter = 3;
function inc(){
  counter++;
}
module.exports = {
  counter: counter,
  inc: inc
}

// main.js
let foo = require('./foo')
let counter = foo.counter;
let inc = foo.inc;

console.log(counter);    //3
inc();
console.log(counter);    //3

迴圈載入

不知道你們只不知道迴圈引用，在 JS記憶體管理與垃圾回收中提到過：如果 A 物件的一個屬性值是 B 物件，而 B 物件的一個屬性值是 A 物件，就會形成迴圈引用，無法釋放他們的記憶體。而模組中也會出現迴圈載入的情況：如果 A 模組的執行依賴 B 模組，而 B 模組的執行依賴 A 模組，就形成了一個迴圈載入，結果程式不能工作，或者當機。然而，這樣的關係很難避免，因為開發者眾多，誰都會在開發自己的模組時使用別人的幾個模組，久而久之，就行網際網路一樣，這樣的依賴也織成了一個網。

ES6 和 CommonJS 處理迴圈載入又不一樣，從 CommonJS 開始研究

• CommonJS
  CommonJS 每次執行完一個模組對應的 js 檔案後在記憶體中就生成一個物件：

{
  id: '...',           //表示屬性的模組名
  exports: {...};      //模組輸出的各個介面
  loaded: true,        //表示是否載入完畢
  //...內容很多，不一一列舉了
}

之後使用這個模組，即使在寫一遍 requrie，都不會再執行對應 js 檔案了，會直接在這個物件中取值。
CommonJS 如果遇到迴圈載入，就輸出已執行的部分，之後的不再執行，執行順序以註釋序號為準(從0開始)：

// a.js
exports.done = false;         //1. 先輸出 done
var b = require('./b.js');    //2. 進入 b.js 執行 b.js    //5. 發現 a.js 沒執行完，那就重複不執行 a.js，返回已經執行的 exports
console.log(`In a.js, b.done = ${b.done}`);     //10. 第2步的 b.js 執行完了，繼續執行 a.js 得到控制檯輸出：'In a.js, b.done = true'
exports.done = true;          //11
console.log('a.js executed');  //12. 得到控制檯輸出："a.js executed"

// b.js
exports.done = false;         //3. 先輸出 done
var a = require('./a.js');    //4. 執行到這裡發生迴圈載入，去 a.js 執行 a.js     //6. 只得到了 a.js 中的 done 為 false
console.log(`In b.js, a.done = ${a.done}`);       //7. 得到控制檯輸出："In b.js, a.done = false"
exports.done = true;     //8. 輸出 done, 覆蓋了第3步的輸出
console.log('b.js executed');     //9. 得到控制檯輸出："b.js executed"

//main.js
var a = require("./a.js");    //0. 去 a.js 執行 a.js
var b = require("./b.js");    //13. b.js 已經執行過了，直接去記憶體中的物件取值
console.log(`In main，a.done = ${a.done}, b.done = ${b.done}`)    //得到控制檯輸出：'In main，a.done = true, b.done = true'

• ES6
  由於 ES6 使用的是動態引用，遇到 import 時不會執行模組。所以和 CommonJS 有本質的區別。同樣我們看個例子：

// a.js
import {bar} from './b.js';
export function foo(){
  bar();
  console.log("finished")
}

// b.js
import {foo} from './a.js';
export function bar(){
  foo();
}

//main.js
import * from './a.js';
import * from './b.js';
//...

上面這段程式碼寫成 CommonJS 形式是無法執行的，應為 a 輸出到 b 的介面為空(null), 所以在 b 中呼叫 foo() 要報錯的。但是 ES6 可以執行，得到控制檯輸出"finished"

另一個例子是這樣的。執行順序以註釋序號為準(從0開始)：

// even.js
import {odd} from './odd';         //2. 得到 odd.js 動態引用，但不執行
export var counter = 0;            //3. 輸出 counter 的引用
export function even(n){           //4. 輸出 even 函式的引用
  counter++;                       //6
  return n === 0 || odd(n - 1);    //7. n 不是 0, 去 odd.js 找 odd() 函式    //10. 執行 odd 函式，傳入9
}

// odd.js
import {even} from './even';       //8. 得到 even.js 動態引用，但不執行
export function odd(n){            //9. 輸出 odd 函式
  return n !== 0 && even(n - 1);   //11. 回到第2步，找到 even 函式，回來執行，傳入8，直到 n 為 0 結束
}

// main.js
import * as m from './even';    //0. 得到 even.js 動態引用，但不執行
console.log(m.even(10));     //1. 去 even.js 找 even 函式。 //5. 執行函式，傳入10   //最終得到控制檯輸出：true
console.log(m.counter);      //由於 ES6 模組傳值是動態繫結的(下同)，所以得到控制檯輸出：6
console.log(m.even(20));     //分析同上，得到控制檯輸出：true
console.log(m.counter);      //得到控制檯輸出：17

上面寫了11步，之後是一個迴圈，沒有繼續寫。但不難看出 ES6 根本不怕迴圈引用，只要模組檔案的動態引用在，就可以計算完成。不過，別看這個過程比 CommonJS 複雜，每次都有重新執行模組檔案，而不直接讀取快取，但 ES6 的這些工作在編譯期間就完成了，比 CommonJS 在執行時間處理模組要效率更高，體驗更好。