摘要：命令用于規(guī)定本模塊的對外接口?？崭衲K名字符串。其他模塊加載該模塊時，命令可以為該匿名函數(shù)指定任意名字。寫法函數(shù)聲明命令用在非匿名函數(shù)前，也是可以的。加載的時候，視同匿名函數(shù)加載。

本文字符數(shù)8200+，閱讀時間約16分鐘。

『ES6知識點總結(jié)』模塊Module

【01】過去使用CommonJS和AMD，前者用于服務(wù)器，后者用于瀏覽器。

Module可以取代CommonJS和AMD規(guī)范，成為瀏覽器和服務(wù)器通用的模塊解決方案。

【02】運行時加載和編譯時加載

ES6模塊的設(shè)計思想，是盡量的靜態(tài)化，在編譯時就能確定模塊的依賴關(guān)系，以及輸入和輸出的變量。

CommonJS和AMD模塊，都只能在運行時確定這些東西。比如，CommonJS模塊就是對象，輸入時必須查找對象屬性。

這種加載稱為“運行時加載”。

整體加載fs模塊（即加載fs的所有方法），然后使用時用到3個方法。

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

ES6模塊不是對象，而是通過export和import命令顯式指定輸出和輸入的代碼。

這種加載稱為“編譯時加載”，即ES6可以在編譯時就完成模塊編譯，效率要比CommonJS模塊的加載方式高。

實質(zhì)是從fs模塊加載3個方法，其他方法不加載。

import { stat, exists, readFile } from "fs";

【03】（+僅了解）好處：

01、不再需要UMD模塊格式了，將來服務(wù)器和瀏覽器都會支持ES6模塊格式。目前，通過各種工具庫，其實已經(jīng)做到了這一點。
02、將來瀏覽器的新API就能用模塊格式提供，不再必要做成全局變量或者navigator對象的屬性。
不再需要對象作為命名空間（比如Math對象），未來這些功能可以通過模塊提供。

【04】ES6的模塊自動采用嚴(yán)格模式，不管有沒有在模塊頭部加上"use strict"。

【01】模塊功能由兩個命令構(gòu)成：export和import。

export命令用于規(guī)定本模塊的對外接口。

import命令用于引入其他模塊的功能。

【02】一個模塊就是一個的文件。

該文件內(nèi)部的所有變量，外部無法獲取。

如果希望外部能夠讀取模塊內(nèi)部的某個變量，就必須使用export關(guān)鍵字輸出該變量。

【03】export可以輸出變量、函數(shù)、類。

可以使用多個export。

可以export+變量聲明賦值一起輸出。

可以輸出用逗號分隔的變量集合，用花括號括起來。

可以export+函數(shù)聲明一起輸出。

寫法1：

// profile.js
export var firstName = "Michael";
export var lastName = "Jackson";
export var year = 1958;

寫法2：（推薦使用）

// profile.js
var firstName = "Michael";var lastName = "Jackson";var year = 1958;

export {firstName, lastName, year};

寫法3：

export function multiply (x, y) {return x * y;};

【03】可以使用as關(guān)鍵字重命名輸出的變量。甚至可以給一個變量取多個名字。

v1 as newName,v1 as newName2

function v1() { ... }function v2() { ... }

export {
  v1 as streamV1,
  v2 as streamV2,
  v2 as streamLatestVersion
};

【04】export命令可以出現(xiàn)在模塊的任何位置，只要處于模塊最外層（非某個塊級作用域中）就可以。

如果處于塊級作用域內(nèi)，就會報錯。

import命令也是如此。

function foo () {
  export default "bar" // SyntaxError
}
foo()

【05】export語句輸出的值是動態(tài)綁定，綁定其所在的模塊。

代碼輸出變量foo，值為bar，500毫秒之后變成baz。

export var foo = "bar";
setTimeout(() => foo = "baz", 500);

【06】模塊之間也可以繼承。

export * from "fileName"

假設(shè)有一個circleplus塊，繼承了circle模塊。

export *命令會忽略circle模塊的default方法。

// circleplus.js

export * from "circle";
export var e = 2.71828182846;
export default function(x) {return Math.exp(x);}

【01】通過import命令加載模塊（文件）。

【02】import命令接受用逗號分隔的要從其他模塊導(dǎo)入的變量列表，用花括號括起來。

變量名必須與被導(dǎo)入模塊的輸出的名稱相同。

import {item1,item2} from "fileUrl";

// main.js

import {firstName, lastName, year} from "./profile";function setName(element) {
  element.textContent = firstName + " " + lastName;}

【03】使用as關(guān)鍵字，將引用變量重命名。

import { lastName as surname } from "./profile";

【04】import命令具有提升效果，會提升到整個模塊的頭部，首先執(zhí)行。

foo();

import { foo } from "my_module";//不會報錯。

【05】如果在一個模塊之中，先輸入后輸出同一個模塊，import語句可以與export語句寫在一起。

但是從可讀性考慮，不建議采用這種寫法，而應(yīng)該采用標(biāo)準(zhǔn)寫法。

export { es6 as default } from "./someModule";
// 等同于
import { es6 } from "./someModule";
export default es6;

【06】另外，ES7有一個提案，簡化先輸入后輸出的寫法，拿掉輸出時的大括號。

// 提案的寫法
export v from "mod";
// 現(xiàn)行的寫法
export {v} from "mod";

【07】import語句會執(zhí)行加載的模塊。

僅僅執(zhí)行l(wèi)odash模塊，但是不輸入任何值。

import+空格+模塊名字符串。

import "lodash"

【08】整體加載

用星號（*）指代為一個對象，所有的引用值都加載在這個對象上面。

import+*+as+新變量名+from+模塊地址字符串。

// circle.js

export function area(radius) {return Math.PI * radius * radius;}
export function circumference(radius) {return 2 * Math.PI * radius;}

單一加載：

// main.js

import { area, circumference } from "./circle";

console.log("圓面積:" + area(4));
console.log("圓周長:" + circumference(14));

整體加載：

import * as circle from "./circle";

console.log("圓面積:" + circle.area(4));
console.log("圓周長:" + circle.circumference(14));

【09】module命令

module命令可以取代import命令，達(dá)到整體引用模塊的作用。

module命令后面跟一個變量，表示輸入的模塊定義在該變量上。

module +變量名+from+模塊地址字符串

// main.js

module circle from "./circle";

console.log("圓面積:" + circle.area(4));
console.log("圓周長:" + circle.circumference(14));

【01】使用import命令的時候，用戶需要知道所要加載的變量名或函數(shù)名，否則無法加載。

但是，用戶肯定希望快速上手，未必愿意閱讀文檔，去了解模塊有哪些屬性和方法。

（zyx456：好像并不需要，直接整體加載就是了。）

【02】使用export default命令，為模塊指定默認(rèn)輸出。

一個模塊只能有一個默認(rèn)輸出，因此export deault命令只能使用一次。

所以，import命令后面才不用加大括號，因為只可能對應(yīng)一個方法。

寫法1：

export default 匿名函數(shù)。

其他模塊加載該模塊時，import命令可以為該匿名函數(shù)指定任意名字。

這時就不需要知道原模塊輸出的函數(shù)名。

這時import命令后面，不使用大括號。

// export-default.js
export default function () {  console.log("foo");}
// import-default.js
import customName from "./export-default";customName(); // "foo" 

寫法2：

export default 函數(shù)聲明

export default命令用在非匿名函數(shù)前，也是可以的。函數(shù)的函數(shù)名，在模塊外部是無效的。加載的時候，視同匿名函數(shù)加載。

// export-default.js
export default function foo() {  console.log("foo");}
// 或者寫成
function foo() {  console.log("foo");}

export default foo;

寫法3：

export default value

如果要輸出默認(rèn)的值，只需將值跟在export default之后即可。

export default 42; 寫法4：

export default也可以用來輸出類。

// MyClass.js
export default class { ... }
// main.js
import MyClass from "MyClass"let o = new MyClass();

【04】下面比較一下默認(rèn)輸出和正常輸出。

// 輸出
export default function crc32() { // ...}
// 輸入
import crc32 from "crc32";
// 輸出
export function crc32() { // ...};
// 輸入
import {crc32} from "crc32";

【05】本質(zhì)上，export default就是輸出一個叫做default的變量或方法，然后系統(tǒng)允許你為它取任意名字。

所以，下面的寫法是有效的。

// modules.js
function add(x, y) {return x * y;};
export {add as default};
// app.js
import { default as xxx } from "modules";

【06】如果想在一條import語句中，同時輸入默認(rèn)方法和其他變量。

import customName, { otherMethod } from "./export-default";

【】例子：

import $ from "jquery";

【01】Moduel模塊加載的機(jī)制，與CommonJS模塊完全不同。

CommonJS模塊輸出的是一個值的拷貝，而Module模塊輸出的是值的引用。

CommonJS模塊輸入的是被輸出值的拷貝，也就是說，一旦輸出一個值，模塊內(nèi)部的變化就影響不到這個值。

例子。

下面是一個模塊文件lib.js。

// lib.js
var counter = 3;function incCounter() {  counter++;}
module.exports = {
  counter: counter,
  incCounter: incCounter,};

加載上面的模塊。

counter輸出以后，lib.js模塊內(nèi)部的變化就影響不到counter了。

// main.js
var counter = require("./lib").counter;var incCounter = require("./lib").incCounter;

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

ES6模塊的運行機(jī)制與CommonJS不一樣，它遇到模塊加載命令import時，不會去執(zhí)行模塊，而是只生成一個動態(tài)的只讀引用。

等到真的需要用到時，再到模塊里面去取值，換句話說，ES6的輸入有點像Unix系統(tǒng)的”符號連接“，原始值變了，輸入值也會跟著變。

因此，ES6模塊是動態(tài)引用，并且不會緩存值，模塊里面的變量綁定其所在的模塊。

還是舉上面的例子。

// lib.js
export let counter = 3;
export function incCounter() {  counter++;}
// main1.js
import { counter, incCounter } from "./lib";
console.log(counter); // 3
incCounter();
console.log(counter); // 4

【】由于ES6輸入的模塊變量，只是一個”符號連接“，所以這個變量是只讀的，對它重新賦值會報錯。

因為變量obj指向的地址是只讀的，不能重新賦值，這就好比main.js創(chuàng)造了一個名為obj的const變量。

// lib.js
export let obj = {};
// main.js
import { obj } from "./lib";

obj.prop = 123; // OK
obj = {}; // TypeError

【01】“循環(huán)加載”（circular dependency）指的是，a腳本的執(zhí)行依賴b腳本，而b腳本的執(zhí)行又依賴a腳本。

通常，“循環(huán)加載”表示存在強(qiáng)耦合，如果處理不好，還可能導(dǎo)致遞歸加載，使得程序無法執(zhí)行，因此應(yīng)該避免出現(xiàn)。

但是實際上，這是很難避免的，尤其是依賴關(guān)系復(fù)雜的大項目，很容易出現(xiàn)a依賴b，b依賴c，c又依賴a這樣的情況。這意味著，模塊加載機(jī)制必須考慮“循環(huán)加載”的情況。

// a.js
var b = require("b");
// b.js
var a = require("a");

【02】對于JavaScript語言來說，目前最常見的兩種模塊格式CommonJS和ES6，處理“循環(huán)加載”的方法是不一樣的，返回的結(jié)果也不一樣。

【03】CommonJS模塊的加載原理

CommonJS的一個模塊，就是一個腳本文件。

require命令第一次加載該腳本，就會執(zhí)行整個腳本，然后在內(nèi)存生成一個對象。

{
  id: "...",
  exports: { ... },
  loaded: true,...}

上面代碼中，該對象的id屬性是模塊名，exports屬性是模塊輸出的各個接口，loaded屬性是一個布爾值，表示該模塊的腳本是否執(zhí)行完畢。其他還有很多屬性，這里都省略了。

以后需要用到這個模塊的時候，就會到exports屬性上面取值。即使再次執(zhí)行require命令，也不會再次執(zhí)行該模塊，而是到緩存之中取值。

CommonJS模塊的循環(huán)加載

CommonJS模塊的重要特性是加載時執(zhí)行，即腳本代碼在require的時候，就會全部執(zhí)行。

CommonJS的做法是，一旦出現(xiàn)某個模塊被"循環(huán)加載"，就只輸出已經(jīng)執(zhí)行的部分，還未執(zhí)行的部分不會輸出。

讓我們來看，Node官方文檔里面的例子。

腳本文件a.js代碼如下。

a.js腳本先輸出一個done變量，然后加載另一個腳本文件b.js。注意，此時a.js代碼就停在這里，等待b.js執(zhí)行完畢，再往下執(zhí)行。

exports.done = false;var b = require("./b.js");
console.log("在 a.js 之中，b.done = %j", b.done);
exports.done = true;
console.log("a.js 執(zhí)行完畢");

再看b.js的代碼。

exports.done = false;var a = require("./a.js");
console.log("在 b.js 之中，a.done = %j", a.done);
exports.done = true;
console.log("b.js 執(zhí)行完畢");

b.js執(zhí)行到第二行，就會去加載a.js，這時，就發(fā)生了“循環(huán)加載”。系統(tǒng)會去a.js模塊對應(yīng)對象的exports屬性取值，可是因為a.js還沒有執(zhí)行完，從exports屬性只能取回已經(jīng)執(zhí)行的部分，而不是最后的值。

a.js已經(jīng)執(zhí)行的部分，只有一行。

exports.done = false;

因此，對于b.js來說，它從a.js只輸入一個變量done，值為false。

然后，b.js接著往下執(zhí)行，等到全部執(zhí)行完畢，再把執(zhí)行權(quán)交還給a.js。

于是，a.js接著往下執(zhí)行，直到執(zhí)行完畢。

我們寫一個腳本main.js，驗證這個過程。

var a = require("./a.js");var b = require("./b.js");
console.log("在 main.js 之中, a.done=%j, b.done=%j", a.done, b.done);

執(zhí)行main.js，運行結(jié)果如下。

$ node main.js

在 b.js 之中，a.done = false
b.js 執(zhí)行完畢
在 a.js 之中，b.done = true
a.js 執(zhí)行完畢
在 main.js 之中, a.done=true, b.done=true

上面的代碼證明了兩件事。一是，在b.js之中，a.js沒有執(zhí)行完畢，只執(zhí)行了第一行。

二是，main.js執(zhí)行到第二行時，不會再次執(zhí)行b.js，而是輸出緩存的b.js的執(zhí)行結(jié)果，即它的第四行。

exports.done = true;

總之，CommonJS輸入的是被輸出值的拷貝，不是引用。

ES6模塊的循環(huán)加載

ES6處理“循環(huán)加載”與CommonJS有本質(zhì)的不同。

ES6模塊是動態(tài)引用，遇到模塊加載命令import時，不會去執(zhí)行模塊，只是生成一個指向被加載模塊的引用，需要開發(fā)者自己保證，真正取值的時候能夠取到值。

ES6模塊中的值屬于【動態(tài)只讀引用】。

對于只讀來說，即不允許修改引入變量的值，import的變量是只讀的，不論是基本數(shù)據(jù)類型還是復(fù)雜數(shù)據(jù)類型。當(dāng)模塊遇到import命令時，就會生成一個只讀引用。等到腳本真正執(zhí)行時，再根據(jù)這個只讀引用，到被加載的那個模塊里面去取值。

對于動態(tài)來說，原始值發(fā)生變化，import加載的值也會發(fā)生變化。不論是基本數(shù)據(jù)類型還是復(fù)雜數(shù)據(jù)類型。

循環(huán)加載時，ES6模塊是動態(tài)引用。只要兩個模塊之間存在某個引用，代碼就能夠執(zhí)行。

zyx456：也就是說2個文件本身都是可以加載的，然后在運行時去找需要用的值，這時也是可以找到的。

不需要加載依賴關(guān)系。

例子

// a.js
import {bar} from "./b.js";

export function foo() {
    bar();
    console.log("執(zhí)行完畢");
}

foo();

// b.js
import {foo} from "./a.js";

export function bar() {
    if (Math.random() > 0.5) {
        foo();
    }
}

按照CommonJS規(guī)范，上面的代碼是沒法執(zhí)行的。a先加載b，然后b又加載a，這時a還沒有任何執(zhí)行結(jié)果，所以輸出結(jié)果為null，即對于b.js來說，變量foo的值等于null，后面的foo()就會報錯。

但是，ES6可以執(zhí)行上面的代碼。

a.js之所以能夠執(zhí)行，原因就在于ES6加載的變量，都是動態(tài)引用其所在的模塊。只要引用是存在的，代碼就能執(zhí)行。