ES6模組化改變前端的原生開發方式

anchovy發表於2022-05-31
前端

ES6推出的模組化，使用方式有點類似 require.js，只需要引入一個入口檔案即可，其他的js檔案可以按功能建立及引入，export 匯出方法屬性，然後 import 引入使用，這個新特性可能在未來會引來原生開發的熱潮，不需要三方框架（vue、react）即可自由使用模組化開發，而且目前瀏覽器市場快統一了，就連IE也放棄了自己的核心使用google webkit核心了，而且電腦也是預設配備了 IEAdge瀏覽器，想想就覺得爽。

PS：使用模組化載入，需要伺服器環境，也就是得通過 localhost 訪問，而且 script 標籤也得加上 type="module" 宣告

一、基本示例

a.js

export default function a1() {
    console.log('a1')
}

index.html

<script type="module">
import a1 from './a.js'
a1() // a1
</script>

二、解構賦值

c.js

export function c1() {
    console.log('c1')
}

export function c2() {
    console.log('c2')
}

index.html

<script type="module">
import { c1, c2 } from './c.js'
c1() // c1
c2() // c2
</script>

三、js檔案引入

a.js

export default function a1() {
    console.log('a1')
}

b.js

import a1 from './a.js'

export default function b1() {
    a1()
    console.log('b1')
}

index.html

<script type="module">
import b1 from './b.js'
b1() // a1, b1
</script>

四、標籤引入

d.js

import a1 from './a.js'
a1()

console.log('d1')

index.html

<script type="module" src="./d.js"></script>

綜合上述幾種情況，是不是感覺同 vue 或 react 開發使用方式一樣，只不過這裡需要通過 script 模組型別宣告，但要知道這是原生的啊，不用搭建一套腳手架即可直接使用，如果是做一些系統專案話可以考慮直接“上馬”。

更多前端知識，請關注小程式，不定期有驚喜！

image.png

相關文章