認識模塊
JS 作為一名編程語言敌呈，一直以來沒有模塊的概念神妹。嚴重導(dǎo)致大型項目開發(fā)受阻，js 文件越寫越大磕仅，不方便維護珊豹。其他語言都有模塊的接口，比如 Ruby 的 require榕订，python 的 import店茶，C++ 天生的 #include，甚至 CSS 都有 @import劫恒。在 ES6 之前贩幻，有主要的2個模塊化方案：CommonJS 和 AMD轿腺。前者用于服務(wù)器，后者用于瀏覽器丛楚。CommonJS 這樣引入模塊：
let {stat, exists, readFile} = require('fs');
AMD 和 CommonJS 引入模塊方法差不多族壳，其代表是 require.js。這里我們主要研究 ES6 提供的方法：
import {stat, exists, readFile} from 'fs'
這個方法相比之前的方案趣些，具有以下優(yōu)點：
- 最大的優(yōu)點就是編譯的時候完成模塊加載仿荆，稱之為"編譯時加載", 而 CommonJS 使用的是 "運行時加載"。明顯 ES6 效率更高
- 不再需要 UMD 模塊格式坏平，未來服務(wù)器和瀏覽器一定都能支持這種方法
- 將來瀏覽器 API 可以用模塊的格式提供拢操，不需要做成全局變量或 navigator 的屬性
- 不需要反復(fù)的封裝和定義命名空間，直接以模塊形式提供即可
- 模塊默認工作在嚴格模式舶替，即使沒有指定"use strict", 關(guān)于嚴格模式可以看：嚴格模式特點
- 一個模塊就是一個文件庐冯，有效地減少了全局變量污染
export 和 import
模塊功能主要由2個命令組成：export 和 import。export 關(guān)鍵字用于規(guī)定模塊的對外接口坎穿，import 關(guān)鍵字用于輸入其他模塊提供的功能展父。這里需要知道的是，ES6 中模塊導(dǎo)出的都會構(gòu)成一個對象玲昧。
- export 導(dǎo)出模塊的部分方法屬性或類
export var a = 1;
export var b = 2;
export var c = 3;
上面導(dǎo)出了3個變量栖茉，和下面的下法等價：
var a = 1;
var b = 2;
var c = 3;
export {a, b, c}; //這種寫法更好，在文件結(jié)尾統(tǒng)一導(dǎo)出孵延，清晰明了
當(dāng)然還可以導(dǎo)出函數(shù)和類
//導(dǎo)出一個函數(shù) add
export function add(x,y){
return x + y;
}
//導(dǎo)出一個類
export default class Person{}
還可以在導(dǎo)出時候?qū)?shù)重命名：
function foo(){}
function bar(){}
export {foo, bar as bar2, bar as bar3} //bar 被重命名為 bar2,bar3輸出了2次
- import 導(dǎo)入命令可以導(dǎo)入其他模塊通過 export 導(dǎo)出的部分
// abc.js
var a = 1;
var b = 2;
var c = 3;
export {a, b, c}
//main.js
import {a, b, c} from './abc'; //接受的變量用大括號表示吕漂，以解構(gòu)賦值的形式獲取
console.log(a, b, c);
導(dǎo)入的時候也可以為變量重新取一個名字
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 提議，在簡化先輸入后輸出的寫法∪郑現(xiàn)在不能使用苍鲜，也不建議使用，可讀性不好
export a, b, c from './abc'
使用 import 和 export 需要注意一下幾個方面：
- export 必須寫在所在模塊作用于的頂層玷犹。如果寫在了內(nèi)部作用于會報錯
- export 輸出的值是動態(tài)綁定的混滔，綁定在其所在的模塊。
// 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 輸出內(nèi)容時，如果同時輸出多個變量巍扛，需要使用大括號{}领跛，同時 import 導(dǎo)入多個變量也需要大括號
- import 引入模塊的默認后綴是 .js, 所以寫的時候可以忽略 js 文件擴展名
- import 會執(zhí)行要所加載的模塊。如下寫法僅僅執(zhí)行一個模塊撤奸，不引入任何值
import './foo'; //執(zhí)行 foo.js 但不引入任何值
模塊整體加載
當(dāng)然模塊可以作為整體加載吠昭，使用*關(guān)鍵字喊括，并利用 as 重命名得到一個對象，所有獲得的 export 的函數(shù)怎诫、值和類都是該對象的方法：
// 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 關(guān)鍵字實現(xiàn)：
//暫時無法實現(xiàn)
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
本質(zhì)上偶洋，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 * 實現(xiàn)：
// circleplus.js
export * from 'circle'; //當(dāng)然，這里也可以選擇只繼承其部分接口趣斤，甚至可以對接口改名
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)
- 如果模塊默認輸出一個函數(shù)，函數(shù)名的首字母應(yīng)該小寫藤树；如果模塊默認輸出一個對象浴滴，對象名的首字母應(yīng)該大寫
ES6 模塊加載的實質(zhì)
ES6 模塊加載的機制是值的應(yīng)用，而 CommonJS 是值的拷貝岁钓。這意味著升略， ES6 模塊內(nèi)的值的變換會影響模塊外對應(yīng)的值微王，而 CommonJS 不會。 ES6 遇到 import 時不會立刻執(zhí)行這個模塊品嚣，只生成一個動態(tài)引用炕倘，需要用的時候再去里面找值。有點像 Unix 中的符號鏈接翰撑。所以說 ES6的模塊是動態(tài)引用罩旋，不會緩存值。之前的這個例子就可以說明問題：
// 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
循環(huán)加載
不知道你們只不知道循環(huán)引用眶诈，在 內(nèi)存管理與垃圾回收中提到過：如果 A 對象的一個屬性值是 B 對象涨醋，而 B 對象的一個屬性值是 A 對象，就會形成循環(huán)引用逝撬，無法釋放他們的內(nèi)存浴骂。而模塊中也會出現(xiàn)循環(huán)加載的情況：如果 A 模塊的執(zhí)行依賴 B 模塊，而 B 模塊的執(zhí)行依賴 A 模塊宪潮，就形成了一個循環(huán)加載溯警，結(jié)果程序不能工作，或者死機狡相。然而梯轻，這樣的關(guān)系很難避免，因為開發(fā)者眾多谣光，誰都會在開發(fā)自己的模塊時使用別人的幾個模塊檩淋，久而久之，就行互聯(lián)網(wǎng)一樣萄金，這樣的依賴也織成了一個網(wǎng)蟀悦。
ES6 和 CommonJS 處理循環(huán)加載又不一樣，從 CommonJS 開始研究
- CommonJS
CommonJS 每次執(zhí)行完一個模塊對應(yīng)的 js 文件后在內(nèi)存中就生成一個對象：
{
id: '...', //表示屬性的模塊名
exports: {...}; //模塊輸出的各個接口
loaded: true, //表示是否加載完畢
//...內(nèi)容很多氧敢，不一一列舉了
}
之后使用這個模塊日戈，即使在寫一遍 requrie，都不會再執(zhí)行對應(yīng) js 文件了孙乖，會直接在這個對象中取值浙炼。
CommonJS 如果遇到循環(huán)加載，就輸出已執(zhí)行的部分唯袄，之后的不再執(zhí)行弯屈，執(zhí)行順序以注釋序號為準(從0開始)：
// a.js
exports.done = false; //1. 先輸出 done
var b = require('./b.js'); //2. 進入 b.js 執(zhí)行 b.js //5. 發(fā)現(xiàn) a.js 沒執(zhí)行完，那就重復(fù)不執(zhí)行 a.js恋拷，返回已經(jīng)執(zhí)行的 exports
console.log(`In a.js, b.done = ${b.done}`); //10. 第2步的 b.js 執(zhí)行完了资厉，繼續(xù)執(zhí)行 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. 執(zhí)行到這里發(fā)生循環(huán)加載，去 a.js 執(zhí)行 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 執(zhí)行 a.js
var b = require("./b.js"); //13. b.js 已經(jīng)執(zhí)行過了蔬顾，直接去內(nèi)存中的對象取值
console.log(`In main宴偿，a.done = ${a.done}, b.done = ${b.done}`) //得到控制臺輸出：'In main湘捎，a.done = true, b.done = true'
- ES6
由于 ES6 使用的是動態(tài)引用，遇到 import 時不會執(zhí)行模塊窄刘。所以和 CommonJS 有本質(zhì)的區(qū)別窥妇。同樣我們看個例子：
// 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 形式是無法執(zhí)行的，應(yīng)為 a 輸出到 b 的接口為空(null), 所以在 b 中調(diào)用 foo() 要報錯的娩践。但是 ES6 可以執(zhí)行活翩，得到控制臺輸出"finished"
另一個例子是這樣的。執(zhí)行順序以注釋序號為準(從0開始)：
// even.js
import {odd} from './odd'; //2. 得到 odd.js 動態(tài)引用欺矫，但不執(zhí)行
export var counter = 0; //3. 輸出 counter 的引用
export function even(n){ //4. 輸出 even 函數(shù)的引用
counter++; //6
return n === 0 || odd(n - 1); //7. n 不是 0, 去 odd.js 找 odd() 函數(shù) //10. 執(zhí)行 odd 函數(shù)纱新，傳入9
}
// odd.js
import {even} from './even'; //8. 得到 even.js 動態(tài)引用，但不執(zhí)行
export function odd(n){ //9. 輸出 odd 函數(shù)
return n !== 0 && even(n - 1); //11. 回到第2步穆趴，找到 even 函數(shù)脸爱，回來執(zhí)行，傳入8未妹，直到 n 為 0 結(jié)束
}
// main.js
import * as m from './even'; //0. 得到 even.js 動態(tài)引用簿废，但不執(zhí)行
console.log(m.even(10)); //1. 去 even.js 找 even 函數(shù)。 //5. 執(zhí)行函數(shù)络它，傳入10 //最終得到控制臺輸出：true
console.log(m.counter); //由于 ES6 模塊傳值是動態(tài)綁定的(下同)族檬，所以得到控制臺輸出：6
console.log(m.even(20)); //分析同上，得到控制臺輸出：true
console.log(m.counter); //得到控制臺輸出：17
上面寫了11步化戳，之后是一個循環(huán)单料，沒有繼續(xù)寫。但不難看出 ES6 根本不怕循環(huán)引用点楼，只要模塊文件的動態(tài)引用在扫尖，就可以計算完成。不過掠廓，別看這個過程比 CommonJS 復(fù)雜换怖，每次都有重新運行模塊文件，而不直接讀取緩存蟀瞧，但 ES6 的這些工作在編譯期間就完成了沉颂，比 CommonJS 在運行時間處理模塊要效率更高，體驗更好悦污。
