ES6 import和export

export

在es6中一個文件可以默認為一個模塊航闺,模塊通過export向外暴露接口,實現(xiàn)模塊間交互等功能

1. export相關(guān)語法

exportDemo.js文件

export var m = 1;
// 等價于
var m = 1;
export { m }

// 導(dǎo)出多個
var a = 1;
var b = 2;
var c = 3;
export { a, b, c }
// 導(dǎo)出對象
export const student = {
  name: 'Megan',
  age: 18
}
// 導(dǎo)出函數(shù)
export function add(a, b) {
  return a + b;
}

錯誤寫法1

var k = 1;
export k;

對應(yīng)正確寫法

export { k }

錯誤寫法2

const obj = {
  id: 1,
  value: 'lalala'
};
export obj;

對應(yīng)正確寫法

export { obj };

錯誤寫法3

function sum(a, b){
  return a + b;
}
export sum;

對應(yīng)正確寫法

export { sum };

導(dǎo)出接口別名

const person = {
  name: '張呆',
  age: 18,
  gender: "male"
}
export { person as boy }
2. export default

exportDemo.js

//一個文件即模塊中只能存在一個export default語句,導(dǎo)出一個當(dāng)前模塊的默認對外接口
export default var i = 0;
3. import

以上述exportDemo.js為例,在importDemo.js中利用import進行導(dǎo)入

import variable from './exportDemo';
console.log(variable); // 0;

代碼解釋:上述import語句僅僅導(dǎo)入了exportDemo.js文件中定義為默認的接口即i = 0,所以打印輸出0

import variable, { sum, boy } from './exportDemo';
console.log(variable); // 0;
console.log(sum);// function(a, b) { return a + b; }
console.log(boy); // { name: '張呆', age: 18, gender: male}
4. 相關(guān)注意

import和export只能出現(xiàn)在模塊的最外層(頂層)結(jié)構(gòu)中,否則報錯

由于es6模塊是靜態(tài)加載的薇芝,因此import和export不能出現(xiàn)在判斷等動態(tài)語句中

5. ES6 Module

es6 module 中模塊加載方式是靜態(tài)加載,因此import和export不能出現(xiàn)在判斷等動態(tài)語句
采用import獲取的是模塊接口的引用丰嘉,當(dāng)模塊內(nèi)部發(fā)生改變是夯到,import出的接口也會對應(yīng)改變【與commonjs規(guī)范不同,commonjs中獲得的是接口運行結(jié)果的緩存】
es6 module內(nèi)部自動采用嚴格模式
對于es6 module的其他詳細內(nèi)容參考阮一峰老師的 ES6 Module

6. commonjs規(guī)范

commonJS規(guī)范規(guī)定饮亏,每一個模塊內(nèi)部耍贾,module變量代表當(dāng)前模塊,這個變量是一個對象克滴,它的exports屬性(即module.exports)是對外的接口,加載某個模塊其實就是加載module.exports屬性

// test.js
var x = 5;
var add = function(a, b){
  return a + b;
}
module.exports = {x, add}

在另一個文件中加載test.js

var test = require('./test.js');
console.log(test.x); // 5
console.log(test.add(1, 2)); // 3

使用import語法加載commonjs模塊

// commonjsDemo.js
const textConst = {
  COPY: "復(fù)制",
  RUN: "運行"
}
module.exports textConst
// importCommonjsDemo.js
import { COPY, RUN } from './commonjsDemo'
console.log(COPY); // 復(fù)制
console.log(RUN); // 運行
6.1 module對象

Node中提供了一個Module構(gòu)建函數(shù)优床,所有模塊都是Module的實例

function Module(...){
  this.id = id;
 this.exports = {};
 this.parent = parent;
 // ....
}

每個模塊內(nèi)部劝赔,都有一個module對象,表示當(dāng)前模塊胆敞,具有以下屬性

module.id 模塊的識別符着帽,通常是帶有絕對路徑的模塊文件名
module.filename 模塊的文件名杂伟,帶有絕對路徑
module.loaded 返回一個布爾值,表示模塊是否已經(jīng)加載完成
module.parent 返回一個對象仍翰,表示調(diào)用該模塊的模塊
module.children 返回一個數(shù)組赫粥,表示該模塊要用到的其他模塊
module.exports 表示模塊對外輸出的值

module.exports
  該屬性表示當(dāng)前模塊對外的接口,其他模塊加載時予借,實際上是讀取module.exports變量
exports
 為了方便越平,node為每個模塊提供了一個exports變量,指向module.exports灵迫。這等同于在每個模塊的頭部秦叛,存在這樣一行命令
var exports = module.exports;
 這樣做的結(jié)果就是在輸出接口的同時,可以向exports對象上添加方法瀑粥;需要注意的是不要將exports重新指向別的值挣跋,否則將會切斷exports和module.exports之間的聯(lián)系

6.2 require命令

基本功能是讀入并執(zhí)行一個javascript文件,并返回該模塊的exports對象狞换,如果沒有指定模塊路徑避咆,則報錯
require的加載規(guī)則
后綴默認為.js
當(dāng)nodejs中遇到require(X)時,按照下面的順序進行處理

如果X為內(nèi)置模塊修噪,返回該模塊查库,不再繼續(xù)執(zhí)行
如果X以"./"或者"/"或者"../"開頭
 根據(jù)X所在父模塊確定X的絕對路徑
 將X當(dāng)成文件,依次查找下面的問題件割按,只要其中一個存在膨报,則返回存在的文件,不再繼續(xù)執(zhí)行
  X
  X.js

X.json
  X.node
 將X當(dāng)成目錄适荣,依次查找下面文件现柠,只要其中一個存在,就返回該文件弛矛,不再繼續(xù)執(zhí)行
  X/package.json
  X/index.js
  X/index.json
  X/index.node
如果X不帶路徑
 根據(jù)X所在的父模塊够吩,確定X可能的安裝目錄
 依次在每個目錄中,將X當(dāng)做文件名或者目錄名加載
拋出"not found"

參考:http://www.ruanyifeng.com/blog/2015/05/require.html
參考:http://javascript.ruanyifeng.com/nodejs/module.html
本文目的僅僅是為了個人查找閱讀等提供方便

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末丈氓,一起剝皮案震驚了整個濱河市周循,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌万俗,老刑警劉巖湾笛,帶你破解...
    沈念sama閱讀 207,113評論 6 481
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異闰歪,居然都是意外死亡嚎研,警方通過查閱死者的電腦和手機,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 88,644評論 2 381
  • 文/潘曉璐 我一進店門库倘,熙熙樓的掌柜王于貴愁眉苦臉地迎上來临扮,“玉大人论矾,你說我怎么就攤上這事「擞拢” “怎么了贪壳?”我有些...
    開封第一講書人閱讀 153,340評論 0 344
  • 文/不壞的土叔 我叫張陵,是天一觀的道長蚜退。 經(jīng)常有香客問我闰靴,道長,這世上最難降的妖魔是什么关霸? 我笑而不...
    開封第一講書人閱讀 55,449評論 1 279
  • 正文 為了忘掉前任煌妈,我火速辦了婚禮沃琅,結(jié)果婚禮上熄阻,老公的妹妹穿的比我還像新娘跪另。我一直安慰自己,他們只是感情好佳遣,可當(dāng)我...
    茶點故事閱讀 64,445評論 5 374
  • 文/花漫 我一把揭開白布识埋。 她就那樣靜靜地躺著,像睡著了一般零渐。 火紅的嫁衣襯著肌膚如雪窒舟。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 49,166評論 1 284
  • 那天诵盼,我揣著相機與錄音惠豺,去河邊找鬼。 笑死风宁,一個胖子當(dāng)著我的面吹牛洁墙,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播戒财,決...
    沈念sama閱讀 38,442評論 3 401
  • 文/蒼蘭香墨 我猛地睜開眼热监,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了饮寞?” 一聲冷哼從身側(cè)響起孝扛,我...
    開封第一講書人閱讀 37,105評論 0 261
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎幽崩,沒想到半個月后苦始,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 43,601評論 1 300
  • 正文 獨居荒郊野嶺守林人離奇死亡慌申,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 36,066評論 2 325
  • 正文 我和宋清朗相戀三年陌选,在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 38,161評論 1 334
  • 序言:一個原本活蹦亂跳的男人離奇死亡柠贤,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出类缤,到底是詐尸還是另有隱情臼勉,我是刑警寧澤,帶...
    沈念sama閱讀 33,792評論 4 323
  • 正文 年R本政府宣布餐弱,位于F島的核電站宴霸,受9級特大地震影響,放射性物質(zhì)發(fā)生泄漏膏蚓。R本人自食惡果不足惜瓢谢,卻給世界環(huán)境...
    茶點故事閱讀 39,351評論 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望驮瞧。 院中可真熱鬧氓扛,春花似錦、人聲如沸论笔。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,352評論 0 19
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽狂魔。三九已至蒜埋,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間最楷,已是汗流浹背整份。 一陣腳步聲響...
    開封第一講書人閱讀 31,584評論 1 261
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留籽孙,地道東北人烈评。 一個月前我還...
    沈念sama閱讀 45,618評論 2 355
  • 正文 我出身青樓,卻偏偏與公主長得像蚯撩,于是被迫代替她去往敵國和親础倍。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點故事閱讀 42,916評論 2 344

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