嗨大家好!我是 Monica，第一天來講講系列文動機與大綱，談談未來的內容規劃。

關於分享主題

一直想嘗試看看鐵人賽，但苦於找不到文章主題，後來想說既然前陣子買了《JavaScript 設計模式學習手冊 第二版》，就藉著鐵人賽的機會把這本書看完吧!因此這次主題會以這本書的內容為主，搭配 patterns.dev 和 JavaScript Patterns 網站資料，以及前陣子由 Summer 大大舉辦的 JavaScript 設計模式讀書會的共筆內容，整理我讀 JavaScript 設計模式的讀書筆記，讀書過程中若有不懂的，我也會適時搭配 AI 工具來輔助我理解及撰寫文章，不過都會盡量以自己的話來寫~
設計模式在以前初學程式時，只是略有耳聞但不知道跟實務應用有什麼關係，也不知道學了這些對實際開發有何幫助，不過近期開始讀書後，發現其實很多開發方式和套件原理都和這些模式有關，其實我已經不知不覺在應用這些模式了。我覺得了解模式後會讓我更清楚不同問題下有哪些不同解法，算是增廣見聞吧!在自己的工具箱中蒐集更多解決方案，當有一天遇到難題時，因為我知道的解法變多了，我能思考的解決方案選項也會變多。而且若了解這些模式的優缺點，我在應用這些解法時，就會更清楚如果我這樣做，可能有的正負面影響與權衡的面向，這樣想想也是蠻有趣的，就希望我能順利完成囉><

主題大綱

主題會圍繞《JavaScript 設計模式學習手冊 第二版》和 patterns.dev 內所提的設計模式，因為書中有提到 React 的設計模式，而自己本身也是以 React 開發，所以也會提到一點 React，這裡列出預計會涵蓋的主題：

Design Patterns in JavaScript

• 設計模式簡介
• Module 模式
• Revealing Module 模式
• Singleton 模式
• Prototype 模式
• Factory 模式
• Facade 模式
• Decorator 模式
• Flyweight 模式
• Observer 模式
• Publish/Subscribe 模式
• Mediator 模式
• Command 模式
• Proxy 模式
• MVC 模式
• Promise 模式
• 命名空間化模式

React Design Patterns

• HOC 模式
• Render Props 模式
• Hooks 模式

Performance Patterns

• 程式碼拆分(Code Splitting)與動態匯入(Dynamic Import) (1)
• 程式碼拆分(Code Splitting)與動態匯入(Dynamic Import) (2)
• PRPL 模式

Rendering Patterns

• 渲染模式初探與效能指標介紹
• Client Side Rendering(CSR)
• Server Side Rendering(SSR)、Streaming Server-Side Rendering、Selective Hydration
• Static Rendering/Static Site Generation (SSG)
• Incremental Static Generation/Regeneration(ISR) 與渲染模式總結

總結

• 系列文總結與完賽心得

（會再視情況調整主題並更新本篇大綱）

小結

整理大綱後發現，其實雖說是 JavaScript 設計模式，但也提到一些效能優化和渲染方式的介紹，有點硬இ௰இ...但希望自己可以完成~希望這系列文可以讓自己、以及讀者們更了解設計模式，也了解平常實務應用背後的原理，了解越多也能為自己的未來創造更多可能性:)