前端常见设计模式

汇报人：<XXX>2024-01-25前端常见设计模式目录CONTENTS设计模式概述工厂模式单例模式观察者模式模块化设计模式状态管理设计模式响应式编程与函数式编程相关设计模式01设计模式概述定义设计模式是在软件设计中经常遇到的一些问题的解决方案。这些解决方案是众多软件开发人员经过长时间的试验和错误总结出来的，具有普遍适用性和可重用性。作用使用设计模式可以提高代码的可读性、可维护性和可扩展性，降低代码的耦合度，增加代码的可重用性，从而提高开发效率和软件质量。定义与作用单例模式01确保一个类只有一个实例，并提供一个全局访问点。在前端中，常用于管理全局状态或实现一些只需要一个对象的场景，如弹窗、模态框等。工厂模式02提供一种创建对象的接口，但具体创建的对象类型可以在运行时决定。在前端中，常用于实现组件的动态加载和按需加载。观察者模式（发布-订阅模式）03定义对象间的一种一对多的依赖关系，当一个对象的状态发生改变时，所有依赖于它的对象都得到通知并被自动更新。在前端中，常用于实现事件监听和响应、数据绑定等。前端领域中的设计模式模块模式将相关的代码组织在一起，形成一个独立的模块，通过暴露特定的接口与其他模块进行交互。在前端中，常用于实现模块化开发，提高代码的复用性和可维护性。用原型实例指定创建对象的种类，并且通过拷贝这些原型创建新的对象。在前端中，常用于实现对象的克隆和继承。为其他对象提供一种代理以控制对这个对象的访问。在前端中，常用于实现跨域请求、图片懒加载等场景。定义一系列的算法，把它们一个个封装起来，并且使它们可相互替换。在前端中，常用于实现表单验证、动画效果等场景。原型模式代理模式策略模式前端领域中的设计模式02工厂模式第二季度第一季度第四季度第三季度概念适用场景优点缺点简单工厂模式简单工厂模式是属于创建型模式，又叫做静态工厂方法（StaticFactoryMethod）模式。简单工厂模式是由一个工厂对象决定创建出哪一种产品类的实例。创建对象的过程可能比较复杂，需要很多其他依赖，或者创建对象的过程中需要根据参数的不同返回不同类的实例。将创建实例的工作与使用实例的工作分开，使用者不必关心类对象如何创建，实现了解耦；把初始化实例时的工作放到工厂里进行，使代码更容易理解。工厂类集中了所有实例的创建逻辑，一旦这个工厂不能正常工作，整个系统都会受到影响；增加新产品时，需要修改工厂类的判断逻辑，违背开闭原则。工厂方法模式概念：工厂方法模式是属于创建型模式，它提供了一种创建对象的接口，但具体创建的实例是由子类决定的。工厂方法模式的用意是定义一个创建产品对象的工厂接口，将实际创建工作推迟到子类中。适用场景：创建对象需要使用很多的其他对象，并且负责处理这些对象的创建；一个系统产品有多于一个的产品族，而系统只消费其中某一族的产品。优点：用户只需要知道具体工厂的名称就可得到所要的产品，无须知道产品的具体创建过程；灵活性增强，对于新产品的创建，只需多写一个相应的工厂类；典型的解耦框架。高层模块只需要知道产品的抽象类，无须关心其他实现类，满足迪米特法则、里氏替换原则以及依赖倒置原则。缺点：类的个数容易过多，增加复杂度；增加了系统的抽象性和理解难度；抽象产品只能生产一种产品，此途径较为单一，且确定具体工厂必须选择具体的产品。抽象工厂模式概念：抽象工厂模式是属于创建型模式，它提供了一种方式，可以将实际创建的对象与其使用代码分离。抽象工厂模式与工厂方法模式最大的区别在于，工厂方法模式针对的是一个产品等级结构，而抽象工厂模式则需要面对多个产品等级结构。适用场景：系统中有多个产品族，而每次只使用其中的某一族产品；属于同一种产品族的产品将在一起使用，这一约束必须在系统的设计中体现出来；系统提供一个产品类的库，所有的产品以同样的接口出现，从而使客户端不依赖于具体实现。优点：隔离了具体类的生成，使得客户并不需要知道什么被创建。当一个系统要独立于它的产品的创建、组合和表示时。一个系统要由多个分布的系统构成时。缺点：添加新的产品对像时，难以扩展抽象工厂以便生产新种类的产品。03单例模式懒汉式单例指的是在第一次使用时才创建实例。这种方式的优点是资源利用率高，缺点是线程不安全。在前端开发中，由于JavaScript是单线程运行的，因此不需要考虑线程安全问题。懒汉式单例的实现方式如下懒汉式单例03constructor(){01```javascript02classSingleton{懒汉式单例if(Singleton.instance){returnSingleton.instance;懒汉式单例}Singleton.instance=this;懒汉式单例}}```在上面的代码中，我们定义了一个`Singleton`类，并在构造函数中判断是否已经存在实例。如果存在实例，则直接返回该实例；否则，将当前实例赋值给`Singleton.instance`。懒汉式单例饿汉式单例指的是在类加载时就创建实例。这种方式的优点是线程安全，缺点是资源利用率低。在前端开发中，由于资源相对丰富，因此饿汉式单例也是一种常用的实现方式。饿汉式单例的实现方式如下饿汉式单例123```javascriptclassSingleton{staticinstance=newSingleton();饿汉式单例01constructor(){02if(Singleton.instance){03returnSingleton.instance;饿汉式单例}Singleton.instance=this;饿汉式单例}```在上面的代码中，我们在类定义时就创建了实例，并将其赋值给`Singleton.instance`。在构造函数中，我们同样判断是否已经存在实例，如果存在则直接返回该实例。}饿汉式单例登记式单例登记式单例指的是通过一个全局的注册表来管理单例实例。这种方式的优点是可以灵活地管理多个单例实例，缺点是需要维护一个全局的注册表。在前端开发中，登记式单例可以用于管理多个全局状态或资源。登记式单例的实现方式如下```javascriptclassSingletonRegistry{登记式单例登记式单例constructor(){this.registry={};}register(name,instance){this.registry[name]=instance;登记式单例}returnthis.registry[name];get(name){登记式单例登记式单例01}02}constsingletonRegistry=newSingletonRegistry();03constructor(){if(!singletonRegistry.get('MySingleton')){classMySingleton{登记式单例登记式单例singletonRegistry.register('MySingleton',this);VS}else{returnsingletonRegistry.get('MySingleton');登记式单例}}}登记式单例```在上面的代码中，我们定义了一个`SingletonRegistry`类来管理单例实例的注册表。通过`register`方法可以将一个实例注册到注册表中，并通过`get`方法获取已经注册的实例。在`MySingleton`类中，我们在构造函数中判断是否已经注册了实例，如果没有注册则创建实例并注册到注册表中；如果已经注册则直接返回该实例。登记式单例04观察者模式观察者（Observer）订阅被观察者的对象，当被观察者的状态发生变化时，观察者会接收到通知。要点一要点二被观察者（Subject）维护一个观察者列表，当自身状态发生变化时，通知所有订阅了自己的观察者。观察者与被观察者关系实现方式及示例代码在JavaScript中，观察者模式可以通过自定义事件和事件监听器来实现。以下是一个简单的示例代码实现方式及示例代码010203classSubject{constructor(){```javascriptthis.observers=[];this.state=null;实现方式及示例代码010203}subscribe(observer){this.observers.push(observer);实现方式及示例代码}unsubscribe(observer){this.observers=this.observers.filter(obs=>obs!==observer);实现方式及示例代码实现方式及示例代码}notify(newState){this.state=newState;this.observers.forEach(observer=>observer.update(this.state));实现方式及示例代码实现方式及示例代码01}02}03classObserver{constructor(name){=name;实现方式及示例代码实现方式及示例代码}02update(state){03console.log(`${}receivedupdatewithstate:${state}`);01}//使用示例}实现方式及示例代码constsubject=newSubject();constobserver1=newObserver('Observer1');constobserver2=newObserver('Observer2');实现方式及示例代码01subject.subscribe(observer1);02subject.subscribe(observer2);03subject.notify('Newstate');//输出：Observer1receivedupdatewithstate:Newstate和Observer2receivedupdatewithstate:Newstate04```实现方式及示例代码组件间通信在React、Vue等前端框架中，父子组件间的通信可以通过props和events实现，其中events就是一种观察者模式的实现。子组件可以订阅父组件的事件，当父组件的状态发生变化时，子组件会接收到通知并更新自己的状态。自定义事件前端开发中经常需要实现自定义事件，例如点击按钮后触发一个自定义事件。通过观察者模式，可以方便地实现自定义事件的订阅和发布。数据绑定在MVVM架构的前端框架中，数据绑定是一个核心功能。通过观察者模式，可以实现数据和视图之间的自动更新。当数据发生变化时，视图会自动更新；反之，当视图发生变化时，数据也会自动更新。应用场景分析05模块化设计模式使用`require`命令载入模块。模块引用使用`module.exports`或`exports`导出模块接口。模块定义模块加载时会阻塞后续代码执行，适用于服务器端。同步加载Node.js遵循CommonJS规范。代表性实现CommonJS规范静态导入导出异步加载语言内置代表性实现ES6模块化标准使用`import`和`export`进行模块的导入和导出，实现静态化。ES6模块化标准被JavaScript语言本身支持，无需额外工具。支持异步加载模块，不阻塞主线程。现代浏览器和Node.js（通过Babel等工具转换）。AMD（AsynchronousModuleDefinition）：异步模块定义规范，使用`define`定义模块，`require`加载模块，支持异步加载。代表性实现有RequireJS。CMD（CommonModuleDefinition）：通用模块定义规范，由国内前端社区提出，与AMD类似，但更强调模块的按需加载和懒执行。代表性实现有SeaJS。两者比较：AMD推崇依赖前置，即在定义模块时声明其依赖的模块；而CMD推崇依赖就近，即在需要时再去加载依赖的模块。010203AMD和CMD规范06状态管理设计模式四个基本概念Flux架构包含四个基本概念，分别是Action（动作）、Dispatcher（派发器）、Store（数据仓库）和View（视图）。Dispatcher接收Action并传递给Store的唯一入口，提供注册回调的功能，用于处理Action的分发和Store的更新。View展示应用状态的视图层，监听Store状态变化并反映到用户界面上。单向数据流Flux架构中数据流动是单向的，从数据源到视图，通过明确的更新路径保证数据一致性。Action表示应用中的状态改变，是数据的载体，通常包含类型和数据两部分。Store管理应用状态的数据仓库，接收Dispatcher传递的Action，并根据Action类型更新自身状态。010203040506Flux架构思想实现原理Redux是一个可预测的状态管理库，通过维护一个全局的状态树（store）来管理应用状态。它提供了一套明确的状态管理流程，包括定义Action、创建Reducer、初始化Store以及使用dispatch方法触发状态更新。创建动作类型常量并定义对应的动作创建函数。编写纯函数式的reducer，根据传入的旧状态和动作类型返回新状态。使用createStore方法创建store，传入根reducer作为参数。在组件中通过dispatch方法触发动作，从而更新store中的状态。定义Action初始化Store触发状态更新创建ReducerRedux实现原理及使用方法Vuex是Vue.js官方提供的状态管理库，用于在Vue应用中实现集中式状态管理。Vuex的核心概念包括State（状态）、Getter（获取器）、Mutation（变化）和Action（动作）。State：Vuex使用单一状态树来存储应用的所有状态，每个应用仅包含一个store实例。Getter：用于从state中派生出一些状态，例如过滤或计算后的数据。Mutation：修改state的唯一途径是通过提交mutation，每个mutation都有一个类型和一个处理器函数。Action：类似于mutation，但是可以包含任意异步操作，通过提交mutation间接更新状态。Vuex状态管理库介绍07响应式编程与函数式编程相关设计