有關(guān)es6中的import使用方法

靜態(tài)的**import** 語句用于導(dǎo)入由另一個模塊導(dǎo)出的綁定砰盐。無論是否聲明了 strict mode 猾警,導(dǎo)入的模塊都運行在嚴格模式下链韭。在瀏覽器中其徙,import 語句只能在聲明了 type="module"script 的標簽中使用。

此外,還有一個類似函數(shù)的動態(tài) import()压昼,它不需要依賴 type="module" 的script標簽送滞。

script 標簽中使用 nomodule 屬性,可以確保向后兼容朽褪。

在您希望按照一定的條件或者按需加載模塊的時候置吓,動態(tài)import() 是非常有用的。而靜態(tài)型的 import 是初始化加載依賴項的最優(yōu)選擇鞍匾,使用靜態(tài) import 更容易從代碼靜態(tài)分析工具和 tree shaking 中受益交洗。

語法

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");//這是一個處于第三階段的提案。

name參數(shù)是“導(dǎo)入模塊對象”的名稱橡淑,它將用一種名稱空間來引用導(dǎo)入模塊的接口构拳。export參數(shù)指定單個的命名導(dǎo)出,而import * as name語法導(dǎo)入所有導(dǎo)出接口梁棠,即導(dǎo)入模塊整體置森。以下示例闡明該語法。

導(dǎo)入整個模塊的內(nèi)容

這將myModule插入當(dāng)前作用域符糊,其中包含來自位于/modules/my-module.js文件中導(dǎo)出的所有接口凫海。

import * as myModule from '/modules/my-module.js';

在這里,訪問導(dǎo)出接口意味著使用模塊名稱(在本例為“myModule”)作為命名空間男娄。例如行贪,如果上面導(dǎo)入的模塊包含一個接口doAllTheAmazingThings(),你可以這樣調(diào)用:

myModule.doAllTheAmazingThings();

導(dǎo)入單個接口

給定一個名為myExport的對象或值模闲,它已經(jīng)從模塊my-module導(dǎo)出(因為整個模塊被導(dǎo)出)或顯式地導(dǎo)出(使用export語句)建瘫,將myExport插入當(dāng)前作用域。

import {myExport} from '/modules/my-module.js';

導(dǎo)入多個接口

這將foobar插入當(dāng)前作用域尸折。

import {foo, bar} from '/modules/my-module.js';

導(dǎo)入帶有別名的接口

你可以在導(dǎo)入時重命名接口啰脚。例如,將shortName插入當(dāng)前作用域实夹。

import {reallyReallyLongModuleExportName as shortName}
  from '/modules/my-module.js';

導(dǎo)入時重命名多個接口

使用別名導(dǎo)入模塊的多個接口橄浓。

import {
  reallyReallyLongModuleMemberName as shortName, 
  anotherLongModuleName as short
} from '/modules/my-module.js';

僅為副作用而導(dǎo)入一個模塊

整個模塊僅為副作用(中性詞粒梦,無貶義含義)而導(dǎo)入,而不導(dǎo)入模塊中的任何內(nèi)容(接口)荸实。 這將運行模塊中的全局代碼, 但實際上不導(dǎo)入任何值匀们。

import '/modules/my-module.js';

導(dǎo)入默認值

引入模塊可能有一個defaultexport(無論它是對象,函數(shù)泪勒,類等)可用昼蛀。然后可以使用import語句來導(dǎo)入這樣的默認接口。

最簡單的用法是直接導(dǎo)入默認值:

import myDefault from '/modules/my-module.js';

也可以同時將default語法與上述用法(命名空間導(dǎo)入或命名導(dǎo)入)一起使用圆存。在這種情況下叼旋,default導(dǎo)入必須首先聲明。 例如:

import myDefault, * as myModule from '/modules/my-module.js';
// myModule used as a namespace

或者

import myDefault, {foo, bar} from '/modules/my-module.js';
// specific, named imports

動態(tài)import

關(guān)鍵字import可以像調(diào)用函數(shù)一樣來動態(tài)的導(dǎo)入模塊沦辙。以這種方式調(diào)用夫植,將返回一個 promise

import('/modules/my-module.js')
  .then((module) => {
    // Do something with the module.
  });

這種使用方式也支持 await 關(guān)鍵字油讯。

let module = await import('/modules/my-module.js');
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末详民,一起剝皮案震驚了整個濱河市,隨后出現(xiàn)的幾起案子陌兑,更是在濱河造成了極大的恐慌沈跨,老刑警劉巖,帶你破解...
    沈念sama閱讀 218,941評論 6 508
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件兔综,死亡現(xiàn)場離奇詭異饿凛,居然都是意外死亡,警方通過查閱死者的電腦和手機软驰,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 93,397評論 3 395
  • 文/潘曉璐 我一進店門涧窒,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人锭亏,你說我怎么就攤上這事纠吴。” “怎么了慧瘤?”我有些...
    開封第一講書人閱讀 165,345評論 0 356
  • 文/不壞的土叔 我叫張陵戴已,是天一觀的道長。 經(jīng)常有香客問我锅减,道長糖儡,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 58,851評論 1 295
  • 正文 為了忘掉前任上煤,我火速辦了婚禮,結(jié)果婚禮上著淆,老公的妹妹穿的比我還像新娘劫狠。我一直安慰自己拴疤,他們只是感情好,可當(dāng)我...
    茶點故事閱讀 67,868評論 6 392
  • 文/花漫 我一把揭開白布独泞。 她就那樣靜靜地躺著呐矾,像睡著了一般。 火紅的嫁衣襯著肌膚如雪懦砂。 梳的紋絲不亂的頭發(fā)上蜒犯,一...
    開封第一講書人閱讀 51,688評論 1 305
  • 那天,我揣著相機與錄音荞膘,去河邊找鬼罚随。 笑死,一個胖子當(dāng)著我的面吹牛羽资,可吹牛的內(nèi)容都是我干的淘菩。 我是一名探鬼主播,決...
    沈念sama閱讀 40,414評論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼屠升,長吁一口氣:“原來是場噩夢啊……” “哼潮改!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起腹暖,我...
    開封第一講書人閱讀 39,319評論 0 276
  • 序言:老撾萬榮一對情侶失蹤汇在,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后脏答,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體糕殉,經(jīng)...
    沈念sama閱讀 45,775評論 1 315
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 37,945評論 3 336
  • 正文 我和宋清朗相戀三年以蕴,在試婚紗的時候發(fā)現(xiàn)自己被綠了糙麦。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 40,096評論 1 350
  • 序言:一個原本活蹦亂跳的男人離奇死亡丛肮,死狀恐怖赡磅,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情宝与,我是刑警寧澤焚廊,帶...
    沈念sama閱讀 35,789評論 5 346
  • 正文 年R本政府宣布,位于F島的核電站习劫,受9級特大地震影響咆瘟,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜诽里,卻給世界環(huán)境...
    茶點故事閱讀 41,437評論 3 331
  • 文/蒙蒙 一袒餐、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧,春花似錦灸眼、人聲如沸卧檐。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,993評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽霉囚。三九已至,卻和暖如春匕积,著一層夾襖步出監(jiān)牢的瞬間盈罐,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 33,107評論 1 271
  • 我被黑心中介騙來泰國打工闪唆, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留盅粪,地道東北人。 一個月前我還...
    沈念sama閱讀 48,308評論 3 372
  • 正文 我出身青樓苞氮,卻偏偏與公主長得像湾揽,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子笼吟,可洞房花燭夜當(dāng)晚...
    茶點故事閱讀 45,037評論 2 355

推薦閱讀更多精彩內(nèi)容