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();
});
}