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!!");
  }
}