---
tags: jsdc2021
---

# #Session 2 JavaScript 模組進化論 - 模組化的演進與實戰

{%hackmd 2YoCBdBPTjmHXDr9lEpWuQ %}

> 從這開始
> 可以直接打字做共筆囉 :point_down:

Mujing
- JavaScript 概念三明治


<!-- 居然是從 Session 2 開始 -->

## Outline


## 模組化概念

- 功能拆分
- 舉例
- Google 的模組化手機
- 已經取消
- 筆電
- RAM
- 各種不同零件
- 密不可分的功能 -> 可自由組裝的組件
- 組合後還是可以照常運作

## 為什麼 JavaScript 需要模組


- 所有 code 共用同一個 scope
- 容易造成意外 overwrite
- script 標籤引入檔案的順序很重要
- jQuery 後才能用
- [IIFE](https://developer.mozilla.org/zh-TW/docs/Glossary/IIFE) 的誕生
- `(function () {})()`
- 建立 scope
- 與 global 作區別
- 不過沒有解決 script 需要按照順序載入的問題
- 舉例
- 

<!-- Bundle 後的很常看到 -->
<!-- Webpack 甚至可以看到一堆 switch -->

## 模組系統規範 Module Specification

- 
- 模組與模組之間需要互相溝通
- Module <-> Module
- 需要有人居中協調
- 用法必須一致
- 訂定模組規範
- 模組系統
-
- AMD
- UMD


### CommonJS

- Advantage
- 使用 require 引入其他模組
- 使用 module.exports 輸出模組
- 不用擔心自己的程式碼被覆寫掉(?)
- Disadvantage
- CommonJS 不適合瀏覽器
- 主要為伺服器端設計
- synchronous
- 確保相依模組執行時已經載入
- 不需要像瀏覽器下載遠端的 js 檔
- Common 非彼 Common

### 瀏覽器上的 JavaScript 需要⋯⋯


### AMD


- 非同步
- `define()`
- 用 return 的內容決定內容
- 用 `require([], callback)` 進行載入
- Callback 地獄！

<!-- 類似 AngularJS -->

#### on Browsers

##### 設定進入點


- `data-main` 是主檔案
- `src` 是 RequireJS Loader
- 模組系統規範的實作
- 主要用在瀏覽器

### UMD


<!-- 常見於 Bundle 後的檔案 ...-->

- 同一份程式碼可以在 AMD 和 CommonJS 下使用
- 瀏覽器和 Server-side 都能用
- UMD 最外層是 IIFE
- 判斷並根據不同模組系統進行不同的動作
- `(function (global, factory) {})(this, 模組內容)`

## ESM (Modern)


- ECMAScript Module
- 以前需要用 Bundler 轉成 ES5 支援的規範
- 現代瀏覽器普及後或許不再需要
- 瀏覽器內要加 type="module"

### Stage

1. 載入檔案 (Construction)
- 
- 下載到瀏覽器端
- 紀錄 export / import 之間的關係資訊
2. 空間連結配置 (Instantiation)
- 

3. 變數賦值 (Evaluation)
- 

- 可以分開執行
- 為瀏覽器行為訂製

### Conclusion


解析方式：

<!--
ES Modules 的 import()
是不是靜態解析存疑
--->

- ES Modules 會先解析出相依關係，沒使用的剃掉

#### Advantage

- 明確指定模組名稱
- 非同步載入
- 真正執行之前可以先被解析，用於 Tree Shaking 優化
- 只留需要的元件，不需要的甩掉
- 常見的 bundler 都有這種優化
- 歸功於 ESM 的功勞


#### Disadvantage

<!-- 沒缺點¿ -->

<!-- pan 補充 -->

- ESM 不方便動態載入
- 比如探索整個資料夾之後自動載入資料夾中的模組
- CommonJS 在 Node.js 上比較方便
- ESM 有往 NJS 推，但至今還不算主流
- 需要加 Flag 開啟 “實驗功能”
- 要用 ESM 建議搭配 TypeScript
- 可以 compile to CommonJS

## 參考


範例程式碼：
https://github.com/moojing/javascript-module-evlution

實力三明治
https://www.facebook.com/powersandwich