ES6學習筆記(十九)Module 的語法-export和import

1.概述

歷史上,JavaScript 一直沒有模塊(module)體系,沒法將一個大程序拆分紅互相依賴的小文件,再用簡單的方法拼裝起來。其餘語言都有這項功能,好比 Ruby 的require、Python 的import,甚至就連 CSS 都有@import,可是 JavaScript 任何這方面的支持都沒有,這對開發大型的、複雜的項目造成了巨大障礙。git

在 ES6 以前,社區制定了一些模塊加載方案,最主要的有 CommonJSAMD 兩種。前者用於服務器後者用於瀏覽器。ES6 在語言標準的層面上,實現了模塊功能,並且實現得至關簡單,徹底能夠取代 CommonJS 和 AMD 規範,成爲瀏覽器和服務器通用的模塊解決方案。es6

ES6 模塊的設計思想是儘可能的靜態化,使得編譯時就能肯定模塊的依賴關係,以及輸入和輸出的變量。CommonJS 和 AMD 模塊,都只能在運行時肯定這些東西。好比,CommonJS 模塊就是對象,輸入時必須查找對象屬性。github

// CommonJS模塊
let { stat, exists, readFile } = require('fs');

// 等同於
let _fs = require('fs');
let stat = _fs.stat;
let exists = _fs.exists;
let readfile = _fs.readfile;

上面代碼的實質總體加載fs模塊(即加載fs的全部方法),生成一個對象_fs),而後再從這個對象上面讀取 3 個方法。這種加載稱爲「運行時加載」,由於只有運行時才能獲得這個對象,致使徹底沒辦法在編譯時作「靜態優化」。promise

ES6 模塊不是對象,而是經過export命令顯式指定輸出的代碼,再經過import命令輸入瀏覽器

// ES6模塊
import { stat, exists, readFile } from 'fs';

上面代碼的實質是從fs模塊加載 3 個方法,其餘方法不加載。這種加載稱爲「編譯時加載」或者靜態加載,即 ES6 能夠在編譯時就完成模塊加載,效率要比 CommonJS 模塊的加載方式高。固然,這也致使了無法引用 ES6 模塊自己,由於它不是對象緩存

因爲 ES6 模塊是編譯時加載,使得靜態分析成爲可能。有了它,就能進一步拓寬 JavaScript 的語法,好比引入宏(macro)類型檢驗(type system)這些只能靠靜態分析實現的功能。服務器

除了靜態加載帶來的各類好處,ES6 模塊還有如下好處。app

  • 再也不須要UMD模塊格式了,未來服務器和瀏覽器都會支持 ES6 模塊格式。目前,經過各類工具庫,其實已經作到了這一點。
  • 未來瀏覽器的新 API 就能用模塊格式提供,再也不必須作成全局變量或者navigator對象的屬性。
  • 再也不須要對象做爲命名空間(好比Math對象),將來這些功能能夠經過模塊提供。

本章介紹 ES6 模塊的語法,下一章介紹如何在瀏覽器和 Node 之中,加載 ES6 模塊。ecmascript

2.嚴格模式

ES6 的模塊自動採用嚴格模式,無論你有沒有在模塊頭部加上"use strict";異步

嚴格模式主要有如下限制。

  • 變量必須聲明後再使用
  • 函數的參數不能有同名屬性,不然報錯
  • 不能使用with語句
  • 不能對只讀屬性賦值,不然報錯
  • 不能使用前綴 0 表示八進制數,不然報錯
  • 不能刪除不可刪除的屬性,不然報錯
  • 不能刪除變量delete prop,會報錯,只能刪除屬性delete global[prop]
  • eval不會在它的外層做用域引入變量
  • evalarguments不能被從新賦值
  • arguments不會自動反映函數參數的變化
  • 不能使用arguments.callee
  • 不能使用arguments.caller
  • 禁止this指向全局對象
  • 不能使用fn.callerfn.arguments獲取函數調用的堆棧
  • 增長了保留字(好比protectedstaticinterface

上面這些限制,模塊都必須遵照。因爲嚴格模式是 ES5 引入的,不屬於 ES6,因此請參閱相關 ES5 書籍,本書再也不詳細介紹了。

其中,尤爲須要注意this的限制。ES6 模塊之中,頂層的this指向undefined,即不該該在頂層代碼使用this

3.export 命令

模塊功能主要由兩個命令構成:exportimportexport命令用於規定模塊的對外接口import命令用於輸入其餘模塊提供的功能

一個模塊就是一個獨立的文件。該文件內部的全部變量,外部沒法獲取。若是你但願外部可以讀取模塊內部的某個變量,就必須使用export關鍵字輸出該變量。下面是一個 JS 文件,裏面使用export命令輸出變量。

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

上面代碼是profile.js文件,保存了用戶信息。ES6 將其視爲一個模塊,裏面用export命令對外部輸出了三個變量。

export的寫法,除了像上面這樣,還有另一種。

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

export {firstName, lastName, year};

上面代碼在export命令後面,使用大括號指定所要輸出的一組變量。它與前一種寫法(直接放置在var語句前)是等價的,可是應該優先考慮使用這種寫法。由於這樣就能夠在腳本尾部,一眼看清楚輸出了哪些變量。

export命令除了輸出變量,還能夠輸出函數(class)。

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

上面代碼對外輸出一個函數multiply

一般狀況下export輸出的變量就是原本的名字,可是可使用as關鍵字重命名

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

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

上面代碼使用as關鍵字,重命名了函數v1v2的對外接口。重命名後,v2能夠用不一樣的名字輸出兩次。

須要特別注意的是,export命令規定的是對外的接口必須與模塊內部的變量創建一一對應關係

// 報錯
export 1;

// 報錯
var m = 1;
export m;

上面兩種寫法都會報錯,由於沒有提供對外的接口。第一種寫法直接輸出 1,第二種寫法經過變量m,仍是直接輸出 1。1只是一個值,不是接口。正確的寫法是下面這樣。

 1 // 寫法一
 2 export var m = 1;
 3 
 4 // 寫法二
 5 var m = 1;
 6 export {m};
 7 
 8 // 寫法三
 9 var n = 1;
10 export {n as m};

上面三種寫法都是正確的,規定了對外的接口m。其餘腳本能夠經過這個接口,取到值1它們的實質是,在接口名與模塊內部變量之間,創建了一一對應的關係

一樣的functionclass的輸出,也必須遵照這樣的寫法。

 1 // 報錯
 2 function f() {}
 3 export f;
 4 
 5 // 正確
 6 export function f() {};
 7 
 8 // 正確
 9 function f() {}
10 export {f};

另外export語句輸出的接口與其對應的值是動態綁定關係即經過該接口,能夠取到模塊內部實時的值

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

上面代碼輸出變量foo,值爲bar,500 毫秒以後變成baz

這一點與 CommonJS 規範徹底不一樣CommonJS 模塊輸出的是值的緩存,不存在動態更新,詳見下文《Module 的加載實現》一節。

最後export命令能夠出如今模塊的任何位置只要處於模塊頂層就能夠。若是處於塊級做用域內,就會報錯,下一節的import命令也是如此。這是由於處於條件代碼塊之中,就無法作靜態優化了,違背了 ES6 模塊的設計初衷。

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

上面代碼中,export語句放在函數之中,結果報錯。

4.import 命令

使用export命令定義了模塊的對外接口之後,其餘 JS 文件就能夠經過import命令加載這個模塊。

// main.js
import {firstName, lastName, year} from './profile.js';

function setName(element) {
  element.textContent = firstName + ' ' + lastName;
}

上面代碼的import命令,用於加載profile.js文件,並從中輸入變量。import命令接受一對大括號,裏面指定要從其餘模塊導入的變量名大括號裏面的變量名,必須與被導入模塊(profile.js)對外接口的名稱相同

若是想爲輸入的變量從新取一個名字import命令要使用as關鍵字,將輸入的變量重命名

import { lastName as surname } from './profile.js';

import命令輸入的變量都是隻讀的由於它的本質是輸入接口。也就是說,不容許在加載模塊的腳本里面,改寫接口

import {a} from './xxx.js'

a = {}; // Syntax Error : 'a' is read-only;

上面代碼中,腳本加載了變量a對其從新賦值就會報錯,由於a是一個只讀的接口。可是,若是a是一個對象,改寫a的屬性是容許的

import {a} from './xxx.js'

a.foo = 'hello'; // 合法操做

上面代碼中,a的屬性能夠成功改寫,而且其餘模塊也能夠讀到改寫後的值。不過,這種寫法很難查錯,建議凡是輸入的變量,都看成徹底只讀,輕易不要改變它的屬性

import後面的from指定模塊文件的位置,能夠是相對路徑,也能夠是絕對路徑.js後綴能夠省略若是隻是模塊名,不帶有路徑,那麼必須有配置文件,告訴 JavaScript 引擎該模塊的位置

import {myMethod} from 'util';

上面代碼中,util是模塊文件名,因爲不帶有路徑,必須經過配置告訴引擎怎麼取到這個模塊

注意import命令具備提高效果,會提高到整個模塊的頭部,首先執行

foo();

import { foo } from 'my_module';

上面的代碼不會報錯,由於import執行早於foo的調用這種行爲的本質是,import命令是編譯階段執行的,在代碼運行以前

因爲import靜態執行,因此不能使用表達式和變量,這些只有在運行時才能獲得結果的語法結構

 1 // 報錯
 2 import { 'f' + 'oo' } from 'my_module';
 3 
 4 // 報錯
 5 let module = 'my_module';
 6 import { foo } from module;
 7 
 8 // 報錯
 9 if (x === 1) {
10   import { foo } from 'module1';
11 } else {
12   import { foo } from 'module2';
13 }

上面三種寫法都會報錯,由於它們用到了表達式、變量和if結構。在靜態分析階段,這些語法都是無法獲得值的。

最後import語句會執行所加載的模塊,所以能夠有下面的寫法。

import 'lodash';

上面代碼僅僅執行lodash模塊,可是不輸入任何值。

若是屢次重複執行同一句import語句,那麼只會執行一次,而不會執行屢次。

import 'lodash';
import 'lodash';

上面代碼加載了兩次lodash,可是隻會執行一次

import { foo } from 'my_module';
import { bar } from 'my_module';

// 等同於
import { foo, bar } from 'my_module';

上面代碼中,雖然foobar在兩個語句中加載,可是它們對應的是同一個my_module實例。也就是說,import語句是 Singleton 模式

目前階段,經過 Babel 轉碼,CommonJS 模塊的require命令和 ES6 模塊的import命令,能夠寫在同一個模塊裏面,可是最好不要這樣作由於import在靜態解析階段執行,因此它是一個模塊之中最先執行的。下面的代碼可能不會獲得預期結果。

require('core-js/modules/es6.symbol');
require('core-js/modules/es6.promise');
import React from 'React';

5.模塊的總體加載

除了指定加載某個輸出值,還可使用總體加載,即用星號(*指定一個對象,全部輸出值都加載在這個對象上面。

下面是一個circle.js文件,它輸出兩個方法areacircumference

// 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));

注意,模塊總體加載所在的那個對象(上例是circle),應該是能夠靜態分析的因此不容許運行時改變。下面的寫法都是不容許的。

import * as circle from './circle';

// 下面兩行都是不容許的
circle.foo = 'hello';
circle.area = function () {};

6.export default 命令 

從前面的例子能夠看出,使用import命令的時候,用戶須要知道所要加載的變量名或函數名,不然沒法加載。可是,用戶確定但願快速上手,未必願意閱讀文檔,去了解模塊有哪些屬性和方法。

爲了給用戶提供方便,讓他們不用閱讀文檔就能加載模塊,就要用到export default命令,爲模塊指定默認輸出

// export-default.js
export default function () {
  console.log('foo');
}

上面代碼是一個模塊文件export-default.js它的默認輸出是一個函數

其餘模塊加載該模塊時,import命令能夠爲該匿名函數指定任意名字

// import-default.js
import customName from './export-default';
customName(); // 'foo'

上面代碼的import命令,能夠用任意名稱指向export-default.js輸出的方法,這時就不須要知道原模塊輸出的函數名。須要注意的是,這時import命令後面,不使用大括號

export default命令用在非匿名函數前,也是能夠的

 1 // export-default.js
 2 export default function foo() {
 3   console.log('foo');
 4 }
 5 
 6 // 或者寫成
 7 
 8 function foo() {
 9   console.log('foo');
10 }
11 
12 export default foo;

上面代碼中,foo函數的函數名foo在模塊外部是無效的加載的時候,視同匿名函數加載

下面比較一下默認輸出和正常輸出。

 1 // 第一組
 2 export default function crc32() { // 輸出
 3   // ...
 4 }
 5 
 6 import crc32 from 'crc32'; // 輸入
 7 
 8 // 第二組
 9 export function crc32() { // 輸出
10   // ...
11 };
12 
13 import {crc32} from 'crc32'; // 輸入

上面代碼的兩組寫法,第一組是使用export default時,對應的import語句不須要使用大括號;第二組是不使用export default時,對應的import語句須要使用大括號。

export default命令用於指定模塊的默認輸出。顯然,一個模塊只能有一個默認輸出所以export default命令只能使用一次。因此,import命令後面纔不用加大括號,由於只可能惟一對應export default命令

本質上,export default就是輸出一個叫作default的變量或方法而後系統容許你爲它取任意名字。因此,下面的寫法是有效的。

 1 // modules.js
 2 function add(x, y) {
 3   return x * y;
 4 }
 5 export {add as default};
 6 // 等同於
 7 // export default add;
 8 
 9 // app.js
10 import { default as foo } from 'modules';
11 // 等同於
12 // import foo from 'modules';

正是由於export default命令其實只是輸出一個叫作default的變量,因此它後面不能跟變量聲明語句

// 正確
export var a = 1;

// 正確
var a = 1;
export default a;

// 錯誤
export default var a = 1;

上面代碼中,export default a的含義是將變量a的值賦給變量default。因此,最後一種寫法會報錯。

一樣地,由於export default命令的本質是將後面的值,賦給default變量,因此能夠直接將一個值寫在export default以後。

// 正確
export default 42;

// 報錯
export 42;

上面代碼中,後一句報錯是由於沒有指定對外的接口,而前一句指定對外接口爲default

有了export default命令,輸入模塊時就很是直觀了,以輸入 lodash 模塊爲例。

import _ from 'lodash';

若是想在一條import語句中,同時輸入默認方法和其餘接口,能夠寫成下面這樣。

import _, { each, forEach } from 'lodash';

對應上面代碼的export語句以下。

export default function (obj) {
  // ···
}

export function each(obj, iterator, context) {
  // ···
}

export { each as forEach };

上面代碼的最後一行的意思是,暴露出forEach接口,默認指向each接口,即forEacheach指向同一個方法。

export default也能夠用來輸出類

// MyClass.js
export default class { ... }

// main.js
import MyClass from 'MyClass';
let o = new MyClass();

7.export 與 import 的複合寫法

若是在一個模塊之中,先輸入後輸出同一個模塊import語句能夠與export語句寫在一塊兒。

export { foo, bar } from 'my_module';

// 能夠簡單理解爲
import { foo, bar } from 'my_module';
export { foo, bar };

上面代碼中,exportimport語句能夠結合在一塊兒,寫成一行。但須要注意的是,寫成一行之後,foobar實際上並無被導入當前模塊,只是至關於對外轉發了這兩個接口致使當前模塊不能直接使用foobar

模塊的接口更名和總體輸出,也能夠採用這種寫法。

// 接口更名
export { foo as myFoo } from 'my_module';

// 總體輸出
export * from 'my_module';

默認接口的寫法以下。

export { default } from 'foo';

具名接口改成默認接口的寫法以下。

export { es6 as default } from './someModule';

// 等同於
import { es6 } from './someModule';
export default es6;

一樣地,默認接口也能夠更名爲具名接口

export { default as es6 } from './someModule';

下面三種import語句,沒有對應的複合寫法

import * as someIdentifier from "someModule"; //總體導入
import someIdentifier from "someModule"; //默認導入
import someIdentifier, { namedIdentifier } from "someModule"; //默認 + 指定導入

爲了作到形式的對稱,如今有提案,提出補上這三種複合寫法。

export * as someIdentifier from "someModule";
export someIdentifier from "someModule";
export someIdentifier, { namedIdentifier } from "someModule";

8.模塊的繼承 

模塊之間也能夠繼承

假設有一個circleplus模塊,繼承了circle模塊。

// circleplus.js

export * from 'circle'; //導入父模塊
export var e = 2.71828182846; //子模塊導出本身的變量和方法
export default function(x) {
  return Math.exp(x);
}

上面代碼中的export *表示再輸出circle模塊的全部屬性和方法

注意export *命令會忽略circle模塊的default方法。而後,上面代碼又輸出了自定義的e變量和默認方法

這時,也能夠將circle的屬性或方法,更名後再輸出

// circleplus.js

export { area as circleArea } from 'circle';

上面代碼表示,只輸出circle模塊的area方法,且將其更名circleArea

加載上面模塊的寫法以下。

// main.js

import * as math from 'circleplus';
import exp from 'circleplus';
console.log(exp(math.e));

上面代碼中的import exp表示,circleplus模塊的默認方法加載爲exp方法

9.跨模塊常量 

本書介紹const命令的時候說過,const聲明的常量只在當前代碼塊有效。若是想設置跨模塊的常量(即跨多個文件),或者說一個值要被多個模塊共享,能夠採用下面的寫法。

 1 // constants.js 模塊
 2 export const A = 1;
 3 export const B = 3;
 4 export const C = 4;
 5 
 6 // test1.js 模塊
 7 import * as constants from './constants';
 8 console.log(constants.A); // 1
 9 console.log(constants.B); // 3
10 
11 // test2.js 模塊
12 import {A, B} from './constants';
13 console.log(A); // 1
14 console.log(B); // 3

若是要使用的常量很是多,能夠建一個專門的constants目錄,將各類常量寫在不一樣的文件裏面,保存在該目錄下。

1 // constants/db.js
2 export const db = {
3   url: 'http://my.couchdbserver.local:5984',
4   admin_username: 'admin',
5   admin_password: 'admin password'
6 };
7 
8 // constants/user.js
9 export const users = ['root', 'admin', 'staff', 'ceo', 'chief', 'moderator'];

而後,將這些文件輸出的常量合併index.js裏面。

// constants/index.js
export {db} from './db';
export {users} from './users';

使用的時候,直接加載index.js就能夠了。

// script.js
import {db, users} from './constants/index';

分而治之,而後合併輸出,完美的配置文件模塊的寫法,perfect !

10.import() 

簡介

前面介紹過,import命令會被 JavaScript 引擎靜態分析先於模塊內的其餘語句執行import命令叫作「鏈接」 binding 其實更合適)。因此,下面的代碼會報錯。

// 報錯,必須寫在最頂層
if (x === 2) {
  import MyModual from './myModual';
}

上面代碼中,引擎處理import語句是在編譯時這時不會去分析或執行if語句因此import語句放在if代碼塊之中毫無心義,所以會報句法錯誤,而不是執行時錯誤。也就是說,importexport命令只能在模塊的頂層,不能在代碼塊之中(好比,在if代碼塊之中,或在函數之中)。

這樣的設計,當然有利於編譯器提升效率,但也致使沒法在運行時加載模塊

在語法上,條件加載就不可能實現。若是import命令要取代 Node 的require方法,這就造成了一個障礙。

由於require是運行時加載模塊,import命令沒法取代require的動態加載功能

//動態加載
const path = './' + fileName;
const myModual = require(path);

上面的語句就是動態加載require到底加載哪個模塊,只有運行時才知道。import命令作不到這一點。

所以,有一個提案,建議引入import()函數,完成動態加載。

import(specifier)

上面代碼中,import函數的參數specifier指定所要加載的模塊的位置import命令可以接受什麼參數,import()函數就能接受什麼參數,二者區別主要是後者爲動態加載

import()返回一個 Promise 對象。下面是一個例子。

1 const main = document.querySelector('main');
2 
3 import(`./section-modules/${someVariable}.js`)
4   .then(module => {
5     module.loadPageInto(main);
6   })
7   .catch(err => {
8     main.textContent = err.message;
9   });

import()函數能夠用在任何地方,不只僅是模塊,非模塊的腳本也可使用。它是運行時執行,也就是說,何時運行到這一句,就會加載指定的模塊。

另外,import()函數與所加載的模塊沒有靜態鏈接關係,這點也是與import語句不相同。

import()相似於 Node 的require方法,區別主要是前者是異步加載,後者是同步加載

適用場合

下面是import()的一些適用場合。

(1)按需加載。

import()能夠在須要的時候,再加載某個模塊。

1 button.addEventListener('click', event => {
2   import('./dialogBox.js')
3   .then(dialogBox => {
4     dialogBox.open();
5   })
6   .catch(error => {
7     /* Error handling */
8   })
9 });

上面代碼中,import()方法放在click事件的監聽函數之中,只有用戶點擊了按鈕,纔會加載這個模塊

(2)條件加載

import()能夠放在if代碼塊,根據不一樣的狀況,加載不一樣的模塊。

if (condition) {
  import('moduleA').then(...);
} else {
  import('moduleB').then(...);
}

上面代碼中,若是知足條件,就加載模塊 A,不然加載模塊 B。

(3)動態的模塊路徑

import()容許模塊路徑動態生成。

import(f())
.then(...);

上面代碼中,根據函數f的返回結果,加載不一樣的模塊。

注意點

import()加載模塊成功之後,這個模塊會做爲一個對象,看成then方法的參數。所以,可以使用對象解構賦值的語法,獲取輸出接口

import('./myModule.js')
.then(({export1, export2}) => {
  // ...·
});

上面代碼中,export1export2都是myModule.js的輸出接口,能夠解構得到。

若是模塊有default輸出接口,能夠用參數直接得到。

import('./myModule.js')
.then(myModule => {
  console.log(myModule.default);
});

上面的代碼也可使用具名輸入的形式。

import('./myModule.js')
.then(({default: theDefault}) => {
  console.log(theDefault);
});

若是想同時加載多個模塊,能夠採用下面的寫法。

1 Promise.all([
2   import('./module1.js'),
3   import('./module2.js'),
4   import('./module3.js'),
5 ])
6 .then(([module1, module2, module3]) => {
7    ···
8 });

import()也能夠用在 async 函數之中。

 1 async function main() {
 2   const myModule = await import('./myModule.js');
 3   const {export1, export2} = await import('./myModule.js');
 4   const [module1, module2, module3] =
 5     await Promise.all([
 6       import('./module1.js'),
 7       import('./module2.js'),
 8       import('./module3.js'),
 9     ]);
10 }
11 main();
相關文章
相關標籤/搜索