首頁 > 文章 > web前端 > node.js和ES6的exports、module.exports使用詳解

node.js和ES6的exports、module.exports使用詳解

php中世界最好的语言原創: 2018-04-16 15:36:404172瀏覽

這次帶給大家node.js和ES6的exports、module.exports使用詳解，node.js和ES6exports、module.exports使用的注意事項有哪些，下面就是實戰案例，一起來看一下。

# 阿西吧，頭都大了....

# 頭大完了，那我們坐下來先理理他們的使用範圍。

require: node 和es6 都支援的引入
export / import : 只有es6 支援的導出引入
module.exports / exports: 只有node 支援的導出

這一刻起，我覺得是時候要把它們之間的關係都給捋清楚了，不然我得混亂死。話不多少，咱們開乾！！

node模組

Node裡面的模組系統遵循的是CommonJS規範。

那問題又來了，什麼是CommonJS規範呢？

由於js以前比較混亂，各寫各的程式碼，沒有一個模組的概念，而這個規範出來其實就是對模組的一個定義。

CommonJS定義的模組分為: 模組識別(module)、模組定義(exports) 、模組引用(require)

先解釋 exports 和 module.exports

在一個node執行一個檔案時，會為這個檔案內產生一個 exports和module物件，

而module又有一個exports屬性。他們之間的關係如下圖，都指向一塊{}記憶體區域。

exports = module.exports = {};

那下面我們來看看程式碼的吧。

//utils.js
let a = 100;
console.log(module.exports); //能打印出结果为：{}
console.log(exports); //能打印出结果为：{}
exports.a = 200; //这里辛苦劳作帮 module.exports 的内容给改成 {a : 200}
exports = '指向其他内存区'; //这里把exports的指向指走
//test.js
var a = require('/utils');
console.log(a) // 打印为 {a : 200}

從上面可以看出，其實require導出的內容是module.exports的指向的記憶體塊內容，並不是exports的。

簡而言之，區分他們之間的差異就是 exports 只是 module.exports的引用，輔助後者添加內容用的。

用白話講就是，exports只輔助module.exports操作內存中的數據，辛辛苦苦各種操作數據完，累得要死，結果到最後真正被require出去的內容還是module.exports的，真是好苦逼啊。

其實大家用記憶體塊的概念去理解，就會很清楚了。

然後呢，為了避免糊塗，盡量用 module.exports 匯出，再用require導入。

ES中的模組匯出導入

# 說實話，在es中的模組，就非常清晰了。不過也有一些細節的東西要搞清楚。

例如 export 和 export default，還有導入的時候，import a from ..,import {a} from ..，總之也有點亂，那麼下面我們就開始把它們捋清楚吧。

export 和 export default

首先我們先講這兩個導出，下面我們講它們的差別

export與export default皆可用於匯出常數、函數、檔案、模組等
在一個檔案或模組中，export、import可以有多個，export default僅有一個
透過export方式匯出，在匯入時要加{ }，export default則不需要
export能直接匯出變數表達式，export default不行。

# 下面咱們看看程式碼去驗證一下

# testEs6Export.js

'use strict'
//导出变量
export const a = '100'; 
 //导出方法
export const dogSay = function(){ 
 console.log('wang wang');
}
 //导出方法第二种
function catSay(){
 console.log('miao miao'); 
}
export { catSay };
//export default导出
const m = 100;
export default m; 
//export defult const m = 100;// 这里不能写这种格式。

index.js

//index.js
'use strict'
var express = require('express');
var router = express.Router();
import { dogSay, catSay } from './testEs6Export'; //导出了 export 方法 
import m from './testEs6Export'; //导出了 export default 
import * as testModule from './testEs6Export'; //as 集合成对象导出
/* GET home page. */
router.get('/', function(req, res, next) {
 dogSay();
 catSay();
 console.log(m);
 testModule.dogSay();
 console.log(testModule.m); // undefined , 因为 as 导出是 把 零散的 export 聚集在一起作为一个对象，而export default 是导出为 default属性。
 console.log(testModule.default); // 100
 res.send('恭喜你，成功验证');
});
module.exports = router;

從上面可以看出，確實感覺到 ES6的模組系統非常靈活的。

相信看了本文案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！