ROADMAP

CH3 · JavaScript 語言核心詳細 ROADMAP

計畫文件，不會被 Quartz 渲染。 回主 roadmap → frontend/ROADMAP.md

---

章節目標

JS 是框架會換但不變的語言核心。搞懂 Event Loop、Closure、Promise 錯誤處理、Prototype、現代特性，換任何框架都通。建立從 Hoisting 基礎到 Virtual DOM 實作、從歷史演進到 2026 現代特性的完整 JS 能力。

---

🌱 基本介紹

#	主題	Slug	Stage	大綱
01	JS 是什麼	01-what-is-js	🌱	動態型別、直譯 vs JIT、V8 簡介、為什麼瀏覽器選 JS
02	變數、型別、let/const	variables	🌿	已有
03	Hoisting（變數提升）	03-hoisting	🌱	var / let / const 差異、函式宣告 vs 表達式、temporal dead zone
04	Type Coercion 陷阱	04-type-coercion	🌱	== vs ===、falsy values、"5" + 3、NaN !== NaN、Float 精度

---

❓ 為什麼需要

#	主題	Slug	Stage	大綱
05	為什麼需要打包工具（Bundler）	05-why-bundler	🌱	直接 <script> 可以跑啊——那為什麼需要 Bundler？解答：多檔案載入瀑布、模組相依管理、Tree-shaking、Minification、Code Splitting、跨瀏覽器相容，沒有這些會發生什麼
06	為什麼需要模組系統	06-why-modules	🌱	全域變數污染、命名衝突、相依關係管理、為什麼 IIFE 不夠、CommonJS → ESM 的動機
07	為什麼需要 Transpiler	07-why-transpiler	🌱	瀏覽器支援落差、新語法 vs 舊瀏覽器、為什麼 Babel 曾經是必備、esbuild / SWC 時代為什麼編譯速度變重點
08	為什麼需要 Promise / async-await（為什麼 callback 不夠）	08-why-async	🌱	Callback hell、錯誤冒泡困難、並發控制難、Promise 解了什麼、async-await 的 syntactic sugar

---

🕰️ 演進

#	主題	Slug	Stage	大綱
09	JS 版本史	09-js-version-history	🌱	ES3 → ES5（2009 嚴謹）→ ES6/2015（大躍進）→ ES2017 async → ES2020 ?. / ?? → ES2024 immutable array → 現代 Baseline
10	現代 JS 特性總覽	10-modern-js-features	🌱	TC39 Stage、Top-level await、Temporal API、Explicit Resource Management (using)
11	前端打 API 演進	11-api-call-evolution	🌱	XMLHttpRequest → jQuery $.ajax → fetch → axios → React Query / SWR → tRPC
12	打包工具演進	12-bundler-evolution	🌱	手貼 script → RequireJS → Browserify → Gulp/Grunt → Webpack → Rollup/Parcel → Snowpack → esbuild → Vite → Turbopack/SWC
13	模組系統演進	13-module-evolution	🌱	全域變數 → IIFE → CommonJS → AMD → UMD → ESM
14	Transpiler 演進	14-transpiler-evolution	🌱	CoffeeScript → Babel → SWC → esbuild

---

🧠 知識型

執行模型核心

#	主題	Slug	Stage	大綱
15	Scope 與 Closure	closure	🌿	已有
16	this 綁定	this-binding	🌿	已有
17	Event Loop	event-loop	🌿	已有
18	Promise / async-await	async	🌿	已有
19	Prototype 與 class	prototype-class	🌿	已有

模組與非同步

#	主題	Slug	Stage	大綱
20	Module（ESM / CJS 實戰）	20-module-esm-cjs	🌱	動態 import、Top-level await、dual package hazard
21	AbortController / Cancellation	21-abort-controller	🌱	取消 fetch、取消 async、搭配 Promise.race、React 用法
22	Iterator / Generator	22-iterator-generator	🌱	[Symbol.iterator]、yield、async generator

進階語言特性

#	主題	Slug	Stage	大綱
23	Proxy / Reflect	23-proxy-reflect	🌱	攔截物件操作、Vue 響應式底層
24	structuredClone() / WeakRef / WeakMap / WeakSet	24-weak-refs	🌱	深層複製原生解、弱引用的時機
25	Immutable Array methods	25-immutable-array	🌱	ES2024 toSorted / toReversed / toSpliced / with
26	Object.groupBy / Map.groupBy	26-groupby	🌱	ES2024 新的分組方法
27	Symbol 與 well-known symbols	27-symbol	🌱	Symbol.iterator、Symbol.asyncIterator
28	Tagged Template Literals	28-tagged-templates	🌱	css / html tag、i18n library 底層

實戰大坑

#	主題	Slug	Stage	大綱
29	Error handling 深入	29-error-handling	🌱	try/catch/finally、custom error class、async error、AggregateError、Error cause chain
30	Regular Expressions	30-regex	🌱	實用 patterns、lookahead/lookbehind、named groups、效能陷阱
31	Date 亂象與 Temporal API	31-date-temporal	🌱	Date 設計爛、時區、Moment.js 棄用、date-fns / Day.js、Temporal API
32	Functional patterns	32-functional-patterns	🌱	curry、compose、pipe、higher-order functions
33	Garbage Collection & Memory Leak	33-gc-memory-leak	🌱	Mark-and-sweep、leak 來源、Chrome Memory profiler

---

🔧 小實作注意事項

#	主題	Slug	Stage	大綱
34	You Don’t Know JS 踩坑合輯	34-ydkjs-highlights	🌱	Kyle Simpson 書中經典陷阱
35	Event Delegation（事件委派）	35-event-delegation	🌱	一個 listener 處理多個子元素、bubble 階段、React event system
36	Debounce / Throttle 實作	36-debounce-throttle	🌱	兩種差異、自己從零實作
37	Deep Clone 各種做法對比	37-deep-clone	🌱	JSON hack、structuredClone()、lodash cloneDeep、循環引用
38	jQuery 模板：判斷 + 渲染	38-jquery-template	🌱	字串拼接 → Handlebars → JSX 的演進
39	前後端 API 界接 5 種情境	39-api-integration-5-ways	🌱	REST / GraphQL / tRPC / BFF / WebSocket
40	迷你 fetch client	40-mini-fetch-client	🌱	→ walkthroughs W02
41	迷你 Virtual DOM 演算法	41-mini-virtual-dom	🌱	diff 演算法簡化版、key 必要性
42	Reconciliation 演算法簡化版	42-reconciliation	🌱	React reconciler 核心想法、Fiber 架構概念
43	前端面試題目總覽（JS 核心題庫）	43-js-interview-questions	🌱	Hoisting / Closure / this / Event Loop / Prototype / Async / 實作題
44	最值得親手做的 Util 合輯 + 為什麼	44-worth-making-utils	🌱	哪些 util 值得自己寫過一次（而不是直接裝 lodash）：debounce / throttle / deepClone / deepMerge / memoize / curry / compose / pipe / retry with backoff / LRU cache / EventEmitter / URL query parser / safe JSON parse。每個附「為什麼值得做」——理解這個 util 會連帶搞懂什麼底層概念

---

💣 Anti-pattern

#	主題	Slug	Stage	大綱
45	JS Anti-patterns	45-js-anti-patterns	🌱	var 濫用、==、改 built-in prototypes、同步 loop 處理 async、forEach 裡 await、忘記 .catch()

---

🧰 對應檢查工具

#	主題	Slug	Stage	大綱
46	JS 檢查工具	46-js-tooling	🌱	ESLint、Prettier、Biome / Oxc / dprint、TypeScript compiler 作為 linter

---

章節進度統計

• 知識主題：46 項
• 🌿 growing：6（已有）
• 🌱 seed：40

---

跨系列連結

• → frontend/html/ CH1
• → frontend/browser/ CH4（DOM 操作、lifecycle API）
• → frontend/framework/ CH6（Virtual DOM / Reconciliation 在框架內）
• → frontend/testing/ CH10
• → frontend/security/ CH11（Prototype pollution、eval、Web Crypto）
• → W02 造自己的工具
• → W04 前後端 API 5 種接法