Factory模式用於創(chuàng)建對(duì)象而不暴露構(gòu)造邏輯，通過統(tǒng)一接口生成不同類型對(duì)象，適用於創(chuàng)建多種相似類型對(duì)象的場(chǎng)景；2. Singleton模式確保一個(gè)類僅有一個(gè)實(shí)例並提供全局訪問點(diǎn)，常用於配置管理、日誌器等需要單一狀態(tài)的場(chǎng)景；3. Observer模式建立一對(duì)多依賴關(guān)係，當(dāng)主體狀態(tài)變化時(shí)自動(dòng)通知所有觀察者，廣泛應(yīng)用於事件系統(tǒng)和數(shù)據(jù)綁定。這三種模式分別解決了對(duì)象創(chuàng)建、實(shí)例唯一性和狀態(tài)響應(yīng)的問題，結(jié)合使用可提升代碼的模塊化、可維護(hù)性和可擴(kuò)展性。

JavaScript 設(shè)計(jì)模式中的Factory 、 Singleton和Observer是三種非常實(shí)用且常見的模式，能幫助我們寫出更模塊化、可維護(hù)和可擴(kuò)展的代碼。下面分別介紹它們的用途、實(shí)現(xiàn)方式和使用場(chǎng)景。

1. Factory Pattern（工廠模式）

工廠模式用於創(chuàng)建對(duì)象，而無需暴露具體的構(gòu)造邏輯。它通過一個(gè)統(tǒng)一的接口來生成不同類型的對(duì)象，特別適合對(duì)象創(chuàng)建邏輯複雜或需要根據(jù)條件動(dòng)態(tài)決定類型的情況。

使用場(chǎng)景：

• 創(chuàng)建多種相似類型的對(duì)象（如不同類型的用戶、UI 組件等）
• 避免重複的new操作和條件判斷分散在代碼各處

示例代碼：

 class Dog {
  speak() {
    return "Woof!";
  }
}

class Cat {
  speak() {
    return "Meow!";
  }
}

class AnimalFactory {
  createAnimal(type) {
    if (type === "dog") {
      return new Dog();
    } else if (type === "cat") {
      return new Cat();
    }
    throw new Error("Unknown animal type");
  }
}

// 使用const factory = new AnimalFactory();
const dog = factory.createAnimal("dog");
const cat = factory.createAnimal("cat");

console.log(dog.speak()); // Woof!
console.log(cat.speak()); // Meow!

?優(yōu)點(diǎn)：解耦對(duì)象創(chuàng)建與使用，易於擴(kuò)展新類型。

2. Singleton Pattern（單例模式）

單例模式確保一個(gè)類只有一個(gè)實(shí)例，並提供一個(gè)全局訪問點(diǎn)。在JavaScript 中，由於對(duì)像是引用類型，實(shí)現(xiàn)單例相對(duì)簡(jiǎn)單。

使用場(chǎng)景：

• 全局配置管理
• 日誌記錄器（Logger）
• 數(shù)據(jù)庫(kù)連接池
• 狀態(tài)管理（如Redux store 本質(zhì)也是單例）

實(shí)現(xiàn)方式：

 class Database {
  constructor() {
    if (Database.instance) {
      return Database.instance;
    }
    this.url = "localhost:3000";
    Database.instance = this;
    return this;
  }

  connect() {
    console.log("Connected to DB at " this.url);
  }
}

// 使用const db1 = new Database();
const db2 = new Database();

console.log(db1 === db2); // true

?? 注意：構(gòu)造函數(shù)中判斷是否已存在實(shí)例，如果存在就返回已有實(shí)例，避免重複創(chuàng)建。

?優(yōu)點(diǎn)：節(jié)約資源，保證全局狀態(tài)一致。

?注意：過度使用可能導(dǎo)致代碼難以測(cè)試或耦合度高。

3. Observer Pattern（觀察者模式）

觀察者模式定義了一種一對(duì)多的依賴關(guān)係，當(dāng)一個(gè)對(duì)象狀態(tài)改變時(shí)，所有依賴它的對(duì)像都會(huì)自動(dòng)收到通知。它是事件系統(tǒng)和響應(yīng)式編程的基礎(chǔ)。

使用場(chǎng)景：

• 事件監(jiān)聽機(jī)制（如DOM 事件）
• 數(shù)據(jù)綁定（如Vue 的響應(yīng)式原理）
• 狀態(tài)管理中的訂閱更新

示例代碼：

 class Subject {
  constructor() {
    this.observers = [];
  }

  subscribe(observer) {
    this.observers.push(observer);
  }

  unsubscribe(observer) {
    this.observers = this.observers.filter(obs => obs !== observer);
  }

  notify(data) {
    this.observers.forEach(observer => observer.update(data));
  }
}

class Observer {
  constructor(name) {
    this.name = name;
  }

  update(data) {
    console.log(`${this.name} received:`, data);
  }
}

// 使用const subject = new Subject();

const observer1 = new Observer("Alice");
const observer2 = new Observer("Bob");

subject.subscribe(observer1);
subject.subscribe(observer2);

subject.notify("New message!"); 
// Alice received: New message!
// Bob received: New message!

subject.unsubscribe(observer1);
subject.notify("Second message!");
// Bob received: Second message!

?優(yōu)點(diǎn)：松耦合，支持動(dòng)態(tài)訂閱/取消，適合異步通信。

? 小技巧：現(xiàn)代JS 中可以用EventTarget或發(fā)布/訂閱（Pub/Sub）模式簡(jiǎn)化實(shí)現(xiàn)。

總結(jié)對(duì)比

這三種模式在實(shí)際項(xiàng)目中經(jīng)常結(jié)合使用。比如：

• 用Singleton管理全局狀態(tài)
• 用Observer監(jiān)聽狀態(tài)變化並刷新UI
• 用Factory動(dòng)態(tài)創(chuàng)建組件或服務(wù)

基本上就這些。掌握它們，能讓你的JavaScript 架構(gòu)更清晰，也更容易應(yīng)對(duì)複雜業(yè)務(wù)邏輯。

以上是JavaScript設(shè)計(jì)模式：工廠，Singleton和Observer的詳細(xì)內(nèi)容。更多資訊請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！