JavaScript中AMD和ES6模組導入導出的比較（程式碼範例）

這篇文章帶給大家的內容是關於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.export属于AMD规范，import，export，export default属于ES6规范
• require支持动态导入，动态匹配路径，import对这两者都不支持
• require是运行时调用，import是编译时调用
• require是赋值过程，import是解构过程
• 对于export和export default 不同的使用方式，import就要采取不同的引用方式，主要区别在于是否存在{},export导出的，import导入需要{},导入和导出一一对应,export default默认导出的，import导入不需要{}
• exports是module.export一种简写形式，不能直接给exports赋值

• 当直接给module.export赋值时，exports会失效

本篇文章到这里就已经全部结束了，更多其他精彩内容可以关注PHP中文网的JavaScript视频教程栏目！

以上是JavaScript中AMD和ES6模組導入導出的比較（程式碼範例）的詳細內容。更多資訊請關注PHP中文網其他相關文章！