Try   HackMD

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

歡迎來到 JSDC 2021 共筆

Image Not Showing Possible Reasons
  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported
Learn More →

共筆入口：https://hackmd.io/@JSDC-tw/2021conference
手機版請點選上方 按鈕展開議程列表。

共筆協作，共享知識，打造開放社群。

Image Not Showing Possible Reasons
  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported
Learn More →

Welcome to JSDC 2021 Collaborative Writing

Image Not Showing Possible Reasons
  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported
Learn More →

Collaborative Writing Workplace：https://hackmd.io/@JSDC-tw/2021conference
Using mobile please tap to unfold the agenda.

Build a community with open collaboration.

Image Not Showing Possible Reasons
  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported
Learn More →

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

Image Not Showing Possible Reasons
  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported
Learn More →

Mujing

  • JavaScript 概念三明治

Image Not Showing Possible Reasons
  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported
Learn More →

Outline

Image Not Showing Possible Reasons
  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported
Learn More →

模組化概念

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

為什麼 JavaScript 需要模組

Image Not Showing Possible Reasons
  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported
Learn More →

  • 所有 code 共用同一個 scope
    • 容易造成意外 overwrite
  • script 標籤引入檔案的順序很重要
    • jQuery 後才能用
  • IIFE 的誕生
    • (function () {})()
    • 建立 scope
    • 與 global 作區別
    • 不過沒有解決 script 需要按照順序載入的問題
    • 舉例
      • Image Not Showing Possible Reasons
        • The image file may be corrupted
        • The server hosting the image is unavailable
        • The image path is incorrect
        • The image format is not supported
        Learn More →

模組系統規範 Module Specification

  • Image Not Showing Possible Reasons
    • The image file may be corrupted
    • The server hosting the image is unavailable
    • The image path is incorrect
    • The image format is not supported
    Learn More →
    • 模組與模組之間需要互相溝通
      • Module <-> Module
    • 需要有人居中協調
    • 用法必須一致
      • 訂定模組規範

  • 模組系統

    • AMD
    • UMD

Image Not Showing Possible Reasons
  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported
Learn More →

CommonJS

Image Not Showing Possible Reasons
  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported
Learn More →

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

瀏覽器上的 JavaScript 需要⋯⋯

Image Not Showing Possible Reasons
  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported
Learn More →

AMD

Image Not Showing Possible Reasons
  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported
Learn More →

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

on Browsers

設定進入點

Image Not Showing Possible Reasons
  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported
Learn More →

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

UMD

Image Not Showing Possible Reasons
  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported
Learn More →

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

ESM (Modern)

Image Not Showing Possible Reasons
  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported
Learn More →

Image Not Showing Possible Reasons
  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported
Learn More →

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

Stage

  1. 載入檔案 (Construction)

    • Image Not Showing Possible Reasons
      • The image file may be corrupted
      • The server hosting the image is unavailable
      • The image path is incorrect
      • The image format is not supported
      Learn More →
    • 下載到瀏覽器端
    • 紀錄 export / import 之間的關係資訊

  2. 空間連結配置 (Instantiation)

    • Image Not Showing Possible Reasons
      • The image file may be corrupted
      • The server hosting the image is unavailable
      • The image path is incorrect
      • The image format is not supported
      Learn More →

  3. 變數賦值 (Evaluation)

    • Image Not Showing Possible Reasons
      • The image file may be corrupted
      • The server hosting the image is unavailable
      • The image path is incorrect
      • The image format is not supported
      Learn More →
  • 可以分開執行
  • 為瀏覽器行為訂製

Conclusion

Image Not Showing Possible Reasons
  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported
Learn More →

解析方式：

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

Advantage

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

Image Not Showing Possible Reasons
  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported
Learn More →

Disadvantage

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

參考

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

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

Last changed by 
 
JSDC.tw
0
865

Read more

#Session 1 窮途末路的 SPA，堅持 CSR 到放棄

從這開始 可以直接打字做共筆囉 :point_down: KK 徐凱 Web 實驗室 早期用 CSR 寫 SPA 名詞解釋

Jun 29, 2023
#Session 4 JS在生成式、演算藝術與NFT的應用

{%hackmd 2YoCBdBPTjmHXDr9lEpWuQ %} &#x5F9E;&#x9019;&#x958B;&#x59CB; &#x53EF;&#x4EE5;&#x76F4;&#x63A5;&#x6253;&#x5B57;&#x505A;&#x5171;&#x7B46;&#x56C9; :point_down: https://hackmd.io/V_HFtUJDQ8un2QVb5ti8jA# Processing - p5.js p5.js three.js pixi.js

Sep 15, 2022
#Session 2 為什麼許多公司都願意導入 Next.js

{%hackmd 2YoCBdBPTjmHXDr9lEpWuQ %} &#x5F9E;&#x9019;&#x958B;&#x59CB; &#x53EF;&#x4EE5;&#x76F4;&#x63A5;&#x6253;&#x5B57;&#x505A;&#x5171;&#x7B46;&#x56C9; :point_down: Leo &#x90B1;&#x67CF;&#x921E; Hahow B2B &#x524D;&#x7AEF;&#x5DE5;&#x7A0B;&#x5E2B; Medium | Airwaves StarBugs

Jul 17, 2022
#Session 3 前端工程師也能搞得懂的區塊鏈

{%hackmd 2YoCBdBPTjmHXDr9lEpWuQ %} &#x5F9E;&#x9019;&#x958B;&#x59CB; &#x53EF;&#x4EE5;&#x76F4;&#x63A5;&#x6253;&#x5B57;&#x505A;&#x5171;&#x7B46;&#x56C9; :point_down: &#x6F14;&#x8B1B;&#x9023;&#x7D50;&#xFF1A;https://vimeo.com/641650302 Lucien Lee Agenda

Jan 22, 2022
Read more from JSDC.tw
Published on HackMD