第6題- module.exports、exports、export三者的區別

面試題目：

module.exports、exports、export 三者的區別是什麼？

答案解析：

模塊化進程

想要了解三者的區別，須要瞭解下他們產生的背景。

之前JS自己沒有模塊化的概念和相關API，開發者通常都是在html中引入多個script標籤，業務邏輯複雜時，就會帶來不少問題，好比：

1. 全局做用域下容易形成變量衝突
2. 文件只能按照script的書寫順序進行加載
3. 開發人員必須主觀解決模塊和代碼庫的依賴關係
4. 在大型項目中各類資源難以管理，長期積累的問題致使代碼庫混亂不堪

2009年 Node.js出現，node裏面的模塊系統遵循的是CommonJS規範

CommonJS定義的模塊分爲: 模塊標識(module)、模塊定義(exports) 、模塊引用(require)

CommonJS是主要爲了JS在後端的表現制定的，是不適合前端的 ，因此出現了AMD、CMD、UMD等等一系列能夠在瀏覽器等終端實現的異步加載的模塊化方案，咱們最熟悉的require.js就是AMD的產物，seajs是CMD的產物。

exports和module.exports

1. node中一個文件被認爲是一個模塊，執行時會給文件內生成exports和module兩個對象，module對象內部會建立一個exports屬性。
2. 二者間的關係能夠認爲是 exports = module.exports = {};

一個node模塊，咱們能夠認爲首行定義了exports和module.exports兩個對象：

// module1.js

let a = 2;
let add = function () {
    a++;
}
console.log(module.exports); //能打印出結果爲：{}
console.log(exports); //能打印出結果爲：{}


// module1.js 可改寫爲以下代碼
var exports = module.exports = {};
let a = 2;
let add = function () {
    a++;
}
console.log(module.exports); //能打印出結果爲：{}
console.log(exports); //能打印出結果爲：{}

複製代碼

既然exports和module.exports兩個對象指向同一個對象，require導入的是誰呢？一塊兒看下下面代碼

// test.js

module.exports = {
    a: 100
}
exports = {
    a: 200
}

// app.js
let test = require('./test');
console.log(test); // 打印爲 {a : 100}

複製代碼

從上面可知，require導出的內容是module.exports的指向的內存塊內容，並非exports的。

ES6中的模塊導出 export

export 是ES6中的導出，與它對應的導入是 import，常見的還有一個export default 下面咱們講講兩者的區別

1. export與export default都可用於導出常量、函數、文件、模塊等
2. 在一個文件或模塊中，export、import能夠有多個，export default僅有一個
3. 經過export方式導出，在導入時要加{ }，export default則不須要
4. export能直接導出變量表達式，export default不行。

總結

綜上可知：

1. export / import： 是ES6中的導入導出。
2. module.exports / exports: 只有 node 支持的導出，兩者指向同一個對象。與他們對應的導入是require，模塊最終導入的是module.exports對象。

目前的瀏覽器幾乎都不支持 ES6 的模塊機制，因此咱們要用 Babel 把 ES6 的模塊機制轉換成 CommonJS 的形式，而後使用 Browserify 或者 Webpack 這樣的打包工具把他們打包起來。達到模塊化加載效果相似於 seajs代碼

---

掃一掃 關注個人公衆號【前端名獅】，更多精彩內容陪伴你！