536 es6模块化

2.18. 模块化

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

2.18.1. 模块化的好处

模块化的优势有以下几点：

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

---

2.18.2. 模块化规范产品

ES6 之前的模块化规范有：

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

---

2.18.3. ES6 模块化语法

模块功能主要由两个命令构成：export 和 import。
⚫ export 命令用于规定模块的对外接口
⚫ import 命令用于输入其他模块提供的功能

---

<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>

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

// 分别暴露
export let school = '哈哈';

export function teach() {
  console.log("666");
}

// 统一暴露
let school = '哈哈';

function findJob(){
  console.log("777");
}

export {school, findJob};

// 默认暴露
export default {
  school: '哈哈',
  change: function () {
    console.log("888!!");
  }
}