module.exports與exports,export與export default之間的關係和區別

首先咱們要明白一個前提,CommonJS模塊規範和ES6模塊規範徹底是兩種不一樣的概念。javascript

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

CommonJS模塊規範

Node應用由模塊組成,採用CommonJS模塊規範。html

根據這個規範,每一個文件就是一個模塊,有本身的做用域。在一個文件裏面定義的變量、函數、類,都是私有的,對其餘文件不可見。java

CommonJS規範規定,每一個模塊內部,module變量表明當前模塊。這個變量是一個對象,它的exports屬性(即module.exports)是對外的接口。加載某個模塊,實際上是加載該模塊的module.exports屬性。node

CommonJS規範,http://javascript.ruanyifeng.com/nodejs/module.htmles6

ES6模塊規範

不一樣於CommonJS,ES6使用 export 和 import 來導出、導入模塊。express

ES6 Module 的語法,http://es6.ruanyifeng.com/#docs/module函數

node模塊

Node裏面的模塊系統遵循的是CommonJS規範。
那問題又來了,什麼是CommonJS規範呢?
因爲js之前比較混亂,各寫各的代碼,沒有一個模塊的概念,而這個規範出來其實就是對模塊的一個定義。ui

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

先解釋 exports 和 module.exports
在一個node執行一個文件時,會給這個文件內生成一個 exportsmodule對象,
module又有一個exports屬性。他們之間的關係以下圖,都指向一塊{}內存區域。code

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

首先咱們講這兩個導出,下面咱們講講它們的區別

1、export與export default都可用於導出常量、函數、文件、模塊等
2、在一個文件或模塊中,export、import能夠有多個,export default僅有一個
3、經過export方式導出,在導入時要加{ },export default則不須要
4、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的模塊系統很是靈活的。

相關文章
相關標籤/搜索