1. 代理模式
1.1. 使用場景
代理模式在不改變原始對象的前提下，通過代理對象控制對其訪問，通常用于權限控制、延遲加載、遠程調用等場景。在前端開發中，可以通過代理模式對網絡請求、緩存機制等進行控制。
1.2. 代碼實現
class ApiService {request() {console.log('Making API request...');return 'Response from API';}
}class ApiServiceProxy {constructor() {this.apiservice = new ApiService();this.cache = null;}request() {if (!this.cache) {console.log('Fetching from API...');this.cache = this.apiservice.request();} else {console.log('Returning cached response...');}return this.cache;}
}// 使用代理模式
const apiProxy = new ApiServiceProxy();
console.log(apiProxy.request()); // Fetching from API... Response from API
console.log(apiProxy.request()); // Returning cached response... Response from API1.3. 詳細注釋
ApiService：表示原始對象，提供基礎的 API 請求功能。
?ApiServiceProxy：代理類，控制對 ApiService 的訪問，緩存請求結果以避免多次 API 調用。
代理模式用于在不修改原始對象的情況下，添加緩存或權限控制等功能。
1.4. 實際應用
- 代理模式常用于緩存、權限管理、遠程代理等場景，如在前端緩存 API 請求、延遲加載圖片等。
2. 適配器模式
2.1.?使用場景
適配器模式用于將不兼容的接口轉換為兼容的接口，解決不同對象或模塊之間的兼容性問題。在前端開發中，適配器模式可用于將第三方庫的接口適配為項目內部通用的接口形式。
2.2. 代碼實現
class OldApi {oldRequest() {return 'Old API response';}
}class Adapter {constructor(oldApi) {this.oldApi = oldApi;}newRequest() {return this.oldApi.oldRequest();}
}// 使用適配器模式
const oldApi = new OldApi();
const adapter = new Adapter(oldApi);
console.log(adapter.newRequest()); // Old API response2.3. 詳細注釋
OldApi：表示舊的接口，提供老舊的請求方式。
Adapter：適配器，將舊接口適配為新的接口，使得可以在新環境中使用舊的功能。
適配器模式解決了接口不兼容的問題，便于老舊代碼與新代碼的集成。
2.4. 實際應用
適配器模式常用于集成不同版本的接口或庫，如將舊版 API 接口適配到新版項目中。
3. 裝飾器模式
3.1.?使用場景
裝飾器模式用于在不修改現有對象的情況下，動態地為其添加功能。在前端中，裝飾器模式常用于為對象或函數動態添加功能，如事件處理、日志記錄等。
3.2. 代碼實現
class Coffee {cost() {return 5;}
}class MilkDecorator {constructor(coffee) {this.coffee = coffee;}cost() {return this.coffee.cost() + 1;}
}class SugarDecorator {constructor(coffee) {this.coffee = coffee;}cost() {return this.coffee.cost() + 0.5;}
}// 使用裝飾器模式
let coffee = new Coffee();
coffee = new MilkDecorator(coffee);
coffee = new SugarDecorator(coffee);
console.log(coffee.cost()); // 6.53.3. 詳細注釋
Coffee：原始對象，表示基礎的咖啡，提供基本功能。
MilkDecorator 和 SugarDecorator：裝飾器類，動態為 Coffee 對象添加牛奶和糖的功能。
裝飾器模式通過包裝對象的方式，動態添加功能而不修改原始類。
3.3. 實際應用
裝飾器模式常用于前端中動態功能的添加，如為按鈕添加事件處理、為組件增加樣式等。
4. 橋接模式
4.1.?使用場景
橋接模式用于將抽象部分和實現部分分離，使它們可以獨立變化。常用于當一個對象有多個維度的變化時，將這些變化解耦。在前端開發中，橋接模式用于將功能和 UI 的實現分離，使得它們可以獨立演進。
4.2. 代碼實現
class Shape {constructor(color) {this.color = color;}draw() {throw new Error('draw() must be implemented');}
}class Circle extends Shape {draw() {console.log(`Drawing a ${this.color.getColor()} circle`);}
}class Color {getColor() {throw new Error('getColor() must be implemented');}
}class RedColor extends Color {getColor() {return 'red';}
}class BlueColor extends Color {getColor() {return 'blue';}
}// 使用橋接模式
const red = new RedColor();
const blue = new BlueColor();const redCircle = new Circle(red);
redCircle.draw(); // Drawing a red circleconst blueCircle = new Circle(blue);
blueCircle.draw(); // Drawing a blue circle4.3. 詳細注釋
Shape：抽象類，定義了 draw 方法。
Circle：具體實現類，實現了 Shape 的 draw 方法。
Color：表示顏色抽象，可以有不同的顏色實現類如 RedColor 和 BlueColor。
橋接模式將形狀和顏色的實現解耦，可以獨立擴展。
4.4. 實際應用
橋接模式常用于將功能和實現分離，如在圖形繪制中分離形狀和顏色、在 UI 組件中分離外觀和行為。
5. 組合模式
5.1. 使用場景
組合模式用于將對象組合成樹形結構，以表示“部分-整體”的層次結構。前端中，組合模式常用于構建層次結構的 UI 組件，如菜單、文件夾結構等。
5.2. 代碼實現
class MenuItem {constructor(name) {this.name = name;}show() {console.log(this.name);}
}class Menu {constructor(name) {this.name = name;this.items = [];}add(item) {this.items.push(item);}show() {console.log(this.name);this.items.forEach(item => item.show());}
}// 使用組合模式
const fileMenu = new Menu('File');
fileMenu.add(new MenuItem('New'));
fileMenu.add(new MenuItem('Open'));const editMenu = new Menu('Edit');
editMenu.add(new MenuItem('Undo'));
editMenu.add(new MenuItem('Redo'));const mainMenu = new Menu('Main Menu');
mainMenu.add(fileMenu);
mainMenu.add(editMenu);mainMenu.show();5.3.?詳細注釋
MenuItem：表示基礎菜單項，提供 show 方法。
Menu：組合類，包含多個 MenuItem 或其他 Menu，提供組合的 show 方法。
組合模式允許樹形結構的對象組合和處理，實現部分與整體的遞歸處理。
5.4. 實際應用
組合模式常用于前端的樹形結構、層次化菜單、文件目錄管理等場景。
6. 外觀模式
6.1. 使用場景
外觀模式提供了一個簡化的接口來訪問復雜的系統，隱藏內部實現細節，減少客戶端的復雜性。在前端開發中，外觀模式常用于為復雜的庫或系統提供簡化的 API。
6.2. 代碼實現
class Subsystem1 {operation() {return 'Subsystem1 operation';}
}class Subsystem2 {operation() {return 'Subsystem2 operation';}
}class Facade {constructor() {this.subsystem1 = new Subsystem1();this.subsystem2 = new Subsystem2();}operation() {return `${this.subsystem1.operation()} + ${this.subsystem2.operation()}`;}
}// 使用外觀模式
const facade = new Facade();
console.log(facade.operation()); // Subsystem1 operation + Subsystem2 operation6.3. 詳細注釋
Subsystem1 和 Subsystem2：表示復雜系統的部分。
Facade：外觀類，提供簡化的 operation 方法，統一調用多個子系統。
外觀模式通過提供一個簡化的接口，隱藏了復雜系統的細節。
6.4. 實際應用
外觀模式常用于封裝復雜的子系統，如封裝多種 API 調用、封裝復雜的 UI 邏輯等。
7. 享元模式
7.1.?使用場景
享元模式通過共享相同的對象來減少內存消耗，適用于需要大量相似對象的場景。在前端開發中，享元模式用于優化性能，如緩存對象、共享數據等。
7.2. 代碼實現
class Flyweight {constructor(sharedState) {this.sharedState = sharedState;}operation(uniqueState) {console.log(`Shared: ${this.sharedState}, Unique: ${uniqueState}`);}
}class FlyweightFactory {constructor() {this.flyweights = {};}getFlyweight(sharedState) {if (!this.flyweights[sharedState]) {this.flyweights[sharedState] = new Flyweight(sharedState);}return this.flyweights[sharedState];}
}// 使用享元模式
const factory = new FlyweightFactory();const flyweight1 = factory.getFlyweight('Shared1');
flyweight1.operation('Unique1');const flyweight2 = factory.getFlyweight('Shared1');
flyweight2.operation('Unique2');console.log(flyweight1 === flyweight2); // true7.3.?詳細注釋
Flyweight：享元對象，包含共享的狀態 sharedState 。
FlyweightFactory：負責創建和管理共享的享元對象，避免重復創建相同的對象。
享元模式通過共享對象，減少了內存消耗，提升了系統性能。
7.4.?實際應用
享元模式常用于緩存機制、對象池、共享數據等需要大量相似對象的場景。
