ES6-模块化

介绍

模块化是指将一个大的程序文件，拆分成许多小的文件，然后将小文件组合起来。

模块化的好处

1. 防止命名冲突
2. 代码复用
3. 高维护性

ES6 之前的模块化规范有

1. CommonJS => NodeJS、Browserify
2. AMD => requireJS
3. CMD => seaJS

ES6 模块化语法

模块功能主要由两个命令构成：export 和 import。

1. export 命令用于规定模块的对外接口
2. import 命令用于输入其他模块提供的功能

暴露方式

1、分别暴露

export let school = '尚硅谷';
export function teach() {
    console.log("我们可以教给你开发技能");
}

2、统一暴露

let school = '尚硅谷';
function findJob(){
    console.log("我们可以帮助你找工作!!");
}
export {school, findJob};

3、默认暴露

export default {
    school: 'ATGUIGU',
    change: function(){
        console.log("我们可以改变你!!");
    }
}

导入

<script type="module">
    //1. 通用的导入方式
    //引入 m1.js 模块内容
    // import * as m1 from "./src/js/m1.js";
    // //引入 m2.js 模块内容
    // import * as m2 from "./src/js/m2.js";
    // //引入 m3.js 
    // import * as m3 from "./src/js/m3.js";

    //2. 解构赋值形式
    // import {school, teach} from "./src/js/m1.js";
    // import {school as guigu, findJob} from "./src/js/m2.js";
    // import {default as m3} from "./src/js/m3.js";

    //3. 简便形式  针对默认暴露
    // import m3 from "./src/js/m3.js";
    // console.log(m3);
</script>