JavaScript設計模式是開發中常用的一種解決方案，它們幫助開發者以一種更結構化、更易維護的方式編寫代碼。本文將深入介紹幾種常見的JavaScript設計模式，包括單例模式、工廠模式、觀察者模式和策略模式。

一、單例模式（Singleton Pattern）

單例模式是一種創建型模式，確保一個類只有一個實例，并提供一個全局訪問點。

實現方式

class Singleton {constructor() {if (!Singleton.instance) {Singleton.instance = this;}return Singleton.instance;}someMethod() {console.log('Hello, Singleton!');}
}const instance1 = new Singleton();
const instance2 = new Singleton();console.log(instance1 === instance2); // true
instance1.someMethod(); // Hello, Singleton!
?

使用場景

• 需要確保全局只有一個實例的情況，例如全局配置對象、數據庫連接等。

二、工廠模式（Factory Pattern）

工廠模式是一種創建型模式，通過工廠方法創建對象，而不是直接使用new操作符。

實現方式

class Car {constructor(model) {this.model = model;}drive() {console.log(`${this.model} is driving.`);}
}class CarFactory {static createCar(model) {return new Car(model);}
}const car1 = CarFactory.createCar('Toyota');
const car2 = CarFactory.createCar('Honda');car1.drive(); // Toyota is driving.
car2.drive(); // Honda is driving.
?

使用場景

• 當對象的創建邏輯復雜或需要根據條件創建不同類型的對象時使用工廠模式。

三、觀察者模式（Observer Pattern）

觀察者模式是一種行為型模式，定義了對象間的一對多依賴，當一個對象的狀態發生改變時，所有依賴它的對象都會收到通知并自動更新。

實現方式

class Subject {constructor() {this.observers = [];}addObserver(observer) {this.observers.push(observer);}removeObserver(observer) {this.observers = this.observers.filter(obs => obs !== observer);}notifyObservers() {this.observers.forEach(observer => observer.update());}
}class Observer {update() {console.log('Observer notified.');}
}const subject = new Subject();
const observer1 = new Observer();
const observer2 = new Observer();subject.addObserver(observer1);
subject.addObserver(observer2);subject.notifyObservers();
// Observer notified.
// Observer notified.
?

使用場景

• 用于實現事件處理機制，如事件監聽器、發布-訂閱模式等。

四、策略模式（Strategy Pattern）

策略模式是一種行為型模式，定義了一系列算法，并將每個算法封裝起來，使它們可以互換使用。

實現方式

class StrategyContext {constructor(strategy) {this.strategy = strategy;}setStrategy(strategy) {this.strategy = strategy;}executeStrategy(data) {return this.strategy.execute(data);}
}class ConcreteStrategyA {execute(data) {return `Strategy A with data: ${data}`;}
}class ConcreteStrategyB {execute(data) {return `Strategy B with data: ${data}`;}
}const context = new StrategyContext(new ConcreteStrategyA());
console.log(context.executeStrategy('test')); // Strategy A with data: testcontext.setStrategy(new ConcreteStrategyB());
console.log(context.executeStrategy('test')); // Strategy B with data: test
?

使用場景

• 當需要在運行時切換算法或行為時使用策略模式，例如不同的排序算法、不同的支付方式等。