詳解export default與require及exports,export區別與聯繫

還在為module.exports、exports、export和export default，import和require區別與聯繫發愁嗎，這篇基本上就夠了！

一、先搞清楚一個基本問題：

module.exports和exports是屬於CommonJS模組規格！ （不清楚commonjs?大神請這邊逛一逛commonjs規格）

#export和export default是屬於ES6文法 （不清楚ES6?大神請這邊逛一逛ES6模組）！

同樣import和require分別屬於ES6和CommonJS！

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

module.exports和exports、export和##export default都是匯出模組；

#import##import和require則是

導入模組。

所以現在就不要搞混了，module.exports導出對應require導入，export導出對應import導入。 餵！等等，怎麼說到module.exports導出對應require導入，export導出對應import導入，那還有exports和export default呢！ ？那我們繼續。 三、module.exports與
exports的差異與聯繫

##講到這裡就得稍微提一下模組化：

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); // 5console.log(example.addX(1)); // 6

看了剛剛這段commonjs規範上面的介紹可以知道以下區別與聯繫：

其實exports變數是指向module.exports，載入模組實際上是加載該模組的

module.exports。這等同在每個模組頭部，有一行這樣的指令。

var exports = module.exports;

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

三、export與export default的差異與聯繫模組功能主要由：export與 import構成

。

export匯出模組的對外接口，import指令匯入其他模組暴露的介面。

export其實和export default就是寫法上面有點差別，一個是導出一個個單獨接口，一個是預設導出一個整體接口。使用

import

指令的時候，使用者需要知道要載入的變數名或函數名，否則無法載入。這裡就有一個簡單寫法不用去知道有哪些具體的暴露介面名，就用

export default指令，為模組指定預設輸出。 export可以這樣寫

<code class=" javascript"><span class="token comment">// testA.js<span class="token keyword">var f <span class="token operator">= <span class="token string">&#39;Miel&#39;<span class="token punctuation">;<span class="token keyword">var name <span class="token operator">= <span class="token string">&#39;Jack&#39;<span class="token punctuation">;<span class="token keyword">var data<span class="token operator">= <span class="token number">1988<span class="token punctuation">;

export <span class="token punctuation">{f<span class="token punctuation">, name<span class="token punctuation">, data<span class="token punctuation">}<span class="token punctuation">;<br/></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></code>

使用

export

指令定義了模組的對外介面以後，其他JS 檔案就可以透過

import

指令來載入這個模組。

<code class=" javascript"><span class="token comment">// main.js
import <span class="token punctuation">{</span></span></code><code class=" javascript"><span class="token comment"><span class="token keyword"><span class="token operator"><span class="token string"><span class="token punctuation"><span class="token keyword"><span class="token operator"><span class="token string"><span class="token punctuation"><span class="token keyword"><span class="token operator"><span class="token number"><span class="token punctuation"><span class="token punctuation">f<span class="token punctuation">, name<span class="token punctuation">, data</span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></code><code class=" javascript"><span class="token comment"><span class="token punctuation"><span class="token punctuation"><span class="token punctuation"><span class="token punctuation">} from <span class="token string">&#39;./testA&#39;<span class="token punctuation">;<br/></span></span></span></span></span></span></span></code>

export default可以這樣寫

<code class=" javascript"><span class="token comment">// export-default.js
export default <span class="token keyword">function <span class="token punctuation">(<span class="token punctuation">) <span class="token punctuation">{
  console<span class="token punctuation">.<span class="token function">log<span class="token punctuation">(<span class="token string">&#39;foo&#39;<span class="token punctuation">)<span class="token punctuation">;<span class="token punctuation">}<br/></span></span></span></span></span></span></span></span></span></span></span></span></code>

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

<code class=" javascript"><span class="token comment">// import-default.js
import customName from <span class="token string">&#39;./export-default&#39;<span class="token punctuation">;<span class="token function">customName<span class="token punctuation">(<span class="token punctuation">)<span class="token punctuation">;<span class="token comment"> // &#39;foo&#39;<br/><br/></span></span></span></span></span></span></span></span></code>

下面比較一下export default和export 輸出。 <strong>可以看到第一組是使用，語句不需要使用大括號；第二組使用，對應的語句需要使用大括號，一個模組只能有一個預設輸出，所以只能使用一次。 </strong><strong></strong>

四、import與require

的差別與連結

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

以上是詳解export default與require及exports,export區別與聯繫的詳細內容。更多資訊請關注PHP中文網其他相關文章！