module.exports,exports,export和export default,import與require區別與聯系


還在為module.exports、exports、export和export default,import和require區別與聯系發愁嗎,這一篇基本就夠了!

一、首先搞清楚一個基本問題:

module.exportsexports是屬於CommonJS模塊規范!(不清楚commonjs?大神請這邊逛一逛commonjs規范

exportexport default是屬於ES6語法(不清楚ES6?大神請這邊逛一逛ES6模塊

同樣importrequire分別屬於ES6CommonJS!

二、知道屬於哪一塊的語法了還有一個明確點:

module.exportsexports、exportexport default都是導出模塊;

importrequire則是導入模塊。

所以現在就不要弄混了,module.exports導出對應require導入,export導出對應import導入。

喂!等等,怎么才說到module.exports導出對應require導入,export導出對應import導入,那還有exports和export default呢!?那我們繼續。

三、module.exportsexports的區別與聯系

講到這里就不得不稍微提一下模塊化:

Node應用由模塊組成,采用CommonJS模塊規范。

 

根據這個規范,每個文件就是一個模塊,有自己的作用域。在一個文件里面定義的變量、函數、類,都是私有的,對其他文件不可見。

CommonJS規范規定,每個模塊內部,module變量代表當前模塊。這個變量是一個對象,它的exports屬性(即module.exports)是對外的接口。加載某個模塊,其實是加載該模塊的module.exports屬性。

var x = 5; var addX = function (value) { return value + x; }; module.exports.x = x; module.exports.addX = addX; 

上面代碼通過module.exports輸出變量x和函數addX

require方法用於加載模塊。

var example = require('./example.js'); console.log(example.x); // 5 console.log(example.addX(1)); // 6

 

看了剛剛這段commonjs規范上面的介紹可以知道以下區別與聯系:

 

其實exports變量是指向module.exports,加載模塊實際是加載該模塊的module.exports這等同在每個模塊頭部,有一行這樣的命令。

 

var exports = module.exports; 

 

於是我們可以直接在 exports 對象上添加方法,表示對外輸出的接口,如同在module.exports上添加一樣。注意,不能直接將exports變量指向一個值,因為這樣等於切斷了exports與module.exports的聯系。

三、exportexport default的區別與聯系

模塊功能主要由:exportimport構成export導出模塊的對外接口,import命令導入其他模塊暴露的接口。

export其實和export default就是寫法上面有點差別,一個是導出一個個單獨接口,一個是默認導出一個整體接口。使用import命令的時候,用戶需要知道所要加載的變量名或函數名,否則無法加載。這里就有一個簡單寫法不用去知道有哪些具體的暴露接口名,就用export default命令,為模塊指定默認輸出。

export可以這樣寫

// testA.js var f = 'Miel'; var name = 'Jack'; var data= 1988; export {f, name, data};

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

// 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 defaultimport語句不需要使用大括號;第二組使用export,對應的import語句需要使用大括號,一個模塊只能有一個默認輸出,所以export default只能使用一次。

四、import和require的區別與聯系

看了上面其實已經清楚了,import和require是分別屬於ES6和CommonJS的兩種導入模塊的語法而已。

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM