ECMAScript 6+ 新特性 ( 六 ) 模块化

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">
    // 通用的导入方式
    // 引入 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();
    });
}