ES6-04

一、模块化

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

模块化的优势：

1. 防止命名冲突

2. 代码复用

3. 高维护性

ES6模块化语法

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

export 命令用于规定模块的对外接口

import 命令用于输入其他模块提供的功能

export 暴露方式

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('上班啦！！！');
    }
}

import 引入模块方式（在script标签中写）

1. 通用的导入方式

import * as 别名 from "地址";

    <script type="module">
        import * as m1 from "./js/m1.js";
        import * as m2 from "./js/m2.js";
        import * as m3 from "./js/m3.js";
        console.log(m3, m2, m1);
        m3.default.change(); 
        m1.teach();
    </script>

2. 结构赋值形式

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

3. 简便形式（针对默认暴露）

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

浏览器使用ES6模块化的另一种方式

用script标签的src属性引一个入口文件，类型设为module

   <script src="./js/app.js" type="module"></script>

---

 CommonJS