[TOC] # 基本概念 靜態的**import**語句用于導入由另一個模塊導出的綁定。無論是否聲明了?[`strict mode`](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Strict_mode "如果你想改變你的代碼，讓其工作在具有限制性JavaScript環境中，請參閱轉換成嚴格模式。")，導入的模塊都運行在嚴格模式下。 > 在瀏覽器中，`import`語句只能在聲明了`type="module"`的`script`的標簽中使用。 語法 ~~~ import defaultExport from "module-name"; import * as name from "module-name"; import { export } from "module-name"; import { export as alias } from "module-name"; import { export1 , export2 } from "module-name"; import { foo , bar } from "module-name/path/to/specific/un-exported/file"; import { export1 , export2 as alias2 , [...] } from "module-name"; import defaultExport, { export [ , [...] ] } from "module-name"; import defaultExport, * as name from "module-name"; import "module-name"; var promise = import("module-name");//這是一個處于第三階段的提案。 ~~~ `defaultExport` 導入模塊的默認導出接口的引用名。 `module-name` 要導入的模塊。通常是包含目標模塊的`.js`文件的相對或絕對路徑名，可以不包括`.js`擴展名。某些特定的打包工具可能允許或需要使用擴展或依賴文件，它會檢查比對你的運行環境。只允許單引號和雙引號的字符串。 `name` 導入模塊對象整體的別名，在引用導入模塊時，它將作為一個命名空間來使用。 `export, exportN` 被導入模塊的導出接口的名稱。 `alias, aliasN` 將引用指定的導入的名稱。 ## 描述 `name`參數是“導入模塊對象”的名稱，它將用一種名稱空間來引用導入模塊的接口。export參數指定單個的命名導出，而`import * as name`語法導入所有導出接口，即導入模塊整體。以下示例闡明該語法。 ## 導入整個模塊的內容 這將`myModule`插入當前作用域，其中包含來自位于`/modules/my-module.js`文件中導出的所有接口。 ~~~js import * as myModule from '/modules/my-module.js'; ~~~ 在這里，訪問導出接口意味著使用模塊名稱（在本例為“myModule”）作為命名空間。例如，如果上面導入的模塊包含一個接口`doAllTheAmazingThings()`，你可以這樣調用： ~~~js myModule.doAllTheAmazingThings(); ~~~ ## 導入單個接口 給定一個名為`myExport`的對象或值，它已經從模塊`my-module`導出（因為整個模塊被導出）或顯式地導出（使用[`export`](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Statements/export "在創建JavaScript模塊時，export?語句用于從模塊中導出函數、對象或原始值，以便其他程序可以通過 import 語句使用它們。")語句），將`myExport`插入當前作用域。 ~~~js import {myExport} from '/modules/my-module.js'; ~~~ ## 導入多個接口 這將`foo`和`bar`插入當前作用域。 ~~~js import {foo, bar} from '/modules/my-module.js'; ~~~ ## 導入帶有別名的接口 你可以在導入時重命名接口。例如，將`shortName`插入當前作用域。 ~~~js import {reallyReallyLongModuleExportName as shortName} from '/modules/my-module.js'; ~~~ ## 導入時重命名多個接口 使用別名導入模塊的多個接口。 ~~~js import { reallyReallyLongModuleMemberName as shortName, anotherLongModuleName as short } from '/modules/my-module.js'; ~~~ ## 僅為副作用而導入一個模塊 整個模塊僅為副作用（中性詞，無貶義含義）而導入，而不導入模塊中的任何內容（接口）。 這將運行模塊中的全局代碼, 但實際上不導入任何值。 ~~~ import '/modules/my-module.js'; ~~~ ## 導入默認值 `引入模塊可能有一個default`[`export`](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Statements/export "在創建JavaScript模塊時，export?語句用于從模塊中導出函數、對象或原始值，以便其他程序可以通過 import 語句使用它們。")（無論它是對象，函數，類等）可用。然后可以使用`import`語句來導入這樣的默認接口。 最簡單的用法是直接導入默認值： ~~~js import myDefault from '/modules/my-module.js'; ~~~ 也可以同時將`default`語法與上述用法（命名空間導入或命名導入）一起使用。在這種情況下，`default`導入必須首先聲明。 例如： ~~~js import myDefault, * as myModule from '/modules/my-module.js'; // myModule used as a namespace ~~~ 或者 ~~~js import myDefault, {foo, bar} from '/modules/my-module.js'; // specific, named imports ~~~ ## 動態import 關鍵字import可以像調用函數一樣來動態的導入模塊。以這種方式調用，將返回一個`promise`。 ~~~ import('/modules/my-module.js') .then((module) => { // Do something with the module. }); ~~~ 這種使用方式也支持`await`關鍵字。 ~~~ let module = await import('/modules/my-module.js'); ~~~ # 實踐 ## 標準導入 下面的代碼將會演示如何從輔助模塊導入以協助處理AJAX JSON請求。 ### 模塊：file.js ~~~js function getJSON(url, callback) { let xhr = new XMLHttpRequest(); xhr.onload = function () { callback(this.responseText) }; xhr.open('GET', url, true); xhr.send(); } export function getUsefulContents(url, callback) { getJSON(url, data => callback(JSON.parse(data))); } ~~~ ### 主程序：main.js ~~~js import { getUsefulContents } from '/modules/file.js'; getUsefulContents('http://www.example.com', data => { doSomethingUseful(data); }); ~~~ ## 動態導入 此示例展示了如何基于用戶操作去加載功能模塊到頁面上，在例子中通過點擊按鈕，然后會調用模塊內的函數。當然這不是能實現這個功能的唯一方式，`import()`函數也可以支持`await`。 ~~~js const main = document.querySelector("main"); for (const link of document.querySelectorAll("nav > a")) { link.addEventListener("click", e => { e.preventDefault(); import('/modules/my-module.js') .then(module => { module.loadPageInto(main); }) .catch(err => { main.textContent = err.message; }); }); } ~~~