6.exports、module.exports、export、export defalut

PursuitFreeDom發表於2019-02-16
Export

6.exports、module.exports、export、export defalut

1.exports、module.exports

首先exports和module.exports是出自於CommonJs規範裡面的,熟悉NodeJs的朋友或許知道，廢話不多說！
根據這個規範，每個檔案就是一個模組，有自己的作用域。在一個檔案裡面定義的變數、函式、類，都是私有的，對
其 他檔案不可見。CommonJS規範規定，每個模組內部，module變數代表當前模組。這個變數是一個物件，它的
exports屬 性（即 module.exports）是對外的介面。載入某個模組，其實是載入該模組的module.exports屬
性,module.exports匯出對應require匯入，export匯出對應import匯入。。

var x = 5;
var addX = (value) => value + x
module.exports.x = x;
module.exports.addX = addX;

上面程式碼通過module.exports輸出變數x和函式addX。

require方法用於載入模組。

var example = require(`./example.js`);
console.log(example.x);         // 5
console.log(example.addX(1));   // 6

看了剛剛這段commonjs規範上面的介紹可以知道以下區別與聯絡：
其實exports變數是指向module.exports，載入模組實際是載入該模組的module.exports。這等同在每個模組頭
部，有一行這樣的命令。

var exports = module.exports;

於是我們可以直接在 exports 物件上新增方法，表示對外輸出的介面，如同在module.exports上新增一樣。注
意，不能直接將exports變數指向一個值，因為這樣等於切斷了exports與module.exports的聯絡。

2.export、export default

export和export default是屬於ES6語法
模組功能主要由：export和import構成。export匯出模組的對外介面，import命令匯入其他模組暴露的介面。
export其實和export default就是寫法上面有點差別，一個是匯出一個個單獨介面，一個是預設匯出一個整體接
口。使用import命令的時候，使用者需要知道所要載入的變數名或函式名，否則無法載入。這裡就有一個簡單寫法不用
去知道有哪些具體的暴露介面名，就用export default命令，為模組指定預設輸出。

demo.js

export a = "1";
export b = (a)=> a + b;
export c = {
    d: `3`,
    e: `4`
}

export匯出的變數或物件或方法，則對應的需要用import來匯入

import { a, b, c } from `./demo.js`
//或者等價
import *as newName from `./demo.js`

針對export變數匯出,es6 的規範 import * as obj from “xxx” 會將 “xxx” 中所有 export 匯出的內容組合成一個物件返回

export defalut

 demo1.js

export defalut{
    a: `2`,
    add(b,c) {
        return b + c
    }
}
import 匯入
import whatever from `./demo1.js`

但一個檔案中只能使用一次export defalut

相關文章