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