一篇文章弄懂 JavaScript 中的 import

why_rookie 發布于2019-08-23 13:56 / 1163人閱讀

摘要：無論是否聲明了，導入的模塊都運行在嚴格模式下。這通常是包含模塊的文件的相對或絕對路徑名，可以不包括擴展名。引用時將用作一種命名空間的模塊對象的名稱。導出參數指定單個命名導出，而語法導入所有導出。導入默認值在無論是對象函數類等有效時可用。

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

云服務器 GPU云服務器如何批量替換wordpress文章中的文 javascript中的弄懂 javaScript中的this

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/99820.html

不再彷徨：完全弄懂JavaScript中的this（譯文總結）

摘要：至于，其只是以數組的方傳入參數，其它部分是一樣的，如下它們也可用于在中的類繼承中，調用父級構造器。間接調用，調用了父級構造器對比方法和，它倆都立即執行了函數，而函數返回了一個新方法，綁定了預先指定好的，并可以延后調用。其實this是一個老生常談的問題了。關于this的文章非常多，其實我本以為自己早弄明白了它，不過昨天在做項目的過程中，還是出現了一絲疑惑，想到大概之前在JavaScri...

YanceyOfficial 2019-08-21 10:56 評論0 收藏0
更快助你弄懂React-高階組件

摘要：等價于是一個返回函數的函數就是個高階函數返回的函數就是一個高階組件，該高階組件返回一個與關聯起來的新組件的也是一樣的總結一下高階組件是對代碼進行更高層次重構的好方法，如果你想精簡你的和生命周期方法，那么高階組件可以幫助你提取出可重用的函數。談到react,我們第一個想到的應該是組件,在react的眼中可真的是萬物皆組件。就連我們獲取數據用到的axios也可以用組件來表示...比如,我...

qylost 2019-08-02 15:34 評論0 收藏0
更快助你弄懂React-高階組件

摘要：等價于是一個返回函數的函數就是個高階函數返回的函數就是一個高階組件，該高階組件返回一個與關聯起來的新組件的也是一樣的總結一下高階組件是對代碼進行更高層次重構的好方法，如果你想精簡你的和生命周期方法，那么高階組件可以幫助你提取出可重用的函數。談到react,我們第一個想到的應該是組件,在react的眼中可真的是萬物皆組件。就連我們獲取數據用到的axios也可以用組件來表示...比如,我...

libxd 2019-08-26 10:16 評論0 收藏0
更快助你弄懂React-高階組件

摘要：等價于是一個返回函數的函數就是個高階函數返回的函數就是一個高階組件，該高階組件返回一個與關聯起來的新組件的也是一樣的總結一下高階組件是對代碼進行更高層次重構的好方法，如果你想精簡你的和生命周期方法，那么高階組件可以幫助你提取出可重用的函數。談到react,我們第一個想到的應該是組件,在react的眼中可真的是萬物皆組件。就連我們獲取數據用到的axios也可以用組件來表示...比如,我...

dreamGong 2019-08-30 15:44 評論0 收藏0
更快助你弄懂React-高階組件

摘要：等價于是一個返回函數的函數就是個高階函數返回的函數就是一個高階組件，該高階組件返回一個與關聯起來的新組件的也是一樣的總結一下高階組件是對代碼進行更高層次重構的好方法，如果你想精簡你的和生命周期方法，那么高階組件可以幫助你提取出可重用的函數。談到react,我們第一個想到的應該是組件,在react的眼中可真的是萬物皆組件。就連我們獲取數據用到的axios也可以用組件來表示...比如,我...

xushaojieaaa 2019-08-30 15:44 評論0 收藏0