前端设计模式基础笔记

        前端设计模式是指在前端开发中经常使用的一些解决问题的模式或思想。它们是经过实践证明的最佳实践，可以帮助我们更好地组织和管理我们的代码。

一、单例模式（Singleton Pattern）

        单例模式是一种创建型模式，它保证一个类只有一个实例，并提供一个全局访问点。在前端开发中，单例模式常用于管理全局状态和共享资源。例如，我们可以使用单例模式来实现一个全局的状态管理器，用于存储和管理应用程序的状态信息。

        实现单例模式的关键在于将构造函数设置为私有，禁止外部直接创建实例。同时，我们需要提供一个静态方法来获取单例实例，该方法会判断实例是否已经存在，如果不存在则创建一个新的实例。

        单例模式中Class的实例个数最多为1。当需要一个对象去贯穿整个系统执行某些任务时，单例模式就派上了用场。而除此之外的场景尽量避免单例模式的使用，因为单例模式会引入全局状态，而一个健康的系统应该避免引入过多的全局状态。

作用：确保一个类只有一个实例，并提供全局访问点。

实现方式：使用一个私有变量来存储唯一的实例，通过一个公共的静态方法来获取实例。

示例：在前端开发中，可以使用单例模式来创建一个全局状态管理器，用于管理应用程序的状态。

二、工厂模式（Factory Pattern）

        工厂模式是一种创建型模式，它定义了一个用于创建对象的接口，但是让子类决定实例化哪个类。通过工厂方法来创建对象，避免在代码中直接使用new操作符，从而使代码更加灵活和可维护。在前端开发中，工厂模式常用于创建UI组件和Ajax请求对象等。

        工厂模式可以分为简单工厂模式、工厂方法模式和抽象工厂模式。简单工厂模式是最基础的工厂模式，它由一个工厂类负责创建所有的产品实例。工厂方法模式是在简单工厂模式的基础上，将工厂类抽象成一个接口，让子类实现具体的工厂方法。抽象工厂模式是在工厂方法模式的基础上，将工厂接口抽象成一个抽象工厂接口，让子类实现具体的产品族工厂。

作用：通过工厂类创建对象，隐藏对象的创建逻辑。

实现方式：定义一个工厂类，根据不同的条件创建不同的对象，并返回统一的接口。

示例：在前端开发中，可以使用工厂模式来创建不同类型的组件，根据参数的不同返回相应的组件实例。

三、观察者模式（Observer Pattern）

        观察者模式是一种行为型模式，它定义了一种一对多的依赖关系，让多个观察者对象同时监听某一个主题对象，当一个对象的状态发生改变时，所有依赖于它的对象都会被通知并自动更新。当主题对象发生变化时，它会通知所有的观察者对象，让它们更新自己的状态。

        在前端开发中，观察者模式常用于实现事件系统。例如，我们可以定义一个事件主题对象，让多个事件监听器对象监听该主题对象。当主题对象触发事件时，它会通知所有的监听器对象执行相应的处理函数。

作用：定义一种一对多的依赖关系，当一个对象状态改变时，所有依赖它的对象都会得到通知并自动更新。

实现方式：定义一个主题（Subject）和多个观察者（Observer），主题维护观察者的列表，当主题的状态改变时，通知观察者进行更新。

示例：在前端开发中，可以使用观察者模式来实现事件的监听和响应，当某个事件触发时，通知所有注册的观察者进行相应的处理。

四、原型模式（Prototype Pattern）

        原型模式是一种创建型设计模式，它通过复制现有对象来创建新对象，而无需依赖具体类。原型模式可以帮助我们在运行时动态地创建对象，避免了使用传统的实例化方式，从而提高了对象的创建效率。

作用：通过复制现有对象来创建新对象，避免了创建大量相似对象的开销。

实现方式：通过克隆现有对象，创建一个新的对象实例，避免了使用构造函数创建对象。

示例：在前端开发中，可以使用原型模式来创建复杂的对象或组件，提高性能和可维护性。

五、装饰器模式（Decorator Pattern）

        装饰器模式是一种结构型模式，它允许动态地向一个对象添加额外的功能，而不需要修改对象的结构。通过包装一个对象来扩展其功能，而不是通过继承来实现。这种模式可以使代码更加灵活和可扩展。在前端开发中，装饰器模式常用于添加日志、缓存、性能监控等功能。

        装饰器模式可以分为类装饰器和方法装饰器。类装饰器用于装饰类，它可以添加静态和实例方法、属性和元数据。方法装饰器用于装饰方法，它可以添加参数、返回值和元数据等。

作用：动态地给对象添加额外的功能，不改变其原有结构。

实现方式：使用包装器（Wrapper）来包裹原有对象，并在其中添加新的功能。

示例：在前端开发中，可以使用装饰器模式来扩展或修改现有组件的功能，例如给按钮组件添加点击统计功能。

六、适配器模式（Adapter Pattern）

                适配器模式是一种结构型模式，它允许将不兼容的对象包装成兼容的对象，以满足客户端的需求。（将一个类的接口转换成客户端所期望的另一个接口，从而使原本不兼容的类可以一起工作。）在前端开发中，适配器模式常用于兼容不同的API接口和第三方库。

适配器模式可以分为类适配器模式和对象适配器模式。类适配器模式使用继承来实现适配器，它可以将适配器对象和被适配对象的接口进行统一。对象适配器模式使用组合来实现适配器，它可以在适配器对象中保存被适配对象的引用，并将其接口进行转换。

作用：将一个类的接口转换成客户端所期待的另一种接口，使得原本不兼容的类可以一起工作。

实现方式：创建一个适配器类，实现客户端期望的接口，并在内部使用原有类的方法实现适配。

示例：在前端开发中，适配器模式可用于将不同框架或库之间的差异进行适配，以便于更好地整合使用。

七、策略模式（Strategy Pattern）

        策略模式是一种行为型模式，它定义了一系列算法，并将每个算法封装起来，使得它们可以互换，并在运行时根据需要选择相应的策略来解决问题。在前端开发中，策略模式常用于处理表单验证、排序和过滤等问题。

        策略模式由三个部分组成：策略类、上下文类和客户端类。策略类封装了具体的算法，上下文类负责调用策略类的算法，客户端类负责创建上下文类并设置具体的策略类。

作用：定义一系列的算法，将其封装成独立的策略类，使得它们可以相互替换。

实现方式：将每个策略算法封装在独立的类中，并通过一个上下文类来调用不同的策略。

示例：在前端开发中，策略模式可用于根据不同的用户角色选择不同的权限验证策略。

八、MVC模式（Model-View-Controller Pattern）

        MVC模式将应用程序分为三个部分：模型、视图和控制器。模型负责处理数据，视图负责呈现数据，控制器协调模型和视图之间的交互。

作用：将应用程序分为三个组件：模型（Model）、视图（View）和控制器（Controller）。

实现方式：模型负责处理数据和业务逻辑，视图负责展示数据，控制器负责处理用户输入和控制流程。

示例：在前端开发中，MVC模式可用于将界面逻辑和业务逻辑分离，提高代码的可读性和可维护性。

九、MVVM模式（Model-View-ViewModel Pattern）

        MVVM模式是MVC模式的一种变体，将控制器改为视图模型。视图模型负责处理用户界面和业务逻辑之间的交互。

作用：在MVVM模式中，视图（View）负责展示数据和接收用户操作，模型（Model）表示应用程序的数据和业务逻辑，ViewModel则处理视图和模型之间的交互。

实现方式：使用数据绑定技术，将视图和模型进行绑定，使得数据的变化能够自动反映到视图上，同时将用户操作映射到相应的模型操作。

示例：在前端开发中，MVVM模式可用于实现数据驱动的界面开发，简化复杂的DOM操作。

（图片来自网络，肯定不是小白自己做的啦！~）