前端常用设计模式

在开发中，设计模式是解决常见软件设计问题的经典方法。设计模式通过抽象化的解决方案来帮助开发者写出可维护、可扩展和灵活的代码。本文将介绍几种常见的前端设计模式，并讨论它们的应用场景和优势。

一. 单例模式

定义：通过控制类的实例化过程，确保全局只有一个实例存在，并提供全局访问点。

应用场景：

• 全局共享状态：当多个部分需要访问相同的数据或资源时，使用单例模式可以避免数据的冗余拷贝和不一致性。例如，配置管理器、数据库连接池、日志记录器等。
• 控制访问：例如，线程池管理器、缓存管理器等，需要对资源进行有效控制和分配，避免创建多个实例带来的不必要开销。
• 懒加载：只有在需要时才创建实例，避免了不必要的资源消耗。

示例：

class Singleton {constructor() {if (Singleton.instance) {return Singleton.instance;  // 返回已存在的实例
    }this.data = [];Singleton.instance = this;}addData(item) {this.data.push(item);}getData() {return this.data;}
}const instance1 = new Singleton();
instance1.addData('item1');
console.log(instance1.getData());  // ['item1']

const instance2 = new Singleton();
console.log(instance2.getData());  // ['item1']
console.log(instance1 === instance2);  // true

简化说明：

• 第一次创建实例：实例化 Singleton 类，并保存到 Singleton.instance。
• 第二次及之后创建实例：直接返回保存的 Singleton.instance，不会重新创建实例。

最终 instance1 === instance2 为 true，因为它们实际上指向同一个实例。

优点：

• 控制实例数量，节省内存。
• 全局访问点，方便管理全局状态。

二、工厂模式

定义：隐藏 new 关键字，通过工厂函数创建实例。每次调用工厂函数时，都会创建一个新的实例

应用场景：

• 需要根据不同的条件创建不同类型的对象。
• 避免直接使用 new，隐藏对象创建的复杂性。

class Button {render() {console.log('Rendering a button');}
}class Input {render() {console.log('Rendering an input');}
}class WidgetFactory {static createWidget(type) {switch(type) {case 'button':return new Button();case 'input':return new Input();default:throw new Error('Unknown widget type');}}
}const button = WidgetFactory.createWidget('button');
button.render();  // Rendering a button

优点：

• 可以动态决定创建的对象类型。
• 适用于复杂对象的创建，解耦客户端与具体类的依赖。

三、观察者模式

定义：一个对象（被观察者）维护一系列依赖于它的对象（观察者），并在自身状态发生变化时通知所有观察者。

实际应用场景：

• 消息订阅系统
• 事件处理系统
• UI控件状态更新
• 数据库监听器

前端的事件监听机制就是观察者模式的一个典型应用。

DOM事件系统：

• DOM元素是被观察者(Subject)
• 事件处理函数是观察者(Observer)
• addEventListener是注册观察者的方法
• removeEventListener是移除观察者的方法
• 事件触发时，所有注册的处理函数都会被调用

示例：

// 传统DOM事件监听
const button = document.querySelector('#myButton');// 添加观察者(事件监听器)
button.addEventListener('click', function(event) {console.log('按钮被点击了!');
});// 可以添加多个观察者
button.addEventListener('click', function(event) {console.log('另一个观察者收到点击事件');
});

优点：

• 松耦合，观察者和主题之间没有直接依赖。
• 适用于处理多个组件的状态同步。

四、发布订阅模式

定义：其中“发布者”发布消息，“订阅者”订阅消息并响应消息的变化。发布者和订阅者之间没有直接的联系，它们通过一个中介（通常是事件总线、消息队列等）进行通信。

发布订阅模式（Publish-Subscribe）和观察者模式（Observer）之间的主要区别在于事件通道（Event Channel）的引入。

观察者模式的特点

• 直接关联：在观察者模式中，观察者直接依赖于主题。主题维护一个观察者列表，通知所有注册的观察者。
• 一对多关系：通常，主题是单一的，而观察者可以有多个。因此，它的关系是“一个主题，多观察者”。

发布订阅模式的特点

• 松耦合：发布者和订阅者之间没有直接联系。它们通过事件通道进行通信，这让它们更加独立。
• 多对多关系：一个事件可以有多个订阅者，发布者也可以发布多个事件。订阅者可以选择订阅多个事件。

发布订阅模式的组成

• 发布者（Publisher）：负责发布事件或消息。
• 订阅者（Subscriber）：对感兴趣的事件进行订阅，并做出响应。
• 事件总线/消息中介（Event Bus / Message Broker）：负责管理发布的事件和订阅者的监听。它连接发布者和订阅者，确保事件能够正确传递给订阅者。

示例：

// 发布订阅模式示例（事件通道实现）
class EventBus {constructor() {this.events = {};}subscribe(event, listener) {if (!this.events[event]) {this.events[event] = [];}this.events[event].push(listener);}publish(event, data) {const listeners = this.events[event];if (listeners) {listeners.forEach(listener => listener(data));}}unsubscribe(event, listener) {const listeners = this.events[event];if (listeners) {this.events[event] = listeners.filter(l => l !== listener);}}
}// 使用事件通道
const eventBus = new EventBus();
const subscriber1 = (data) => console.log(`Subscriber 1 received: ${data}`);
const subscriber2 = (data) => console.log(`Subscriber 2 received: ${data}`);eventBus.subscribe("event1", subscriber1);
eventBus.subscribe("event1", subscriber2);// 发布事件
eventBus.publish("event1", "Hello, world!");// 取消订阅
eventBus.unsubscribe("event1", subscriber1);// 再次发布事件
eventBus.publish("event1", "Second message.");

优缺点

• 松耦合：发布者和订阅者之间没有直接联系，它们只通过事件通道进行通信。这样它们是高度解耦的，适用于复杂的异步系统。
• 灵活性高：订阅者可以选择订阅感兴趣的事件，发布者可以自由发布事件，而不需要关心订阅者的具体实现。
• 事件管理：通过事件通道集中管理所有事件和订阅者，避免了多个主题间的耦合。

五、装饰器模式

定义：它允许动态地给一个对象添加一些额外的职责，而不需要修改其结构。换句话说，装饰器模式通过创建装饰类来“包装”原始对象，并在不改变原始对象的基础上扩展其功能。

应用场景：

• UI 组件的增强：比如为按钮、文本框等组件添加功能，例如添加边框、阴影、事件处理等功能，而无需修改原有的组件代码。
• 流式API：装饰器模式常用于构建流式API。例如，JavaScript 中的 Array 对象方法链式调用（map()、filter() 等）本质上使用了装饰器模式来增强对象的方法。
• 权限控制：在对象上动态地添加权限验证功能，使用装饰器动态地给用户对象增加访问控制功能。
• 日志记录、性能监控：通过装饰器为方法添加日志记录或性能计时功能，而无需修改原始业务逻辑。

示例：

// Component（组件）
class Coffee {cost() {return 5;  // 基础咖啡的价格
  }
}// ConcreteComponent（具体组件）
class BasicCoffee extends Coffee {cost() {return super.cost();  // 返回基础咖啡的价格
  }
}// Decorator（装饰器）
class CoffeeDecorator extends Coffee {constructor(coffee) {super();this.coffee = coffee;  // 持有一个具体的Coffee对象
  }cost() {return this.coffee.cost();  // 委托给被装饰的对象
  }
}// ConcreteDecorator（具体装饰器）
// 装饰器1：添加牛奶
class MilkDecorator extends CoffeeDecorator {cost() {return this.coffee.cost() + 2;  // 加2元牛奶
  }
}// 装饰器2：添加糖
class SugarDecorator extends CoffeeDecorator {cost() {return this.coffee.cost() + 1;  // 加1元糖
  }
}// 创建基础咖啡对象
let coffee = new BasicCoffee();// 装饰咖啡：添加牛奶
coffee = new MilkDecorator(coffee);// 装饰咖啡：添加糖
coffee = new SugarDecorator(coffee);console.log(`Total cost: ${coffee.cost()}$`);  // 输出：Total cost: 8$

优点

• 灵活性：装饰器模式使得对象的功能扩展更加灵活，可以在运行时根据需要添加或删除功能，而不需要修改原始类。
• 可维护性：可以在不修改原始类的基础上扩展功能，这使得原始代码保持简洁且不易破坏。
• 符合开放封闭原则：装饰器模式遵循开放封闭原则，即“对扩展开放，对修改封闭”。你可以扩展对象的行为，而不需要修改已有的类。
• 组合多种功能：你可以通过装饰器的组合，灵活地为对象组合多个功能，而不需要创建大量的子类。

缺点

• 增加了类的数量：使用装饰器模式时，每添加一个新的功能就需要创建一个装饰器类，这可能会导致类的数量增加。
• 管理复杂性：当有很多装饰器时，管理和维护它们的关系可能变得复杂，特别是在多个装饰器互相依赖时。
• 性能开销：每次调用时都需要通过装饰器链传递方法，可能会导致一定的性能损耗。

六、代理模式

定义：通过代理对象来控制客户端对目标对象的访问，代理对象可以在访问目标对象之前或之后添加额外的操作。

应用场景：

• 想控制对某个对象的访问。
• 想延迟对象的初始化，或控制访问过程中的权限。
• 想实现访问的日志记录、缓存、性能监控等功能。

示例：

// Subject（主题）
class Database {query() {console.log("Executing database query...");}
}// RealSubject（真实主题）
class RealDatabase extends Database {query() {console.log("Querying real database...");}
}// Proxy（代理）
class DatabaseProxy extends Database {constructor(realDatabase, userRole) {super();this.realDatabase = realDatabase;this.userRole = userRole; // 用户角色，用于权限控制
  }query() {if (this.userRole === "admin") {console.log("Permission granted, proceeding with the query.");this.realDatabase.query();} else {console.log("Permission denied. Access is restricted.");}}
}// 客户端使用代理对象来进行访问
const realDatabase = new RealDatabase();// 使用代理进行访问，并控制权限
const proxyAdmin = new DatabaseProxy(realDatabase, "admin");
proxyAdmin.query();  // Output: Permission granted, proceeding with the query.//         Querying real database...

const proxyUser = new DatabaseProxy(realDatabase, "user");
proxyUser.query();  // Output: Permission denied. Access is restricted.

解释

• Database（主题）：是一个抽象类或接口，定义了 query() 方法，客户端通过它来访问目标对象。
• RealDatabase（真实主题）：继承自 Database，实现了 query() 方法，表示真实的数据库操作。
• DatabaseProxy（代理）：继承自 Database，持有一个 RealDatabase 对象的引用，并在 query() 方法中根据权限控制是否允许访问数据库。如果是 admin，则调用 realDatabase.query()，否则拒绝访问。

代理模式的核心在于通过 DatabaseProxy 来控制访问 RealDatabase 的权限，在不修改 RealDatabase 类的情况下增加了访问控制的功能。

优点

• 控制访问：通过代理对象，可以控制对目标对象的访问，例如权限控制、访问计数等。
• 透明性：客户端通过代理对象访问真实对象，通常客户端并不关心是通过代理还是直接访问目标对象，代理可以透明地增加功能。
• 扩展性：通过代理可以方便地添加额外的功能，而不需要修改真实对象的代码。这有助于遵循开放封闭原则。