module.exports,exports,export和export default,import與require區(qū)別與聯(lián)系

一、基礎(chǔ)概念

module.exports和exports是屬于CommonJS模塊規(guī)范F教簟(commonjs規(guī)范

export和export default是屬于ES6語(yǔ)法(ES6模塊)浓瞪!

同樣import和require分別屬于ES6和CommonJS访诱!

二筛峭、明確點(diǎn)

module.exports和exports宛徊、export和export default都是導(dǎo)出模塊崔梗;

import和require則是導(dǎo)入模塊夜只;

module.exports導(dǎo)出對(duì)應(yīng)require導(dǎo)入,export導(dǎo)出對(duì)應(yīng)import導(dǎo)入炒俱;

三盐肃、module.exports和exports的區(qū)別與聯(lián)系

Node應(yīng)用由模塊組成,采用CommonJS模塊規(guī)范权悟。
根據(jù)這個(gè)規(guī)范砸王,每個(gè)文件就是一個(gè)模塊,有自己的作用域峦阁。在一個(gè)文件里面定義的變量谦铃、函數(shù)、類榔昔,都是私有的驹闰,對(duì)其他文件不可見。

CommonJS規(guī)范規(guī)定撒会,每個(gè)模塊內(nèi)部嘹朗,module變量代表當(dāng)前模塊。這個(gè)變量是一個(gè)對(duì)象诵肛,它的exports屬性(即module.exports)是對(duì)外的接口屹培。加載某個(gè)模塊,其實(shí)是加載該模塊的module.exports屬性怔檩。

var x = 5;
var addX = function (value) {
  return value + x;
};
module.exports.x = x;
module.exports.addX = addX;
上面代碼通過module.exports輸出變量x和函數(shù)addX褪秀。

require方法用于加載模塊。

var example = require('./example.js');

console.log(example.x); // 5
console.log(example.addX(1)); // 6

通過上面的例子我們就可以明白以下區(qū)別與聯(lián)系:

exports變量是指向module.exports薛训,加載模塊實(shí)際是加載該模塊的module.exports媒吗。這等同在每個(gè)模塊頭部,有一行這樣的命令乙埃。

var exports = module.exports;

于是我們可以直接在 exports 對(duì)象上添加方法闸英,表示對(duì)外輸出的接口锯岖,如同在module.exports上添加一樣。注意自阱,不能直接將exports變量指向一個(gè)值嚎莉,因?yàn)檫@樣等于切斷了exports與module.exports的聯(lián)系。

四沛豌、export和export default的區(qū)別與聯(lián)系

模塊功能主要由:export和import構(gòu)成趋箩。export導(dǎo)出模塊的對(duì)外接口,import命令導(dǎo)入其他模塊暴露的接口加派。

export其實(shí)和export default就是寫法上面有點(diǎn)差別叫确,一個(gè)是導(dǎo)出一個(gè)個(gè)單獨(dú)接口,一個(gè)是默認(rèn)導(dǎo)出一個(gè)整體接口芍锦。使用import命令的時(shí)候竹勉,用戶需要知道所要加載的變量名或函數(shù)名,否則無(wú)法加載娄琉。這里就有一個(gè)簡(jiǎn)單寫法不用去知道有哪些具體的暴露接口名次乓,就用export default命令,為模塊指定默認(rèn)輸出孽水。

export可以這樣寫

// testA.js
var f = 'Miel';
var name = 'Jack';
var data= 1988;

export {f, name, data};

使用export命令定義了模塊的對(duì)外接口以后票腰,其他 JS 文件就可以通過import命令加載這個(gè)模塊。

// main.js
import {f, name, data} from './testA';

export default可以這樣寫

// export-default.js
export default function () {
  console.log('foo');
}
// 或者寫成

function foo() {
  console.log('foo');
}
export default foo;
// import-default.js
import customName from './export-default';
customName(); // 'foo'

下面比較一下export default和export 輸出女气。

// 第一組
export default function car() { // 輸出
  // ...
}

import car from 'car'; // 輸入

// 第二組
export function car2() { // 輸出
  // ...
};

import {car2} from 'car2'; // 輸入

可以看到第一組是使用export default杏慰,import語(yǔ)句不需要使用大括號(hào);第二組使用export炼鞠,對(duì)應(yīng)的import語(yǔ)句需要使用大括號(hào)缘滥,一個(gè)模塊只能有一個(gè)默認(rèn)輸出,所以export default只能使用一次谒主。

五朝扼、import和require的區(qū)別與聯(lián)系

看了上面其實(shí)已經(jīng)清楚了,import和require是分別屬于ES6和CommonJS的兩種導(dǎo)入模塊的語(yǔ)法而已霎肯。

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末吟税,一起剝皮案震驚了整個(gè)濱河市,隨后出現(xiàn)的幾起案子姿现,更是在濱河造成了極大的恐慌,老刑警劉巖肖抱,帶你破解...
    沈念sama閱讀 218,607評(píng)論 6 507
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件备典,死亡現(xiàn)場(chǎng)離奇詭異,居然都是意外死亡意述,警方通過查閱死者的電腦和手機(jī)提佣,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 93,239評(píng)論 3 395
  • 文/潘曉璐 我一進(jìn)店門吮蛹,熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái),“玉大人拌屏,你說(shuō)我怎么就攤上這事潮针。” “怎么了倚喂?”我有些...
    開封第一講書人閱讀 164,960評(píng)論 0 355
  • 文/不壞的土叔 我叫張陵每篷,是天一觀的道長(zhǎng)。 經(jīng)常有香客問我端圈,道長(zhǎng)焦读,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 58,750評(píng)論 1 294
  • 正文 為了忘掉前任舱权,我火速辦了婚禮矗晃,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘宴倍。我一直安慰自己张症,他們只是感情好,可當(dāng)我...
    茶點(diǎn)故事閱讀 67,764評(píng)論 6 392
  • 文/花漫 我一把揭開白布鸵贬。 她就那樣靜靜地躺著俗他,像睡著了一般。 火紅的嫁衣襯著肌膚如雪恭理。 梳的紋絲不亂的頭發(fā)上拯辙,一...
    開封第一講書人閱讀 51,604評(píng)論 1 305
  • 那天,我揣著相機(jī)與錄音颜价,去河邊找鬼涯保。 笑死,一個(gè)胖子當(dāng)著我的面吹牛周伦,可吹牛的內(nèi)容都是我干的夕春。 我是一名探鬼主播,決...
    沈念sama閱讀 40,347評(píng)論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼专挪,長(zhǎng)吁一口氣:“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼及志!你這毒婦竟也來(lái)了?” 一聲冷哼從身側(cè)響起寨腔,我...
    開封第一講書人閱讀 39,253評(píng)論 0 276
  • 序言:老撾萬(wàn)榮一對(duì)情侶失蹤速侈,失蹤者是張志新(化名)和其女友劉穎,沒想到半個(gè)月后迫卢,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體倚搬,經(jīng)...
    沈念sama閱讀 45,702評(píng)論 1 315
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 37,893評(píng)論 3 336
  • 正文 我和宋清朗相戀三年乾蛤,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了每界。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片捅僵。...
    茶點(diǎn)故事閱讀 40,015評(píng)論 1 348
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡,死狀恐怖眨层,靈堂內(nèi)的尸體忽然破棺而出庙楚,到底是詐尸還是另有隱情,我是刑警寧澤趴樱,帶...
    沈念sama閱讀 35,734評(píng)論 5 346
  • 正文 年R本政府宣布馒闷,位于F島的核電站,受9級(jí)特大地震影響伊佃,放射性物質(zhì)發(fā)生泄漏窜司。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,352評(píng)論 3 330
  • 文/蒙蒙 一航揉、第九天 我趴在偏房一處隱蔽的房頂上張望塞祈。 院中可真熱鬧,春花似錦帅涂、人聲如沸议薪。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,934評(píng)論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)斯议。三九已至,卻和暖如春醇锚,著一層夾襖步出監(jiān)牢的瞬間哼御,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 33,052評(píng)論 1 270
  • 我被黑心中介騙來(lái)泰國(guó)打工焊唬, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留恋昼,地道東北人。 一個(gè)月前我還...
    沈念sama閱讀 48,216評(píng)論 3 371
  • 正文 我出身青樓赶促,卻偏偏與公主長(zhǎng)得像液肌,于是被迫代替她去往敵國(guó)和親。 傳聞我的和親對(duì)象是個(gè)殘疾皇子鸥滨,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 44,969評(píng)論 2 355

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