前端设计模式｜ 青训营

一、设计模式分类

1. 创建型设计模式：

   • 工厂模式（Factory Pattern）：用于创建对象的模式，通过工厂方法来统一创建对象的过程。
   • 单例模式（Singleton Pattern）：确保一个类只有一个实例，并提供全局访问点。

2. 结构型设计模式：

   • 适配器模式（Adapter Pattern）：将一个类的接口转换成客户端所期望的另一个接口。
   • 装饰器模式（Decorator Pattern）：动态地给对象添加额外的职责。
   • 外观模式（Facade Pattern）：为复杂子系统提供一个简单的接口。

3. 行为型设计模式：

   • 观察者模式（Observer Pattern）：定义对象之间的一对多依赖关系，当一个对象状态改变时，其相关依赖对象都会收到通知。
   • 策略模式（Strategy Pattern）：定义一系列算法，将它们封装起来，并且使它们可以互相替换。
   • 命令模式（Command Pattern）：将请求封装成对象，以便可以用不同的请求对客户端进行参数化。

二、浏览器中的设计模式

单例模式和发布订阅模式是两种常见的设计模式，它们在前端开发中经常被使用。

• 单例模式是一种创建型设计模式，它的目的是确保一个类只有一个实例，并提供全局访问点。在前端开发中，单例模式常用于管理全局状态或资源，例如全局的配置信息、数据缓存等。通过使用单例模式，可以避免多个实例之间的状态冲突和资源浪费。

• 发布订阅模式是一种行为型设计模式，它定义了对象之间的一对多依赖关系。当一个对象的状态发生改变时，所有相关的订阅者都会收到通知并进行相应的处理。在前端开发中，发布订阅模式常用于解耦组件之间的通信，例如组件间的事件传递、全局消息的发布与订阅等。通过使用发布者-订阅者模式，可以实现更灵活、解耦的组件通信方式。

三、JavaScript中的设计模式

• 原型模式（Prototype Pattern）是一种创建型设计模式，它通过复制现有对象来创建新的对象，而不是通过实例化类来创建。原型模式适用于创建复杂对象或者创建成本较高的对象，通过复制已有对象可以提高创建对象的效率。

• 代理模式（Proxy Pattern）是一种结构型设计模式，它为其他对象提供一种代理以控制对这个对象的访问。代理模式可以在不改变原有代码的情况下，增加额外的功能或者控制访问权限。常见的代理模式包括虚拟代理、远程代理、保护代理等。

• 迭代器模式（Iterator Pattern）是一种行为型设计模式，它提供一种方法来顺序访问一个聚合对象中的各个元素，而不需要暴露该对象的内部表示。迭代器模式可以将遍历算法与聚合对象分离，使得聚合对象的内部结构可以独立变化，同时也提供了一种统一的遍历接口。

这些设计模式都在前端开发中有着广泛的应用。原型模式可以用于创建复杂对象，代理模式可以用于控制访问和增加额外功能，迭代器模式可以用于遍历聚合对象。