前言：前端设计模式是指在前端开发中广泛使用的一些代码组织和设计技巧，目的是提高代码的可维护性、可读性和可扩展性。
设计模式是对软件设计开发过程中反复出现的某类问题的通用解决方案。设计模式更多的是指导思想和方法论，而不是现成的代码，当然每种设计模式都有每种语言中的具体实现方式。学习设计模式更多的是理解各种模式的内在思想和解决的问题。
设计模式可以分为三大类：
结构型模式(Structural Patterns): 通过识别系统中组件间的简单关系来简化系统的设计。
创建型模式(Creational Patterns): 处理对象的创建，根据实际情况使用合适的方式创建对象。常规的对象创建方式可能会导致设计上的问题，或增加设计的复杂度。创建型模式通过以某种方式控制对象的创建来解决问题。
行为型模式(Behavioral Patterns):用于识别对象之间常见的交互模式并加以实现，如此，增加了这些交互的灵活性。
下面介绍几种在前端开发中常用的设计模式
1.工厂模式
工厂模式（Factory Pattern）是将对象的创建和使用分离，由工厂类负责创建对象并返回。在前端开发中，可以使用工厂模式来动态创建组件。
前端中的工厂模式是一种创建对象的设计模式，它可以让我们封装创建对象的细节，我们使用工厂方法而不是直接调用 new 关键字来创建对象，使得代码更加清晰、简洁和易于维护。在前端开发中，工厂模式通常用于创建多个相似但稍有不同的对象，比如创建一系列具有相同样式和行为的按钮或者表单。
在实现工厂模式时，通常需要创建一个工厂函数（或者叫做工厂类），该函数可以接受一些参数，并根据这些参数来创建对象。例如，可以创建一个ButtonFactory函数，它接受一个type参数，用于指定按钮的类型，然后根据type参数创建不同类型的按钮对象。
使用工厂模式可以将对象创建的过程与具体的业务逻辑分离开来，从而提高代码的可重用性和可维护性。
2.单例模式（Singleton Pattern）
保证一个类只有一个实例，并提供一个访问它的全局访问点。在前端开发中，可以使用单例模式来管理全局状态和资源。
单例模式可以确保在程序运行期间，某个类只有一个实例，并且该实例可以在任何地方访问。
优点
1.可以来划分命名空间，从而清除全局变量所带来的危险。
2.利用分支技术来来封装浏览器之间的差异。
3.可以把代码组织的更为一体，便于阅读和维护
缺点
由于单例模式提供的是一种单例访问，所以它有可能导致模块间的强耦合
使用场景
浏览器的window对象就是一个单例，在JavaScript开发中，对于这种只需要一个的对象，我们的实现往往使用单例。
3.发布-订阅模式（Publish-SubscribePattern）
也叫消息队列模式，它是一种将发布者和订阅者解耦的设计模式。在前端开发中，可以使用发布-订阅模式来实现组件之间的通信。
JavaScript中的发布/订阅模式（Pub/Sub）是一种常用的设计模式。它允许在应用程序中定义对象之间的一对多的依赖关系，当一个对象的状态发生变化时，所有依赖于它的对象都会被通知和更新。
在发布/订阅模式中，有两种类型的对象：发布者和订阅者。发布者是事件的发出者，它通常维护一个事件列表，并且可以向列表中添加或删除事件。当某个事件发生时，它会将这个事件通知给所有订阅者。订阅者则是事件的接收者，它们订阅感兴趣的事件，并且在事件发生时接收通知。。
发布订阅模式可以帮助我们实现松耦合的设计，让对象之间的依赖关系变得更加灵活。它在前端开发中的应用非常广泛，例如 Vue.js 中的事件总线、Redux 中的 store 等。
4.观察者模式（Observer Pattern）
当对象间存在一对多的关系时，使用观察者模式。当被观察的对象发生变化时，其所有的观察者都会收到通知并进行相应的操作。在JavaScript中，可以使用回调函数或事件监听来实现观察者模式。
在前端开发中，观察者模式常被用来实现组件间的数据传递和事件处理。比如，当一个组件的状态发生改变时，可以通过观察者模式来通知其他组件更新自身的状态或视图。
优点
1.观察者模式实现了观察者和目标之间的抽象耦合
2.观察者模式实现了动态联动
3.观察者模式支持广播通信
缺点： 可能会引起无谓的操作
5.中介者模式（Mediator Pattern）
通过一个中介对象来封装一系列对象之间的交互。在JavaScript中，可以使用事件调度器来实现中介者模式。
在前端开发中，中介者模式常常被用于管理复杂的用户界面或组件之间的交互，比如 GUI 组件、聊天室、游戏等等。通过引入一个中介者对象，各个组件可以向中介者对象发送消息或事件，而不需要知道消息或事件的接收者是谁。中介者对象负责接收并分发消息或事件，从而实现组件之间的解耦和统一管理。
6.装饰者模式（Decorator Pattern）
动态地给一个对象添加额外的职责。在前端开发中，可以使用装饰者模式来动态修改组件的行为和样式。
优点：： 1.不需要修改对象原本的结构来进行功能添加 装饰对象和原对象具有相同的接口，可以使客户以与原对象相同的方式使用装饰对象
2.装饰对象中包含原对象的引用，即装饰对象为真正的原对象在此包装的对象
缺点：
1.在遇到用装饰器包装起来的对象时，那些依赖于类型检查的代码会出问题。
2.使用装饰器模式往往会增加架构的复杂程度。
使用场景:
如果需要为类增添特性或职责，而从该类派生子类的解决办法并不实际的话，就应该使用装饰器模式。
7.适配器模式（Adapter Pattern）
将一个类的接口转化为客户端所期望的接口，使得原本不兼容的类可以一起工作。在前端开发中，可以使用适配器模式来处理不同浏览器之间的兼容性问题。
适配器模式通常包含三个角色：客户端、目标对象和适配器对象。客户端调用适配器对象的接口，适配器对象再调用目标对象的接口，将目标对象的接口转换为客户端需要的接口，从而实现兼容性。
另外，适配器模式也可以用于将不同的第三方组件或插件进行整合和兼容。例如，当一个网站需要使用不同的图表库来绘制图表时，可以使用适配器模式将这些图表库进行封装，从而实现统一的调用接口，方便使用和维护。
优点：
适配器有助于避免大规模改写现有客户的代码。其工作机制是用一个新的接口对现有的类的接口进行包装。
缺点：
如果现有API还未 定形，新接口还未定形，那么适配器可能不会一直管用。
8.职责链模式（Chain of Responsibility Pattern） 为了避免请求发送者与多个请求处理者耦合在一起，将所有请求的处理者通过前一对象记住其下一个对象的方式连成一条链，然后请求沿着链传递，直到有一个对象处理它为止。在JavaScript中，可以使用函数对象或对象字面量来实现职责链模式。
职责链模式通常涉及一系列处理对象，每个对象都负责处理请求的一部分，并将请求传递给下一个对象，直到请求得到满足或者处理结束。这种方式可以将系统中的不同操作解耦，从而提高系统的灵活性和可维护性。
在 JavaScript 中，职责链模式的实现通常涉及使用一个处理对象的链表，其中每个对象都有一个指向下一个对象的引用。当请求进入系统时，它首先被传递给链表中的第一个对象。如果这个对象不能处理请求，则将请求传递给链表中的下一个对象，直到找到能够处理请求的对象为止。
9.策略模式（Strategy Pattern）
定义一系列的算法，将每一个算法都封装起来，并且使它们可以相互替换。在前端开发中，可以使用策略模式来动态切换组件的算法和行为。
它可以让我们在不改变对象本身的情况下，通过修改其内部的算法实现不同的行为。策略模式常常被用于实现一些复杂的业务逻辑，特别是需要根据不同的条件进行处理的情况。
