ES6中 import和export的用法

1. export與模塊導出

export語法聲明用于導出函數(shù)乐纸、對象粘我、指定文件(或模塊)的原始值墓卦。export有兩種模塊導出方式:

  • 命名式導出(名稱導出),導出每個模塊可以多個
  • 定義式導出(默認導出)照瘾,默認導出每個模塊僅一個馅闽。

export可能會有以下幾種形式的導出語法:

export { name1, name2, …, nameN };
export { variable1 as name1, variable2 as name2, …, nameN };
export let name1, name2, …, nameN; // 也可以是 var
export let name1 = …, name2 = …, …, nameN; // 也可以是 var, const

export default expression;
export default function (…) { … } // 也可以是 class, function*
export default function name1(…) { … } // 也可以是 class, function*
export { name1 as default, … };

export * from …;
export { name1, name2, …, nameN } from …;
export { import1 as name1, import2 as name2, …, nameN } from …;
  • name1… nameN—— 導出的“標識符”。導出后夭织,可以通過這個“標識符”在另一個模塊中使用import引用
  • default—— 設置模塊的默認導出吭露。設置后import不通過“標識符”而直接引用默認導入
  • * —— 繼承模塊并導出繼承模塊所有的方法和屬性
  • as —— 重命名導出“標識符”
  • from—— 從已經(jīng)存在的模塊、腳本文件…導出
命名式導出

模塊可以通過export前綴關(guān)鍵詞聲明導出對象尊惰,導出對象可以是多個讲竿。這些導出對象用名稱進行區(qū)分,稱之為命名式導出弄屡。

export { myFunction }; // 導出一個已定義的函數(shù)
export const foo = Math.sqrt(2); // 導出一個常量
var name = '菜鳥教程';
var domain = 'http://www.runoob.com/';
export {name, domain};

模塊導出時题禀,我們可以使用as關(guān)鍵字對導出成員進行重命名:

var name = '菜鳥教程';
var domain = 'http://www.runoob.com/';
export {name as siteName, domain};

使用示例:

// "my-module.js" 模塊
export function cube(x) {
  return x * x * x;
}
const foo = Math.PI + Math.SQRT2;
export { foo };

在另一個模塊(腳本文件)中,我們可以像下面這樣引用:

import { cube, foo } from 'my-module';
console.log(cube(3)); // 27
console.log(foo);    // 4.555806215962888

注意:在import引用時膀捷,也要使用相同的名稱來引用相應的值

定義式導出

默認導出也被稱做定義式導出迈嘹。默認導出每個導出只有一個單一值,這個輸出可以是一個函數(shù)全庸、類或其它類型的值秀仲,這樣在模塊import導入時也會很容易引用。

export default function() {}; // 可以導出一個函數(shù)
export default class(){}; // 也可以出一個類

用法示例:

 // "my-module.js"模塊
export default function (x) {
  return x * x * x;
}

在另一個模塊(腳本文件)中壶笼,我們可以像下面這樣引用神僵,相對名稱導出來說使用更為簡單:

// 引用 "my-module.js"模塊
import cube from 'my-module';
console.log(cube(3)); // 27
命名式導出與默認導出

默認導出可以理解為另一種形式的命名導出,默認導出可以認為是使用了default名稱的命名導出覆劈。

下面兩種導出方式是等價的:

const D = 123;

export default D;
export { D as default };

注意:export defaultexport輸出時候保礼,使用import的區(qū)別

  • export default對應的import語句不需要使用大括號,而export對應的import需要大括號
  • export default 對應的import不需要知道加載的模塊里的變量名责语。而export對應的import必須和export的變量一樣炮障。

2. import

import語法聲明用于從已導出的模塊、腳本中導入函數(shù)坤候、對象胁赢、指定文件(或模塊)的原始值。import模塊導入與export模塊導出功能相對應白筹,也存在兩種模塊導入方式:命名式導入(名稱導入)和定義式導入(默認導入)智末。

import可能會有以下幾種形式的導入語法:

import defaultMember from "module-name";
import * as name from "module-name";
import { member } from "module-name";
import { member as alias } from "module-name";
import { member1 , member2 } from "module-name";
import { member1 , member2 as alias2 , [...] } from "module-name";
import defaultMember, { member [ , [...] ] } from "module-name";
import defaultMember, * as name from "module-name";
import "module-name";
  • name —— 從將要導入模塊中收到的導出值的名稱
  • member, memberN —— 從導出模塊,導入指定名稱的多個成員
  • defaultMember —— 從導出模塊遍蟋,導入默認導出成員
  • alias, aliasN—— 別名吹害,對指定導入成員進行的重命名
  • module-name —— 要導入的模塊。是一個文件名
  • as —— 重命名導入成員名稱(“標識符”)
  • from —— 從已經(jīng)存在的模塊虚青、腳本文件等導入

用法示例:

// --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 getUsefulContents(url, callback) {
  getJSON(url, data => callback(JSON.parse(data)));
}

// --main.js--
import { getUsefulContents } from "file";
getUsefulContents("http://itbilu.com", data => {
  doSomethingUseful(data);
});

在一個文件或模塊中它呀,export、import可以有多個,export default僅有一個


參考資料:

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末纵穿,一起剝皮案震驚了整個濱河市下隧,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌谓媒,老刑警劉巖淆院,帶你破解...
    沈念sama閱讀 222,865評論 6 518
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異句惯,居然都是意外死亡土辩,警方通過查閱死者的電腦和手機,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 95,296評論 3 399
  • 文/潘曉璐 我一進店門抢野,熙熙樓的掌柜王于貴愁眉苦臉地迎上來拷淘,“玉大人,你說我怎么就攤上這事指孤∑粞模” “怎么了?”我有些...
    開封第一講書人閱讀 169,631評論 0 364
  • 文/不壞的土叔 我叫張陵恃轩,是天一觀的道長结洼。 經(jīng)常有香客問我,道長叉跛,這世上最難降的妖魔是什么松忍? 我笑而不...
    開封第一講書人閱讀 60,199評論 1 300
  • 正文 為了忘掉前任,我火速辦了婚禮昧互,結(jié)果婚禮上挽铁,老公的妹妹穿的比我還像新娘伟桅。我一直安慰自己敞掘,他們只是感情好,可當我...
    茶點故事閱讀 69,196評論 6 398
  • 文/花漫 我一把揭開白布楣铁。 她就那樣靜靜地躺著玖雁,像睡著了一般。 火紅的嫁衣襯著肌膚如雪盖腕。 梳的紋絲不亂的頭發(fā)上赫冬,一...
    開封第一講書人閱讀 52,793評論 1 314
  • 那天,我揣著相機與錄音溃列,去河邊找鬼劲厌。 笑死,一個胖子當著我的面吹牛听隐,可吹牛的內(nèi)容都是我干的补鼻。 我是一名探鬼主播,決...
    沈念sama閱讀 41,221評論 3 423
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼风范!你這毒婦竟也來了咨跌?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 40,174評論 0 277
  • 序言:老撾萬榮一對情侶失蹤硼婿,失蹤者是張志新(化名)和其女友劉穎锌半,沒想到半個月后,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體寇漫,經(jīng)...
    沈念sama閱讀 46,699評論 1 320
  • 正文 獨居荒郊野嶺守林人離奇死亡刊殉,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 38,770評論 3 343
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發(fā)現(xiàn)自己被綠了州胳。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片冗澈。...
    茶點故事閱讀 40,918評論 1 353
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖陋葡,靈堂內(nèi)的尸體忽然破棺而出亚亲,到底是詐尸還是另有隱情,我是刑警寧澤腐缤,帶...
    沈念sama閱讀 36,573評論 5 351
  • 正文 年R本政府宣布捌归,位于F島的核電站,受9級特大地震影響岭粤,放射性物質(zhì)發(fā)生泄漏惜索。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點故事閱讀 42,255評論 3 336
  • 文/蒙蒙 一剃浇、第九天 我趴在偏房一處隱蔽的房頂上張望巾兆。 院中可真熱鬧,春花似錦虎囚、人聲如沸角塑。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,749評論 0 25
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽圃伶。三九已至,卻和暖如春蒲列,著一層夾襖步出監(jiān)牢的瞬間窒朋,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 33,862評論 1 274
  • 我被黑心中介騙來泰國打工蝗岖, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留侥猩,地道東北人。 一個月前我還...
    沈念sama閱讀 49,364評論 3 379
  • 正文 我出身青樓抵赢,卻偏偏與公主長得像欺劳,于是被迫代替她去往敵國和親洛退。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當晚...
    茶點故事閱讀 45,926評論 2 361

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

  • Spring Cloud為開發(fā)人員提供了快速構(gòu)建分布式系統(tǒng)中一些常見模式的工具(例如配置管理杰标,服務發(fā)現(xiàn)兵怯,斷路器,智...
    卡卡羅2017閱讀 134,719評論 18 139
  • 官方中文版原文鏈接 感謝社區(qū)中各位的大力支持腔剂,譯者再次奉上一點點福利:阿里云產(chǎn)品券媒区,享受所有官網(wǎng)優(yōu)惠,并抽取幸運大...
    HetfieldJoe閱讀 3,661評論 2 27
  • { "Unterminated string literal.": "未終止的字符串文本掸犬。", "Identifi...
    Elbert_Z閱讀 10,851評論 0 2
  • { "Unterminated string literal.": "未終止的字符串文本袜漩。", "Identifi...
    一粒沙隨風飄搖閱讀 10,605評論 0 3
  • 作為一個研究生,會不會有人問及你湾碎,為什么選擇讀研宙攻。乍一想來,還挺難回答的介褥。如果總是解釋不清楚這個問題座掘,卻是對自...
    huxh10閱讀 175評論 0 2