2.17. 模塊化
模塊化是指將一個大的程序文件，拆分成許多小的文件，然后將小文件組合起來。
這樣就可以更清晰和結構化的方式組織代碼
模塊功能主要由兩個命令構成：export 和 import
export 命令用于規定模塊的對外接口 ( 公開 , 暴露)
import 命令用于輸入其他模塊提供的功能 ( 導入 )
2.17.1.export公開
2.17.1.1.分別公開
文件位置及名稱 ../js/s1.js
在每一個元素前寫 export
export let name = '王小二';export function study() {console.log("我們一起學開發");
}
2.17.1.2.統一公開
文件位置及名稱 ../js/s2.js
//統一公開
let name = '李小三';function findJob(){console.log("我們一起找工作!!");
}//
export {name , findJob};
2.17.1.3.默認公開
文件位置及名稱 ../js/s3.js
//默認公開
export default {name: '趙小四',change(){console.log("我們一起變有錢!!");}
}
2.17.2.import導入
2.17.2.1.通用導入
這里 < script> 的 type屬性 為 module 模塊
<script type="module">// 通用的導入方式// 引入 s1.js 模塊內容// import * as s1 from "./js/s1.js";// console.log(s1.name)// s1.study()// //引入 s2.js 模塊內容// import * as s2 from "./js/s2.js";// //引入 s3.js import * as s3 from "./js/s3.js";console.log(s3.default.name)s3.default.study()
</script>
2.17.2.2.解構導入
<script type="module">// import {name, study} from "./js/s1.js";// console.log(name)// study()// import {name as nn, findJob} from "./js/s2.js";import {default as s3} from "./js/s3.js";console.log(s3.name)s3.change()</script>
2.17.2.3.簡便形式
<script type="module">
// 針對默認暴露
import s3 from "./js/s3.js";
console.log(s3);
2.17.3.入口文件
將 導入 統一寫在 ../js/App.js
import * as s1 from "./js/s1.js";
import * as s2 from "./js/s2.js";
import * as s3 from "./js/s3.js";
在 使用的html頁面導入
<script src="./js/App.js" type="module"></script>
2.17.4.動態import()
不是提前導入 , 而是在使用時才通過import() 函數導入,
import() 函數返回 promise對象, 直接接 then()
const btn = document.querySelector('#btn');btn.onclick = function(){import('./js/s1.js').then(module => {module.study();});
}
