空物件模式利用一個沒有實質行為的空物件來統一客戶端程式的操作行為。 生活範例 大家去日本旅遊時曾經注意過日本的販賣機嗎？日本的販賣機非常有趣，有些會用空的包裝來...
合成模式藉由統一樹狀結構中所有節點的介面，使不同類型的節點擁有相同的操作介面。 生活範例 一間企業由不同部門組成，部門下有組別，而每個組別還可能有不同的團隊。企...
反覆器讓我們取得聚合中的所有元素而不必暴露內部的實作細節。 生活案例 假設你擁有很多電子書，但每本書的格式都不同，有些是 PDF，有些是 txt 檔，有些是網路...
在 React 專案搭配 TypeScript 後續開發前，最重要的工作之一就是為元件定義 props 的型別。這不只可以讓程式碼更清晰易懂，也能幫助未來在開發...
樣板方法提供一個演算法模板，讓子類別在相同的步驟中實踐不同的實作細節。 生活範例 以料理為例，每道菜使用的食材、烹煮方式和擺盤風格各不相同，但都會經歷三個主要步...
將請求的處理程序分成多個處理器，並讓每個處理器決定如何處理請求。 生活案例 想像蘋果工廠的流水線上有一系列工作站，分別負責清洗、選別和包裝。每個工作站會依序處理...
在前一篇文章中，學到了如何在一般的 JavaScript 專案中加入 TypeScript，今天就來分享在前端框架 React.js 如何使用吧！TypeScr...
建造者模式藉由將物件的建構流程和目標對象分離，讓物件的建構過程更有彈性。 生活案例 一間汽車製造工廠生產著各式各樣的的汽車，每款汽車都由不同的零件組成，例如引擎...
原型模式通過讓物件提供複製方法，讓使用者能夠輕鬆複製物件。 生活案例 假設你是世界名畫「蒙娜麗莎的微笑」的收藏家。你經常收到美術館的來信，邀請展出這幅畫作。由於...
轉接器模式允許你在不修改現有程式碼的情況下轉換類別的介面，讓原本互不相容的兩個類別合作無間。 生活案例 出國旅遊時，當地的插座和電壓常常與台灣不同，因此經常需要...
表象模式將複雜的系統包裝成簡單的介面，使系統更容易使用。 生活案例 身為一個出遊靠朋友、吃飯跟著走的超級懶人，安排旅行是一件極為痛苦的事。比起花時間找景點，我更...
命令模式將請求的行為封裝成物件，發送請求的物件只需要依賴於命令介面而不需要知道背後的實作細節。 生活案例 想像你在得來速點餐，櫃檯人員透過點餐機記下餐點，點餐機...
單例模式可以建立一個獨一無二的類別實例，並讓整個應用程式存取內部的狀態和資源。 生活案例 現在很多網站都提供深色模式，來符合使用者的視覺習慣。通常這樣的設定只會...
我們在第五天的時候分享過工廠方法模式，今天的主題是它的進階版——抽象工廠模式。工廠方法模式每次只生成一種產品，而抽象工廠則用來生成整個產品家族。 生活案例 在日...
接著我們就來談到 RADIO framework 的 Architecture，也就是 決定關鍵的 component 與他們之間如何作用 Archit...
裝飾者模式可以讓你在不改變原有物件的情況下，動態地為物件新增行為或功能。 生活案例 想像你點了一杯咖啡，這就是一個基本物件。你可以在咖啡上加一些配料，像是鮮奶油...
前言 進入到正式的系統設計問題，我們首先就以 New Feeds (訊息流)做例子 所謂的訊息流 (New Feeds)，就如上述 X(前 twitter...
觀察者模式讓物件可以被動地接收訊息，而不需要主動追蹤主題的變化。 生活案例 大家平時有收聽 Podcast 的習慣嗎？我時常在捷運上聽 Podcast，聽聽主持...
RADIO framework RADIO REQUIREMENT exploration：徹底的了解需求，藉由問題釐清題目的範圍 ARCHITECT...
策略模式定義一個演算法介面，並讓客戶端在執行時期根據需求替換具體實作。 生活案例 不知道大家平常都怎麼上班呢？大多時候我會騎機車，想要放鬆一點的時候會改搭公車。...
以下是 System design 時，常犯的錯誤 1. 馬上回答問題 Jumping into answering the question immedia...
擴充型別 1. 元祖型別（Tuple Types） 前一篇文章在介紹陣列型別時，有稍微帶到元組的概念。可以將元組型別（Tuple Types）理解為工作方式類似...
工廠方法是建立型模式，它提供一個物件建立方法，讓客戶不需透過具體類別就能建立物件。 生活案例 想像你在路邊的自動販賣機買飲料，只要選取想要的品項，再投入對應的金...
前言 在面試中，面試官會嘗試去找出面試者所散發出的 signals，藉此決定 "是否要 Hire" & "最終評等&quo...
前言 我們在做系統設計或系統設計的面試中，常常會有一些固定的步驟，像是討論需求、設計架構、設計 API 等步驟，GreatFrontEnd 的開發者幫我們整理了...
對於軟體工程師而言，工作日常就是接受需求與提出解決方案。面對新需求時，除了要思考如何解決問題，還要在不同的解決方案之間做出抉擇。不同的情境有不同的考量，如何從眾...
分類 Frontend system design 分為兩種： Applications UI component Application 因為 Web...
漸強實驗室目前正在招募資深工程師！歡迎對 #B2B ＃Saas產業 ＃新創 有高度興趣的人才加入我們～ 【關於漸強實驗室】漸強實驗室透過MarTech 行銷科技...
Angular 中的依賴註入確實非常好用,可以使服務之間的依賴關系變得更加靈活和可復用 但是只能在 Angular 中的使用限製了他的發揮,需要讓他在所有 n...
前言 經過上一篇的解說，我們知道，就算利用的非對稱加密這種聰明的方法，仍舊還是不夠，所以，我們需要一種更安全的方式，來保證我們的傳輸是安全的，也就是現在 HTT...
Evans Wu
Annie
bensonchen3418
iThome鐵人賽
看影片追技術