如何了解JavaScript子產品化？

​

1、子產品化是什麼

子產品化簡單來說就是将一個完整的長篇代碼檔案根據功能進行劃分成幾個檔案，這些檔案各自負責一個獨立的功能，各個檔案組合起來實作一個完整的大功能，這就是子產品化，每個負責獨立功能的檔案就是子產品。

由于一開始JavaScript是在web頁面需要的地方提供一定互動，是以一般不需要多大的腳本。但随着JavaScript腳本的複雜化，最新的浏覽器已經開始原生支援JavaSript子產品功能了。

2、浏覽器支援

使用JavaScript 子產品依賴于 import 和 export，import 和 export 的浏覽器支援程度是最新的浏覽器版本都是支援的，但 IE 和舊版本的浏覽器不支援，是以若想相容 IE 和舊版本的浏覽器基本就不能使用了。

export 和 import 是成對出現，配合工作的

js子產品化是各種js架構學習的前提基礎

import 和 export 語句用于将一個子產品裡實作某些功能的變量或函數導入/導出，也可導入/導出類

3、export 導出子產品

預設導出

一個子產品隻能有一個預設導出，預設導出的變量隻能有一個，且不能有大括号{}

文法為export default 變量名

model.js​

function Test1(){
    console.log("這是預設導出")
}
function Test2(){
    console.log('這是命名導出')
}
export default Test1      

批量導出

文法為export {變量名,變量名……}​

function Test1(){
    console.log("這是預設導出")
}
function Test2(){
    console.log('這是命名導出')
}
export {Test1, Test2}      

4、import 導入子產品

預設導入

main.js

import Test1 from "./model.js"
Test1()      

預設導入的重命名

main.js​

import x from "./model.js"//x就是預設導出的Test1
x()      

批量導入

main.js​

import {Test1, Test2} from "./model.js"
Test1();
Test2();      

批量導入的重命名

as關鍵字跟一個新名字實作重命名

main.js

import {Test1 as x1, Test2 as x2} from "./model.js"
x1();
x2();      

也可在導出時用as關鍵字重命名

model.js​

function Test1(){
    console.log("這是預設導出")
}
function Test2(){
    console.log('這是命名導出')
}
export {Test1 as x1, Test2 as x2}      

應用子產品

html

<script src="main.js"></script>      

5、建立子產品對象

使用對象，在as關鍵字重命名的基礎上進一步簡單化

import * as Model from "./model.js"
Model.x1();
Model.x2();      

6、export import 中轉站

有時候可以将多個子子產品組合到一個父子產品中，再由父子產品決定導出哪個，這個父子產品檔案就像是個組合各個子產品的中轉站

文法為export {變量名} from 子產品路徑

目前目錄結構結構

src
    index.html
    main.js
    redirection.js
    models
        model.js
        model2.js      

model.js​

function Test1(){
    console.log("這是子子產品1")
}
export {Test1}      

model2.js

function Test2(){
    console.log('這是子子產品2')
}
export {Test2}      

redirection.js

export {Test1} from "./models/model.js"
export {Test2} from "./models/model2.js"      

main.js

import * as Model from "./redirection.js"
Model.Test1()
Model.Test2()      

html

<script src="./main.js"></script>      

7、 動态加載子產品

動态加載子產品用于在導入子產品時不必預先加載所有子產品，可以在需要時使用 import() 作為函數調用，将其參數傳遞給子產品的路徑，它傳回一個 promise，使用 Promise 對象對子產品加載結果操作。

文法為import(動态加載的子產品路徑)

dynamic.js​

function TestDy(){
    console.log("這是動态子產品")
}
export default TestDy      

document.querySelector('.load').onclick = function(){
    import('./dynamic.js').then((Model)=>{
        Model.default()
    })
}