首頁 > web前端 > js教程 > 主體

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

php中世界最好的语言
發布: 2018-04-16 15:36:40
原創
4166 人瀏覽過

這次帶給大家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中文網其它相關文章!

推薦閱讀:

JS二元樹的先序中序及後序遍歷實作方法

touch事件如何取得滑動距離長度

#

以上是node.js和ES6的exports、module.exports使用詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板
關於我們 免責聲明 Sitemap
PHP中文網:公益線上PHP培訓,幫助PHP學習者快速成長!