JavaScript中AMD和ES6模塊的導入導出對比

咱們前端在開發過程當中常常會遇到導入導出功能， 在導入時，有時候是require，有時候是import 在導出時，有時候是exports，module.exports，有時候是export，export default 今天咱們對這些內容進行簡單的介紹

import，export，export default

import，export，export default屬於ES6規範

import

import 是在編譯過程當中執行 也就是說是在代碼執行前執行， 好比說，import後面的路徑寫錯了，在運行代碼前就會拋錯， 在編寫代碼時，import不是必定要寫在js的最前面 import命令具備提高效果，會提高到整個模塊的頭部，首先執行。（是在編譯階段執行的） import是靜態執行的 由於import是靜態執行的，不能使用表達式和變量，即在運行時才能拿到結果的語法結構 好比，不能再if和else中使用import 再好比，import後的from的路徑，能夠是相對路徑，能夠是絕對路徑，可是不能是根據變量得來的路徑

//import 路徑不能夠爲變量
var url = './output'
  import {
    a,
    b
  } from url//這麼寫會報錯
//------------------
//import 的引入與否不能和代碼邏輯向關聯
let status= true
if(status){
	 import {
    a,
    b
  } from url//這麼寫會報錯
}
複製代碼

import可使用as進行重命名 import 的有不少種導入方式，

import foo from './output'
  import {b as B} from './output'
  import * as OBj from './output'
  import {a} from './output'
  import {b as BB} from './output'
  import c, {d} from './output'
複製代碼

導入的方式和導出有些關聯，咱們在下面說導出的時候，對以上這些導入方式進行逐一介紹

exoprt和export default

將exoprt和export default放在一塊兒，由於它們關聯性很大 簡單說：export是導出，export default是默認導出 一個模塊能夠有多個export，可是隻能有一個export default，export default能夠和多個export共存 export default 爲默認導出，導出的是用{}包裹的一個對象，以鍵值對的形式存在 導出的方式不一樣，導入的方式也就不一樣， 因此建議同一個項目下使用同一的導入導出方式，方便開發 export default解構之後就是export 經過兩個直觀的demo看下export和export default的區別 先看一段代碼(export) output.js

const a = 'valueA1'
export {a}
複製代碼

input.js

import {a} from './output.js'//此處的import {a}和export {a}，兩個a是一一對應關係
console.log(a)//=>valueA1
複製代碼

留意上面的代碼其中export {a}導出的a，和import {a}導入的a是同一個a 再看一段代碼(export default)

const a = 'valueA1'
export default{a}
複製代碼

input.js

import a from './output.js'//此處的a和export default{a}，不是一個a，
console.log(a)//=>{ a: 'valueA1' }
複製代碼

看下export default的栗子中的input.js，咱們稍做改動

import abc from './output.js'//此處的a和export default{a}，不是一個a，
console.log(abc)//=>{ a: 'valueA1' }
複製代碼

咱們作了些改動，可是輸出沒有變化，import導入的是export default下的對象，叫什麼名字均可以，由於只會存在一個export default

exoprt和export default混合使用

exoprt和export default在同一個模塊中同時使用，是支持的，雖然咱們通常不會這麼作 看一個栗子 output.js

const a = 'valueA1'
const b = 'valueB1'
const c = 'valueC1'
const d = 'valueD1'
function foo() {
  console.log(`foo執行，c的值是${c}`);
}
export {a}
export {b}
export default { b,d,foo}
複製代碼

input.js

import obj, {a,b } from './output'
console.log(a); //=>valueA1
console.log(b); //=>valueB1
console.log(obj); //=>{ b: 'valueB1', d: 'valueD1', foo: [Function: foo] }
複製代碼

as 重命名

經過 exoprt和export default導出的在import引入時都支持經過as進行重命名 看個栗子 仍是上面的那個output.js

const a = 'valueA1'
const b = 'valueB1'
const c = 'valueC1'
const d = 'valueD1'
function foo() {
  console.log(`foo執行，c的值是${c}`);
}
export {a}
export {b}
export default { b,d,foo}
複製代碼

input.js

import {a as A} from './output'
import {* as A} from './output'//這是不支持的
import * as obj from './output'
console.log(A); //=>valueA1
console.log(obj); //=>{ a: 'valueA1',default: { b: 'valueB1', d: 'valueD1', foo: [Function: foo] },b: 'valueB1' }
複製代碼

as後面的變量是你要在input.js中使用的 重點看這一部分

import {* as A} from './output'//這是不支持的
import * as obj from './output'
console.log(obj); //=>{ a: 'valueA1',default: { b: 'valueB1', d: 'valueD1', foo: [Function: foo] },b: 'valueB1' }
複製代碼

• 表明了全部，包括了export和export default導出的 咱們以前說import{}和export{},是一一對應關係，因此在export導出的，在import{}不支持使用* 關於 import，export，export default先介紹到這裏，咱們繼續

require，exports，module.exports（記得後面的s）

這是 AMD規範

require

require是運行時調用，因此require理論上能夠運用在代碼的任何地方

require支持動態引入

例如，這樣是支持的

let flag = true
if (flag) {
  const a = require('./output.js')
  console.log(a); //支持
}
複製代碼

require路徑支持變量

let flag = true
let url = './output.js'
if (flag) {
  const a = require(url)
  console.log(a); //支持
}
複製代碼

經過require引入，是一個賦值的過程

exports 與 module.exports

根據AMD規範 每一個文件就是一個模塊，有本身的做用域。在一個文件裏面定義的變量、函數、類，都是私有的，對其餘文件不可見。 每一個模塊內部，module變量表明當前模塊。這個變量是一個對象，它的exports屬性（即module.exports）是對外的接口。加載某個模塊，實際上是加載該模塊的module.exports屬性。

爲了方便，Node爲每一個模塊提供一個exports變量，指向module.exports。這等同在每一個模塊頭部，有一行這樣的命令。

const exports = module.exports;
複製代碼

因此說 如下兩種寫法等價

exports.a ='valueA1'
module.exports.a='valueA1'
複製代碼

前面說在每一個模塊提供一個exports變量，指向module.exports。 因此不能直接給exports賦值，賦值會覆蓋

const exports = module.exports;
複製代碼

直接給exports賦值會切斷exports和 module.exports的關聯關係 看一個栗子 output.js

const a = 'valueA1'
const b = 'valueB1'
const c = 'valueC1'
module.exports = { c}
exports.b = b//當直接給 module.exports時，exports會失效
module.exports.a = a
複製代碼

input.js

const obj = require('./output.js')
  console.log(obj); //=>{ c: 'valueC1', a: 'valueA1' }
複製代碼

繼續看代碼 output.js

//部分省略
exports.b = b//這樣能夠生效
module.exports.a = a
複製代碼

input.js

const obj = require('./output.js')
  console.log(obj); //=>{ b: 'valueB1', a: 'valueA1' }
複製代碼

再看一段代碼 output.js

//部分省略
module.exports = { c}
module.exports.a = a
複製代碼

input.js

const obj = require('./output.js')
  console.log(obj); //=>{ c: 'valueC1', a: 'valueA1' }
複製代碼

當直接給 module.exports時，exports會失效

交叉使用

在ES6中export default 導出的是一個對象 在AMD中exports和module.exports導出的也都是一個對象 因此若是你手中的項目代碼支持兩種規範，那麼事能夠交叉使用的（固然不建議這麼去作） 經過export導出的不必定是一個對象

demo1

output.js

//部分省略
module.exports = { c}
module.exports.a = a
複製代碼

inputj.s

import obj from './output'
import {a} from './output'
console.log(a);//=>valueA1
console.log(obj);//=>{ c: 'valueC1', a: 'valueA1' }
複製代碼

demo2

output.js

const a = 'valueA1'
const b = 'valueB1'
const c = 'valueC1'
function foo() {
  console.log(`foo執行，c的值是${c}`);
}
export {a}
export default {b,c,foo}
export {b}
複製代碼

input.js

const a = require('./output.js')
  console.log(a); //=>{ a: 'valueA1',default: { b: 'valueB1', c: 'valueC1', foo: [Function: foo] }, b: 'valueB1' }
複製代碼

總結

• require，exports，module.exports屬於AMD規範，import，export，export default屬於ES6規範
• require支持動態導入，動態匹配路徑，import對這二者都不支持
• require是運行時調用，import是編譯時調用
• require是賦值過程，import是解構過程
• 對於export和export default 不一樣的使用方式，import就要採起不一樣的引用方式，主要區別在因而否存在{},export導出的，import導入須要{},導入和導出一一對應,export default默認導出的，import導入不須要{}
• exports是module.exports一種簡寫形式，不能直接給exports賦值
• 當直接給module.exports賦值時，exports會失效

更多前端資源請關注微信公衆號「前端陌上寒」

原文連接

參考連接 關於import與require的區別

JS 中的require 和 import 區別

module.exports和exports和export和export default的區別，import和require的區別