js模塊導入/導出大全

說明

• module.exports與exports是CommonJS的規范
• export與export default是es6規范
• require 是 AMD規范引入方式
• import是es6的一個語法標准

---

module.exports與exports

• module變量代表當前模塊。這個變量是一個對象，module對象會創建一個叫exports的屬性，這個屬性的默認值是一個空的對象；

module.exports.aa="我是aa";
module.exports.bb="我是bb";
//上邊這段代碼就相當於一個對象
{
  "aa":"我是aa",
  "bb":"我是bb",
}

• 引用方法

var req=require("./app.js");
req.aa      //這個值是 "我是aa"

• 而exports只是module.exports的一個引用，可以理解為：

var exports = module.exports;

• 但是這個兩個還是有一定區別的，因為exports只是module.exports的一個引用，所以module.exports可以導出一個匿名函數，而exports不可以。因為這會切斷和modeule.exports的聯系。
• 如果不是很理解的話，下面舉例說明（需要先明白引用數據類型和基礎數據類型）：

    var m={}
    m.e1={}
    var e2=m.e1;
    e2.aa=1
    console.log(m.e1.aa)//打印1
    e2=function(){
      return 123;
    }
    console.log(m.e1)//打印{aa:1}
    console.log(e2)//打印 ƒ (){return 123;}
    //也就是說如果給exports導出匿名函數，就會重寫exports引用地址指向

• 也就是說也不能這樣寫exports= { name,say }，它同樣會改變exports地址指向

---

！

export與export default

二者的區別有以下幾點：

• export default在一個模塊中只能有一個，當然也可以沒有。export在一個模塊中可以有多個。
• export default的對象、變量、函數、類，可以沒有名字。export的必須有名字。
• export default對應的import和export有所區別

1.export寫法

var name="我是電腦"；
var say=function(){
 console.log("我可以干很多事")；
}
export {name，say}；
//也可以直接一個一個的export但是必須得有名字
export const a=1；
export function data(){
　　return data;
}
//其他頁面引入時必須這樣
import {name，say} from "./app.js"

2.export default

//可以沒有函數名字
export default function(){
　　return data;
}
//這里export不能這樣導出
export default const a=12；//報錯
//應該這樣導出
const a=12;
export default a
//其他頁面引入時必須這樣
import data from "./app.js"

import和require

調用時間

• require是運行時調用，所以require理論上可以運用在代碼的任何地方
• import是編譯時調用，所以必須放在文件開頭

本質

• require是賦值過程，其實require的結果就是對象、數字、字符串、函數等，再把require的結果賦值給某個變量
• import是解構過程，但是目前所有的引擎都還沒有實現import，我們在node中使用babel支持ES6，也僅僅是將ES6轉碼為ES5再執行，import語法會被轉碼為require

對比

require/exports

• 遵循 CommonJS/AMD，只能在運行時確定模塊的依賴關系及輸入/輸出的變量，無法進行靜態優化
• 用法只有以下三種簡單的寫法：

const fs = require('fs')
exports.fs = fs
module.exports = fs

import/export

• 遵循 ES6 規范，支持編譯時靜態分析，便於JS引入宏和類型檢驗。動態綁定。
• 寫法就比較多種多樣：

import fs from 'fs'
import {default as fs} from 'fs'
import * as fs from 'fs'
import {readFile} from 'fs'
import {readFile as read} from 'fs'
import fs, {readFile} from 'fs'
export default fs
export const fs
export function readFile
export {readFile, read}
export * from 'fs'

注意

• 通過require引入基礎數據類型時，屬於復制該變量。
• 通過require引入復雜數據類型時，數據淺拷貝該對象。
• 出現模塊之間的循環引用時，會輸出已經執行的模塊，而未執行的模塊不輸出（比較復雜）
• CommonJS模塊默認export的是一個對象，即使導出的是基礎數據類型