核心

其實(shí)總的來說就是 export 導(dǎo)出的是變量的句柄（或者說符號(hào)綁定、近似于 C 語言里面的指針，C++里面的變量別名），而 export default 導(dǎo)出的是變量的值。

需要注意的是：模塊里面的內(nèi)容只能在模塊內(nèi)部修改，模塊外部只能使用。esModule在語法層面做了一層淺層的保護(hù)（即將import導(dǎo)入的變量聲明為常量）

而變量的句柄必須通過 var、let、const、function 這些關(guān)鍵字聲明才可以由 js 引擎生成，而值（或者說數(shù)據(jù)）可以通過變量運(yùn)算或者字面量直接生成。

下面是測(cè)試用例：

// a.js
export let a = 'a'

export let objA = { a: 'a' }

let defaultA = 1
export default defaultA

export function fn(str) {
    a = str
    defaultA = str
}

// test1.js
import b, { a, fn, objA } from './a.js'
console.log(a, '---', b, '---', objA.a, '---', 'test1.js')
setTimeout(() => {
    objA.a = 'hello world'
    fn('hello world')
    console.log(a, '---', b, '---', objA.a, '---', 'test1.js')
})

// test2.js
import b, { a, objA } from './a.js'
console.log(a, '---', b, '---', objA.a, '---', 'test2.js')
setTimeout(() => {
    console.log(a, '---', b, '---', objA.a, '---', 'test2.js')
}, 100)

// main.js
import './test1.js'
import './test2.js'

分析

• 通過 a 值的變化可以看出，在 test1.js 中的修改會(huì)影響到 test2.js 中 a 的值，驗(yàn)證我們說的導(dǎo)出句柄這個(gè)觀點(diǎn)。
• 通過 b 的運(yùn)行結(jié)果可以驗(yàn)證 export default 導(dǎo)出變量的值的觀點(diǎn)。
• 通過 objA.a 的運(yùn)行結(jié)果可以驗(yàn)證淺層保護(hù)的觀點(diǎn)，其實(shí)和const obj = {}，我們可以修改 obj 的屬性，只要不對(duì) obj 重新賦值都是允許的是同一個(gè)邏輯。

如果看到這里你完全理解上面的內(nèi)容，那么下面的內(nèi)容就建議你跳過了，因?yàn)橄旅媸且恍┘?xì)節(jié)的展開和補(bǔ)充，對(duì)你來說可能會(huì)有些啰嗦和浪費(fèi)時(shí)間。如果上面的內(nèi)容你還不是很理解，那么可以再看看下面的內(nèi)容，看看是否對(duì)你有幫助。

那我們就按照以下幾個(gè)方面具體來講講這個(gè)問題，順便再做一些擴(kuò)展和補(bǔ)充。

• 1、句柄和值
• 2、ES module 和 commonJs
• 3、關(guān)于 Tree Shaking 的思考

句柄和值

其實(shí)句柄這個(gè)詞我個(gè)人理解為權(quán)限，獲得句柄就是獲得某種東西的操作權(quán)限，比如拿到文件句柄就可以對(duì)文件進(jìn)行讀寫操作。其實(shí)怎么理解都可以，只不過我引用了句柄這個(gè)詞語。我想說明的是 export 導(dǎo)出的是一個(gè)變量的句柄（或者說是引用），這個(gè)概念類似于 C 語言里面的指針，C++里面的變量別名。也就是說，導(dǎo)入模塊在拿到這個(gè)變量時(shí)，對(duì)這個(gè)變量的操作實(shí)際上是在操作原來的導(dǎo)出變量本身。

而值其實(shí)就是一份數(shù)據(jù)，也可以理解成 export default 導(dǎo)出的是一份數(shù)據(jù)拷貝。

擴(kuò)展

一、js 中聲明變量的幾種方式

• var、let、const
• function
• class
• import（準(zhǔn)確來講并沒有創(chuàng)建新的變量，但是這個(gè)關(guān)鍵字導(dǎo)入了被導(dǎo)入模塊的變量的引用，而在 js 引擎層面并沒有聲明新的變量）

注意：

// main.js
export { default as a } from 'xxx/a.xxx'

// main.js
import a from 'xxx/a.xxx'
export a

二、堆棧內(nèi)存

• 堆內(nèi)存：存放引用類型的數(shù)據(jù)，例如對(duì)象、數(shù)組等
• 棧內(nèi)存：存放基本數(shù)據(jù)類型和引用類型的地址（存放占用空間固定的數(shù)據(jù)）

ES module 和 CommonJS

1、實(shí)現(xiàn)層面

ES module 和 CommonJS 比較大的一個(gè)區(qū)別就是一個(gè)是官方規(guī)范，一個(gè)是社區(qū)規(guī)范。官方規(guī)范自然就能的到 js 語法層面的實(shí)現(xiàn)支持，而社區(qū)規(guī)范只能通過在現(xiàn)有的語法基礎(chǔ)上進(jìn)行擴(kuò)展來實(shí)現(xiàn)。

2、單獨(dú)導(dǎo)出和默認(rèn)導(dǎo)出

其實(shí) CommonJS 的實(shí)現(xiàn)也特別簡(jiǎn)單，看一眼 webpack 的打包結(jié)果就知道了。核心原理就是將一個(gè)個(gè)模塊放到函數(shù)中運(yùn)行，這樣利用函數(shù)作用域的特點(diǎn)，就可以實(shí)現(xiàn)模塊之間的環(huán)境隔離。所以在 CommonJS 中，module.exports 和 exports 本質(zhì)上就是同一個(gè)對(duì)象，這個(gè)對(duì)象就是這個(gè)模塊（函數(shù)）運(yùn)行時(shí) return 的對(duì)象。

而 ES module 則不然，export 和 export default 有著本質(zhì)的差別，那就是一個(gè)導(dǎo)出變量的句柄，一個(gè)導(dǎo)出變量的值。

擴(kuò)展（關(guān)于 export 導(dǎo)出的細(xì)節(jié)）

關(guān)于 export 導(dǎo)出，出了這種下面常用的方式：

// a.js
export let a = 1

// b.js
let b = 1
export { b }

import { a } from 'xx/a.js'
import { b } from 'xx/b.js'

// b.js
export { b: 1 } // SyntaxError: Unexpected token ':'

let b = 1
export { b }
export let b = 2 // SyntaxError: Identifier 'b' has already been declared

var b = 1
export { b }
export var b = 2 // SyntaxError: Duplicate export of 'b'

本文轉(zhuǎn)載于:

https://juejin.cn/post/7315681269702541323

如果對(duì)您有所幫助，歡迎您點(diǎn)個(gè)關(guān)注，我會(huì)定時(shí)更新技術(shù)文檔，大家一起討論學(xué)習(xí)，一起進(jìn)步。

?文章來源地址http://www.zghlxwxcb.cn/news/detail-798636.html