JavaScript中import的詳解（附範例）

這篇文章帶給大家的內容是關於JavaScript中import的詳解（附範例），有一定的參考價值，有需要的朋友可以參考一下，希望對你有幫助。

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
嚴格模式
嵌入式腳本

#

以上是JavaScript中import的詳解（附範例）的詳細內容。更多資訊請關注PHP中文網其他相關文章！