前言

最近難得有空，決定開(kāi)始重新規(guī)范的學(xué)習(xí)一下node編程。但是引入模塊我看到用 require的方式，再聯(lián)想到咱們的ES6各種export 、export default。

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

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

• require: node 和 es6 都支持的引入
• export / import : 只有es6 支持的導(dǎo)出引入
• module.exports / exports: 只有 node 支持的導(dǎo)出

這一刻起，我覺(jué)得是時(shí)候要把它們之間的關(guān)系都給捋清楚了，不然我得混亂死。話不多少，咱們開(kāi)干??！

node模塊

Node里面的模塊系統(tǒng)遵循的是CommonJS規(guī)范。

那問(wèn)題又來(lái)了，什么是CommonJS規(guī)范呢？

由于js以前比較混亂，各寫(xiě)各的代碼，沒(méi)有一個(gè)模塊的概念，而這個(gè)規(guī)范出來(lái)其實(shí)就是對(duì)模塊的一個(gè)定義。

CommonJS定義的模塊分為: 模塊標(biāo)識(shí)(module)、模塊定義(exports) 、模塊引用(require)

先解釋 exports 和 module.exports

在一個(gè)node執(zhí)行一個(gè)文件時(shí)，會(huì)給這個(gè)文件內(nèi)生成一個(gè) exports和module對(duì)象，

而module又有一個(gè)exports屬性。他們之間的關(guān)系如下圖，都指向一塊{}內(nèi)存區(qū)域。

exports = module.exports = {};

那下面我們來(lái)看看代碼的吧。

//utils.js
let a = 100;

console.log(module.exports); //能打印出結(jié)果為：{}
console.log(exports); //能打印出結(jié)果為：{}

exports.a = 200; //這里辛苦勞作幫 module.exports 的內(nèi)容給改成 {a : 200}

exports = '指向其他內(nèi)存區(qū)'; //這里把exports的指向指走

//test.js

var a = require('/utils');
console.log(a) // 打印為 {a : 200} 

從上面可以看出，其實(shí)require導(dǎo)出的內(nèi)容是module.exports的指向的內(nèi)存塊內(nèi)容，并不是exports的。

簡(jiǎn)而言之，區(qū)分他們之間的區(qū)別就是 exports 只是 module.exports的引用，輔助后者添加內(nèi)容用的。

用白話講就是，exports只輔助module.exports操作內(nèi)存中的數(shù)據(jù)，辛辛苦苦各種操作數(shù)據(jù)完，累得要死，結(jié)果到最后真正被require出去的內(nèi)容還是module.exports的，真是好苦逼啊。

其實(shí)大家用內(nèi)存塊的概念去理解，就會(huì)很清楚了。

然后呢，為了避免糊涂，盡量都用 module.exports 導(dǎo)出，然后用require導(dǎo)入。

ES中的模塊導(dǎo)出導(dǎo)入

說(shuō)實(shí)話，在es中的模塊，就非常清晰了。不過(guò)也有一些細(xì)節(jié)的東西需要搞清楚。

比如 export 和 export default，還有 導(dǎo)入的時(shí)候，import a from ..,import {a} from ..，總之也有點(diǎn)亂，那么下面我們就開(kāi)始把它們捋清楚吧。

export 和 export default

首先我們講這兩個(gè)導(dǎo)出，下面我們講講它們的區(qū)別

• export與export default均可用于導(dǎo)出常量、函數(shù)、文件、模塊等
• 在一個(gè)文件或模塊中，export、import可以有多個(gè)，export default僅有一個(gè)
• 通過(guò)export方式導(dǎo)出，在導(dǎo)入時(shí)要加{ }，export default則不需要
• export能直接導(dǎo)出變量表達(dá)式，export default不行。

下面咱們看看代碼去驗(yàn)證一下

testEs6Export.js

'use strict'
//導(dǎo)出變量
export const a = '100'; 

 //導(dǎo)出方法
export const dogSay = function(){ 
 console.log('wang wang');
}

 //導(dǎo)出方法第二種
function catSay(){
 console.log('miao miao'); 
}
export { catSay };

//export default導(dǎo)出
const m = 100;
export default m; 
//export defult const m = 100;// 這里不能寫(xiě)這種格式。

index.js

//index.js
'use strict'
var express = require('express');
var router = express.Router();

import { dogSay, catSay } from './testEs6Export'; //導(dǎo)出了 export 方法 
import m from './testEs6Export'; //導(dǎo)出了 export default 

import * as testModule from './testEs6Export'; //as 集合成對(duì)象導(dǎo)出



/* GET home page. */
router.get('/', function(req, res, next) {
 dogSay();
 catSay();
 console.log(m);
 testModule.dogSay();
 console.log(testModule.m); // undefined , 因?yàn)?as 導(dǎo)出是 把 零散的 export 聚集在一起作為一個(gè)對(duì)象，而export default 是導(dǎo)出為 default屬性。
 console.log(testModule.default); // 100
 res.send('恭喜你，成功驗(yàn)證');
});

module.exports = router;

從上面可以看出，確實(shí)感覺(jué) ES6的模塊系統(tǒng)非常靈活的。

代碼地址

GitHub: https://github.com/XuXiaoGH/exportImportTest

本地下載：http://xiazai.jb51.net/201710/yuanma/exportImportTest(jb51.net).rar

參考文獻(xiàn)

1.老樹(shù)新芽，在ES6下使用Express

2.exports 和 module.exports 的區(qū)別
3.module.exports與exports,export與export default之間的關(guān)系

感謝這三位前輩的分享。

總結(jié)

以上就是這篇文章的全部?jī)?nèi)容了，希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，如果有疑問(wèn)大家可以留言交流，謝謝大家對(duì)腳本之家的支持。

最新評(píng)論