design-pattern

引言 在軟體開發中，物件的建立是最常見的操作之一。我們通常直接使用 new 關鍵字來實例化物件，但當建立過程變得複雜、需要非同步操作，或者我們想對建立過程有更多控制時，直接使用 new 可能就不夠了。 本文將介紹靜態工廠模式如何解決這些問題，並以 ImageLoader 重構為例，展示實際應用場景 什麼是工廠模式？ 工廠模式的核心概念是將物件的建立邏輯從直接的 new 呼叫中抽離出來，委託給一個專門的「工廠」來負責。這樣做的主要目的是降低耦合、提高彈性。 工廠模式有多種變體： 簡單工廠：一個工廠類別負責建立多種產品 - 👉 More 工廠方法：每個產品都有自己的工廠 - 👉 More 抽象工廠：建立相關產品族 - 👉 More 靜態工廠方法：本文重點討論的模式 靜態工廠方法詳解 靜態工廠方法是類別內部的一個 static 方法，負責建立並返回該類別的實例（或其子類別的實例）。 命名慣例 常見的靜態工廠方法名稱： create() - 建立新實例 最常見的命名，表示建立一個全新的實例： // 組件建立 const button = Button.create({ text: 'Click me', onClick: handleClick }); // API 客戶端建立 const apiClient = ApiClient.create({ baseURL: 'https://api.example.com' }); // 資料庫連接建立 const dbConnection = await DatabaseConnection.create(config); of() - 從參數建立實例 表示從某些參數或值建立實例：...

什麼是工廠方法模式？ 工廠方法模式定義了一個建立物件的介面，但讓子類別決定要實例化哪個類別。這種模式將物件的建立延遲到子類別，符合開放封閉原則。 核心概念 抽象工廠介面：定義建立物件的抽象方法 具體工廠類別：每個產品都有自己的工廠 開放封閉原則：新增產品時不需要修改現有程式碼 實際範例 // 產品介面 interface Vehicle { drive(): void; } // 具體產品 class Car implements Vehicle { drive(): void { console.log('Driving a car'); } } class Bike implements Vehicle { drive(): void { console.log('Riding a bike'); } } // 抽象工廠介面 interface VehicleFactory { create(): Vehicle; } // 具體工廠類別 class CarFactory implements VehicleFactory { create(): Vehicle { return new Car(); } } class BikeFactory implements VehicleFactory { create(): Vehicle { return new Bike(); } } // 使用方式 const carFactory = new CarFactory(); const bikeFactory = new BikeFactory(); const car = carFactory....

什麼是抽象工廠模式？ 抽象工廠模式提供一個建立一系列相關或相互依賴物件的介面，而不需要指定它們的具體類別。這種模式確保產品族內的一致性，常用於 UI 框架的實作。 核心概念 產品族：一系列相關的產品 抽象工廠介面：定義建立產品族的方法 具體工廠：實作特定產品族的建立邏輯 產品一致性：確保同一產品族內的產品能正常配合 實際範例 // 產品介面 interface Button { render(): void; } interface Input { render(): void; } // Material UI 產品族 class MaterialButton implements Button { render(): void { console.log('Rendering Material UI button'); } } class MaterialInput implements Input { render(): void { console.log('Rendering Material UI input'); } } // Bootstrap 產品族 class BootstrapButton implements Button { render(): void { console.log('Rendering Bootstrap button'); } } class BootstrapInput implements Input { render(): void { console....

什麼是簡單工廠模式？ 簡單工廠模式是最基本的工廠模式，它提供一個統一的介面來建立物件，而不需要直接使用 new 關鍵字。這種模式將物件的建立邏輯集中管理，提高了程式碼的可維護性。 核心概念 統一介面：提供一個靜態方法來建立物件 集中管理：將建立邏輯集中在一個地方 降低耦合：客戶端不需要知道具體的實作細節 實際範例 // 產品介面 interface Vehicle { drive(): void; } // 具體產品 class Car implements Vehicle { drive(): void { console.log('Driving a car'); } } class Bike implements Vehicle { drive(): void { console.log('Riding a bike'); } } // 簡單工廠 class VehicleFactory { static create(type: 'car' | 'bike'): Vehicle { switch (type) { case 'car': return new Car(); case 'bike': return new Bike(); default: throw new Error('Unknown vehicle type'); } } } // 使用方式 const car = VehicleFactory....