前端设计模式概述｜青训营设计模式是在软件设计中常见问题的解决方案的经验总结。它们是一种被广泛接受和验证的最佳实践，旨

设计模式

设计模式是在软件设计中常见问题的解决方案的经验总结。它们是一种被广泛接受和验证的最佳实践，旨在提高代码的可维护性、可重用性和可扩展性。设计模式通过提供通用的、经过测试的解决方案，帮助开发人员在不同情境下更有效地构建高质量的软件系统。

每种设计模式都解决特定类型的问题，它们不是刚性的规则，而是一种指导，开发人员可以根据具体的情况进行选择和调整。设计模式的目标是提高代码的可读性、可维护性和可扩展性，同时促进团队成员之间的共享和理解。

单例模式

单例模式旨在确保一个类只有一个实例，并提供一个全局访问点以访问该实例。它在许多情况下都很有用，比如控制资源访问、限制对象创建、跨组件共享状态等。单例模式的主要特点包括：

只有一个实例： 单例模式确保一个类只有一个实例存在，无论多少次尝试创建该类的实例，都只会返回同一个实例。
全局访问点： 通过一个公共的访问点（方法）来获取该实例，从而使整个应用程序能够方便地访问该实例。
延迟实例化： 通常，在首次访问该实例时才进行实例化，从而节省资源并提高性能。

class Singleton {
    private static instance: Singleton | null = null; // 静态属性，用于保存唯一实例
    private constructor() {} // 私有构造函数，防止直接实例化

    static getInstance(): Singleton {
        if (!Singleton.instance) {
            Singleton.instance = new Singleton();
        }
        return Singleton.instance;
    }

    // 其他方法和属性
    someMethod() {
        console.log("Some method of the Singleton class");
    }
}

// 使用示例
const instance1 = Singleton.getInstance();
const instance2 = Singleton.getInstance();

console.log(instance1 === instance2); // 输出: true，两个实例是同一个
instance1.someMethod(); // 调用实例的方法

在上面的示例中，Singleton 类通过将构造函数设为私有，防止了直接实例化，然后通过静态方法 getInstance 提供全局访问点。在第一次调用 getInstance 方法时，会创建一个实例并将其保存在静态属性 instance 中，之后的调用都会返回这个唯一的实例。

发布订阅模式

发布订阅模式用于在对象之间建立一种发布者和订阅者之间的松散耦合关系。其主要特点包括：

松散耦合： 发布者和订阅者彼此之间没有直接的依赖关系。发布者不需要知道谁订阅了它，订阅者也不需要知道谁发布了信息。这种松散耦合使得系统更具灵活性和可扩展性。
一对多关系： 一个发布者可以有多个订阅者，当发布者的状态发生变化时，所有订阅者都会收到通知并进行相应的处理。
动态注册： 新的订阅者可以随时加入，而不需要修改发布者的代码。
通知机制： 当发布者的状态发生变化时，它会通知所有的订阅者，订阅者可以根据需要进行响应。

interface Observer {
    update(message: string): void;
}

class Publisher {
    private observers: Observer[] = [];

    addObserver(observer: Observer): void {
        this.observers.push(observer);
    }

    removeObserver(observer: Observer): void {
        const index = this.observers.indexOf(observer);
        if (index !== -1) {
            this.observers.splice(index, 1);
        }
    }

    notify(message: string): void {
        this.observers.forEach(observer => observer.update(message));
    }
}

class ConcreteObserver implements Observer {
    private name: string;

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

    update(message: string): void {
        console.log(`${this.name} received message: ${message}`);
    }
}

// 使用示例
const publisher = new Publisher();

const observer1 = new ConcreteObserver("Observer 1");
const observer2 = new ConcreteObserver("Observer 2");

publisher.addObserver(observer1);
publisher.addObserver(observer2);

publisher.notify("Hello, observers!");

publisher.removeObserver(observer1);

publisher.notify("Observer 1 is no longer receiving notifications.");

在这个示例中，Publisher 类代表发布者，负责管理订阅者列表并通知它们。Observer 接口定义了观察者的方法。ConcreteObserver 类实现了 Observer 接口，它会在收到发布者通知时输出相应的消息。通过添加、移除观察者以及发布消息，可以演示发布-订阅模式的特点。

前端设计模式概述 ｜ 青训营

设计模式

单例模式

发布订阅模式

前端设计模式概述｜青训营