一篇文章弄懂 JavaScript 中的 import

陳田田發表於2018-12-07
JavaScriptImport

import 語句用於匯入由另一個模組匯出的繫結。無論是否宣告瞭 strict mode，匯入的模組都執行在嚴格模式下。import語句不能在嵌入式指令碼中使用。

語法

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 { export1, export2 as alias2 , [...] } from “module-name”;
import defaultExport, { export [ , [...] ] } from “module-name”;
import defaultExport, * as name from “module-name”;
import “module-name”;
複製程式碼

defaultExport

將引用模組預設匯出的名稱。

module-name

要匯入的模組。這通常是包含模組的 .js 檔案的相對或絕對路徑名，可以不包括 .js 副檔名。某些打包工具可以允許或要求使用該擴充套件；檢查你的執行環境，只允許單引號和雙引號的字串。

name

引用時將用作一種名稱空間的模組物件的名稱。

export，exportN

要匯入的匯出名稱

alias，aliasN

將引用指定的匯入的名稱。

描述

name 引數是“模組物件”的名稱，它將用一種名稱空間來引用匯出。匯出引數指定單個命名匯出，而import * as name 語法匯入所有匯出。

匯入整個模組的內容

這將 myModule 插入當前作用域，其中包含來自位於 /modules/my-module.js 檔案匯出的所有模組。

import * as myModule from ‘/modules/my-module.js’;
複製程式碼

在這裡，訪問匯出意味著使用模組名稱（在這種情況下為”myModule”）作為名稱空間。例如，如果上面匯入的模組包含一個doAllTheAmazingThings()，你可以這樣呼叫：

myModule.doAllTheAmazingThings();
複製程式碼

匯入單個匯出

給定一個名為 myExport 的物件或值，它已經從模組 my-module 匯出（因為整個模組被匯出）或顯式匯出（使用 export 語句），將 myExport 插入到當前作用域。

import { myExport } from ‘/modules/my-module.js’;
複製程式碼

匯入多個匯出

將 foo 和 bar 插入當前作用域。

import { foo, bar } from ‘/modules/my-module.js’;
複製程式碼

匯入帶有別名的匯出

匯入時可以重新命名匯出，例如，將shortName 插入當前作用域。

import { reallyReallyReallyLongModuleExportName as shortName } from “/modules/my-module.js”;
複製程式碼

匯入時重新命名多個匯出

使用別名匯入模組的多個匯出。

import {
    reallyReallyReallyLongModuleMemberName as shortName,
    anotherLongModuleName as short
} form “/modules/my-module.js”;
複製程式碼

僅為副作用而匯入一個模組

模組僅為副作用（中性詞、無貶義含義）而匯入，而不是匯入模組中的任何內容，這將執行模組中的全域性程式碼，但實際上不匯入任何值。

import “/modules/my-module.js”
複製程式碼

匯入預設值

在 default-export （無論是物件、函式、類等）有效時可用。然後可以使用 import 語句來匯入這樣的預設值。 最簡單的用法是直接匯入預設值：

import myDefault from “/modules/my-module.js”;
複製程式碼

也可以同時將 default 語法與上述用法（名稱空間匯入和命名匯入）一起使用。在這種情況下，default 匯入必須首先宣告。

import myDefault, * as myModule from “/modules/my-module.js”;
複製程式碼

或者

import myDefault, { foo, bar } from “/modules/my-module.js”;
複製程式碼

示例

從輔助模組匯入以協助處理 AJAX DSON 請求。

模組：file.js

function getJSON(url, callback){
    let xhr = new XMLHttpRequest();
    xhr.onload = function () {
        callback(this.responseText)
    };
    xhr.open(‘GET’, url, true);
    xhr.send();
}
export function getUserFulContents(url, callback){
    getJSON(url, data => callback(JSON.parse(data)));
}
複製程式碼

主程式：main.js

import { getUserFulContents } from “/modules/file.js”;
getUserFulContents(‘http://www.example.com”, 
    data => { doSomethingUseful(data); } )
複製程式碼

補充

strict mode 嚴格模式 嵌入式指令碼

相關文章