前端设计模式：工厂方法模式、单例模式、订阅模式、中介者模式-Toy模板网

这篇具有很好参考价值的文章主要介绍了前端设计模式：工厂方法模式、单例模式、订阅模式、中介者模式。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

工厂方法模式

工厂方法模式是一种创建型设计模式，它提供了一种将对象的创建与使用分离的方式。在工厂方法模式中，我们定义一个工厂接口，该接口声明了一个用于创建对象的方法。具体的对象创建则由实现该接口的具体工厂类来完成。

工厂方法模式的核心思想是将对象的创建延迟到子类中去实现，这样可以在不修改客户端代码的情况下，通过改变具体工厂类来创建不同的对象。

工厂方法模式的优点包括：

客户端代码与具体产品类解耦，客户端只需要关心工厂接口和抽象产品类，而不需要关心具体产品的实现细节。
可以通过添加具体产品类来扩展系统，符合开闭原则。
可以通过配置文件等方式动态切换具体工厂类，实现灵活的对象创建。

工厂方法模式在实际开发中广泛应用，例如在框架中的对象创建、插件系统中的插件加载等场景中都可以使用工厂方法模式来实现灵活的对象创建和管理。

class Factory {
    // 定义一个工厂方法
    static createPlug(type) {
        switch (type) {
            case 'plugA':
                return new plugA()
            case 'plugB':
                return new plugB()
            default:
                throw new Error('Invalid plug type')
        }
    }
}

interface Plug {
    id: string
    name: string
    start(): void
}

// 插件A
class plugA implements Plug {
    id: string
    name: string

    constructor() {
        this.id = 'plugA'
        this.name = 'plugA'
    }
    //启动方法
    start() {
        console.log('plugA启动了')
    }
}
// 插件B
class plugB implements Plug {
    id: string
    name: string

    constructor() {
        this.id = 'plugB'
        this.name = 'plugB'
    }
    //启动方法
    start() {
        console.log('plugB启动了')
    }
}

try {
    const list = ['plugA', 'plugB']
    list.forEach(type => {
        const plug = Factory.createPlug(type)
        plug.start()
    })
} catch (error) {
    console.log('插件错误：', error)
}

单例模式

单例模式是一种创建型设计模式，它确保一个类只有一个实例，并提供一个全局访问点来访问该实例。

在单例模式中，类的构造函数被私有化，这样就不能通过常规的方式创建类的实例。而是通过一个静态方法或者静态变量来获取类的唯一实例。

单例模式的主要特点包括：

类只有一个实例：通过限制类的实例化，确保只有一个实例存在。
全局访问点：通过提供一个全局的访问点，使得其他对象可以方便地访问该实例。

单例模式的应用场景包括：

需要确保只有一个实例的情况，如线程池、数据库连接池等。
需要频繁创建和销毁对象的情况下，可以节省系统资源。
需要全局访问点来管理共享资源的情况。

class Singleton {  
  private static instance: Singleton;  
  
  private constructor() {  
    // 私有化构造函数，防止外部实例化  
  }  
  
  public static getInstance(): Singleton {  
    if (!Singleton.instance) {  
      Singleton.instance = new Singleton();  
    }  
    return Singleton.instance;  
  }  
  
  // 其他类的方法或属性  
  public doSomething() {  
    console.log("Doing something...");  
  }  
}  
  
// 访问单例模式对象  
const singleton = Singleton.getInstance();  
singleton.doSomething();

订阅模式

订阅模式（Publish-Subscribe Pattern）是一种常见的软件设计模式，用于实现对象之间的松耦合通信。在该模式中，存在两种角色：发布者（Publisher）和订阅者（Subscriber）。

发布者负责产生事件或消息，并将其发送给所有订阅者。订阅者则注册对特定事件或消息的兴趣，并在发布者发送相应事件或消息时接收并处理它们。

订阅模式的核心思想是解耦发布者和订阅者之间的关系，使得它们可以独立地演化和扩展。发布者不需要知道订阅者的具体实现，只需要将事件或消息发送给订阅者即可。同样，订阅者也不需要知道发布者的具体实现，只需要注册对感兴趣的事件或消息，并在接收到它们时进行相应的处理。

在实际应用中，订阅模式常用于事件驱动的系统中，例如GUI界面中的事件处理、消息队列系统、观察者模式等。它可以有效地降低系统的耦合度，提高系统的可维护性和可扩展性。

总结起来，订阅模式通过发布者和订阅者之间的松耦合通信，实现了事件或消息的传递和处理。它是一种常见的设计模式，可以应用于各种软件系统中，提高系统的灵活性和可扩展性。

// 发布者
class Publisher {
  private subscribers: Subscriber[] = [];

  // 添加订阅者
  public subscribe(subscriber: Subscriber): void {
    this.subscribers.push(subscriber);
  }

  // 移除订阅者
  public unsubscribe(subscriber: Subscriber): void {
    const index = this.subscribers.indexOf(subscriber);
    if (index !== -1) {
      this.subscribers.splice(index, 1);
    }
  }

  // 发布消息
  public publish(message: string): void {
    console.log(`Publisher: ${message}`);
    this.subscribers.forEach((subscriber) => {
      subscriber.update(message);
    });
  }
}

// 订阅者
class Subscriber {
  private name: string;

  constructor(name: string) {
    this.name = name;
  }

  // 接收并处理消息
  public update(message: string): void {
    console.log(`${this.name} received: ${message}`);
  }
}

// 创建发布者和订阅者
const publisher = new Publisher();
const subscriber1 = new Subscriber("Subscriber 1");
const subscriber2 = new Subscriber("Subscriber 2");

// 订阅者订阅发布者
publisher.subscribe(subscriber1);
publisher.subscribe(subscriber2);

// 发布者发布消息
publisher.publish("Hello, World!");

// 订阅者取消订阅
publisher.unsubscribe(subscriber2);

// 发布者再次发布消息
publisher.publish("Goodbye!");

中介者模式

中介者模式（Mediator Pattern）是一种行为型设计模式，它通过封装一系列对象之间的交互，使得这些对象不需要直接相互引用，从而降低了它们之间的耦合度。

在中介者模式中，中介者对象负责协调和控制一组相关对象的交互。它通过将对象之间的通信集中在中介者对象中，而不是让对象直接相互通信，从而实现对象之间的解耦。

中介者模式的核心思想是将对象之间的交互逻辑集中在中介者对象中，而不是分散在各个对象之间。这样一来，当系统中的对象发生变化时，只需要修改中介者对象的代码即可，而不需要修改其他对象的代码，从而提高了系统的可维护性和扩展性。

比如：聊天室中的成员之间的聊天通常采用了中介者设计模式。中介者设计模式是一种行为型设计模式，它通过将对象之间的交互集中在一个中介者对象中，来减少对象之间的直接耦合。在聊天室中，中介者对象负责接收和分发成员之间的消息，成员之间的通信通过中介者进行，而不是直接相互交流。这种设计模式可以提高系统的可扩展性和灵活性，同时也方便管理和控制成员之间的交互文章来源地址https://www.toymoban.com/news/detail-526304.html

// 定义聊天室类
class ChatRoom {
  private readonly users: Set<User> = new Set();

  // 添加用户
  public addUser(user: User): void {
    this.users.add(user);
  }

  // 移除用户
  public removeUser(user: User): void {
    this.users.delete(user);
  }

  // 发送消息
  public sendMessage(sender: User, message: string): void {
    for (const user of this.users) {
      if (user !== sender) {
        user.receiveMessage(sender, message);
      }
    }
  }
}

// 定义用户类
class User {
  private name: string;

  constructor(name: string) {
    this.name = name;
  }

  // 接收消息
  public receiveMessage(sender: User, message: string): void {
    console.log(`[${sender.name}] ${message}`);
  }
}

// 创建聊天室和用户
const chatRoom = new ChatRoom();
const user1 = new User("User 1");
const user2 = new User("User 2");

// 将用户添加到聊天室
chatRoom.addUser(user1);
chatRoom.addUser(user2);

// 发送消息
chatRoom.sendMessage(user1, "Hello, is there anyone out there?");
chatRoom.sendMessage(user2, "Yes, I'm here.");