前端宝典十六：深入浅出8大设计模式

2024-08-24 13:20
文章标签 设计模式 深入浅出 前端 frontend 十六 宝典

本文主要是介绍前端宝典十六：深入浅出8大设计模式，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

本文主要探讨前端开发中的各种设计模式，主要分类有：

  • 单例模式
  • 建造者模式
  • 代理模式
  • 装饰器模式
  • 适配器模式
  • 策略模式
  • 观察者模式
  • 发布订阅模式

通过对他们实际开发中的使用场景的解析，深入浅出的一起更全面直观的进行学习：

一、单例模式

介绍：

单例模式确保一个类只有一个实例，并提供一个全局访问点。

实际使用场景：

实现全局唯一的状态管理，如全局配置对象、日志记录器等。

优点：

  • 减少系统资源开销，因为只创建一个实例。
  • 提供全局访问点，方便在不同部分的代码中使用。

缺点：

  • 违反单一职责原则，因为单例类可能承担过多的职责。
  • 可能会导致代码的紧耦合，因为其他部分的代码都依赖于这个单例。

代码实现1：

class Singleton {private static instance: Singleton;private constructor() {}public static getInstance(): Singleton {if (!Singleton.instance) {Singleton.instance = new Singleton();}return Singleton.instance;}public someMethod(): void {console.log('Singleton method called.');}
}const singleton1 = Singleton.getInstance();
const singleton2 = Singleton.getInstance();
console.log(singleton1 === singleton2); // true

通过静态方法 getInstance 来获取唯一的实例。如果实例不存在则创建一个新的实例并保存起来，下次调用时直接返回已有的实例。

代码实例2

element-ui对于全局loading的处理，使用的就是单例模式进行控制，每次只能触发一个全局loading

let fullscreenLoading;
const loading = (options = {}) =>{	// options不传的话默认是fullscreenoptions = merge({}, defaults, options);if(options.fullscreen && fullscreenLoading){return fullscreenLoading; // 存在直接return}let parent = options.body? document.body: options.target;let instance = new LoadingConstrutor({el: document.createElement('div')});if (options.fullscreen) {fullscreenLoading = instance}return instance
}

这样通过Element的loading的时候，如果同时调用两次，只有一个loading的遮罩层，不会有两个

二、建造者模式

介绍：

将一个复杂对象的构建与它的表示分离，使得同样的构建过程可以创建不同的表示。目的是为了生成对象，把复杂的创建过程从构造函数分离出来，然后在不改变原有构造函数的基础上，创建各种各样的对象。

实际使用场景：

构建复杂的表单对象、配置对象等。

优点：

  • 使得对象的创建过程更加清晰，易于理解和维护。
  • 可以方便地创建不同表示的对象，提高了代码的灵活性。

缺点：

  • 增加了代码的复杂性，需要创建多个类来实现建造者模式。
  • 对于简单的对象创建，可能会显得过于繁琐。

代码实现：

class Product {parts: string[] = [];addPart(part: string): void {this.parts.push(part);}
}class Builder {buildPartA(): void {// 构建部分 A 的逻辑}buildPartB(): void {// 构建部分 B 的逻辑}getResult(): Product {const product = new Product();product.addPart('Part A');product.addPart('Part B');return product;}
}const builder = new Builder();
const product = builder.getResult();
console.log(product.parts);

Builder 类负责构建复杂对象 Product，通过不同的方法逐步构建产品的各个部分，最后返回构建好的产品。

如果我们创建一个函数，参数不一定，为了方便以后的扩展，可以使用建造者模式，参数中传入默认值的方法：

function getPhone({size,screen = 'OLED',price = 100,discount = 10
}={}){console.log('size', size);console.log('screen', screen);console.log('price', price);console.log('discount', discount);
}
getPhone({size: 4, price: 200})

上面代码中通过传入参数默认值，很方便的设置参数，并且参数的顺序也不重要，未来在扩展的时候不需要担心太多地方调用传参是否会引起问题。

三、代理模式

介绍：

为其他对象提供一种代理以控制对这个对象的访问。

实际使用场景：

  • 图片懒加载、数据预加载。
  • 权限控制等。

优点：

  • 可以在不改变目标对象的情况下，为其添加额外的功能。
  • 可以控制对目标对象的访问，提高安全性和性能。

缺点：

  • 增加了代码的复杂性，需要创建代理对象。
  • 可能会影响性能，因为代理对象需要进行额外的处理。

代码实现：

class RealImage {loadImage(): void {console.log('Loading real image.');}
}class ImageProxy {private realImage: RealImage | null = null;loadImage(): void {if (!this.realImage) {this.realImage = new RealImage();}this.realImage.loadImage();}
}const proxy = new ImageProxy();
proxy.loadImage();

ImageProxy 代理了 RealImage 的加载操作，在实际需要加载图像时才创建真正的图像对象，实现了延迟加载。

四、装饰器模式

介绍：

动态地给一个对象添加一些额外的职责，而不改变其结构。

实际使用场景：

  • 为函数或类添加日志记录、性能监控等功能。

优点：

  • 可以在不改变原有代码结构的情况下，为对象添加新的功能。
  • 可以方便地组合多个装饰器，实现更复杂的功能。

缺点：

  • 装饰器的使用可能会使代码变得难以理解，尤其是当装饰器嵌套过多时。
  • 可能会增加代码的复杂性，因为需要创建装饰器类。

代码实现：

function logDecorator(target: any, propertyKey: string, descriptor: PropertyDescriptor) {const originalMethod = descriptor.value;descriptor.value = function(...args: any[]) {console.log(`Calling method ${propertyKey}`);const result = originalMethod.apply(this, args);console.log(`Method ${propertyKey} finished`);return result;};return descriptor;
}class MyClass {@logDecoratormyMethod(): void {console.log('Inside myMethod.');}
}const myObj = new MyClass();
myObj.myMethod();

装饰器函数 logDecorator 被安装到myMethod方案上，在myMethod调用前后添加了日志记录功能。

五、适配器模式

介绍：

将一个类的接口转换成客户希望的另外一个接口。

实际使用场景：

  • 不同库之间的接口适配。
  • 旧系统与新系统的接口整合等。

优点：

  • 提高了代码的复用性，使得不同接口的类可以协同工作。
  • 可以将复杂的接口转换为简单的接口，方便使用。

缺点：

  • 增加了代码的复杂性，需要创建适配器类。
  • 可能会降低系统的性能，因为适配器需要进行额外的处理。

代码实现：

class OldLibrary {oldMethod(): string {return 'Old library output';}
}class Adapter {private oldLibrary: OldLibrary;constructor() {this.oldLibrary = new OldLibrary();}newMethod(): string {return `Adapted: ${this.oldLibrary.oldMethod()}`;}
}const adapter = new Adapter();
console.log(adapter.newMethod());

Adapter 类将旧库的接口转换为新的接口，使得可以在新的代码中使用旧库的功能。

六、策略模式

介绍：

定义一系列的算法，把它们一个个封装起来，并且使它们可以相互替换。

实际使用场景：

  • 表单验证、排序算法选择等。
  • 当出现很多if-else或者switch时可以考虑使用策略模式

优点：

  • 易于扩展和维护，当需要添加新的算法时，只需要创建一个新的策略类。
  • 可以在运行时动态地切换算法。

缺点：

  • 增加了代码的复杂性，需要创建多个策略类。
  • 客户端需要了解不同的策略，增加了客户端的复杂度。

代码实现：

interface Strategy {execute(): void;
}class ConcreteStrategyA implements Strategy {execute(): void {console.log('Executing strategy A.');}
}class ConcreteStrategyB implements Strategy {execute(): void {console.log('Executing strategy B.');}
}class Context {private strategy: Strategy;constructor(strategy: Strategy) {this.strategy = strategy;}setStrategy(strategy: Strategy): void {this.strategy = strategy;}executeStrategy(): void {this.strategy.execute();}
}const context = new Context(new ConcreteStrategyA());
context.executeStrategy();
context.setStrategy(new ConcreteStrategyB());
context.executeStrategy();

Context 类根据不同的策略对象执行不同的算法，通过设置不同的策略可以在运行时动态切换算法。

观察者模式

介绍：

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

实际使用场景：

  • 事件处理、状态管理等。

优点：

  • 实现了松耦合，观察者和被观察者之间的依赖关系很弱。
  • 可以方便地添加和删除观察者。

缺点：

  • 当观察者数量较多时，通知所有观察者可能会导致性能问题。
  • 观察者模式可能会导致循环依赖的问题。

代码实现：

class Subject {private observers: Observer[] = [];addObserver(observer: Observer): void {this.observers.push(observer);}removeObserver(observer: Observer): void {this.observers = this.observers.filter(obs => obs!== observer);}notifyObservers(): void {this.observers.forEach(observer => observer.update());}
}interface Observer {update(): void;
}class ConcreteObserver implements Observer {update(): void {console.log('Observer notified.');}
}const subject = new Subject();
const observer1 = new ConcreteObserver();
const observer2 = new ConcreteObserver();
subject.addObserver(observer1);
subject.addObserver(observer2);
subject.notifyObservers();

Subject 维护一组观察者，当状态变化时通知所有观察者进行更新。

八、发布订阅模式

介绍：

发布者和订阅者之间通过事件进行通信，发布者发布事件，订阅者订阅感兴趣的事件并在事件发生时做出响应。

实际使用场景：

  • 消息通知、事件总线等。

优点：

  • 实现了松耦合，发布者和订阅者之间不需要直接知道对方的存在。
  • 可以方便地添加和删除订阅者。

缺点：

  • 当事件过多时，管理事件可能会变得复杂。
  • 可能会导致内存泄漏，如果订阅者没有正确地取消订阅。

代码实现：

class EventEmitter {private events: { [eventName: string]: ((...args: any[]) => void)[] } = {};on(eventName: string, callback: (...args: any[]) => void): void {if (!this.events[eventName]) {this.events[eventName] = [];}this.events[eventName].push(callback);}emit(eventName: string,...args: any[]): void {if (this.events[eventName]) {this.events[eventName].forEach(callback => callback(...args));}}
}const eventEmitter = new EventEmitter();
eventEmitter.on('eventName', (data) => {console.log(`Received event with data: ${data}`);
});
eventEmitter.emit('eventName', 'Some data');

EventEmitter 类提供了订阅和发布事件的方法，订阅者通过 on 方法订阅事件，发布者通过 emit 方法发布事件，触发订阅者的回调函数。

这篇关于前端宝典十六：深入浅出8大设计模式的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！


http://www.chinasem.cn/article/1102593。

相关文章

前端原生js实现拖拽排课效果实例

前端原生js实现拖拽排课效果实例

《前端原生js实现拖拽排课效果实例》：本文主要介绍如何实现一个简单的课程表拖拽功能,通过HTML、CSS和JavaScript的配合,我们实现了课程项的拖拽、放置和显示功能,文中通过实例代码介绍的... 目录1. 效果展示2. 效果分析2.1 关键点2.2 实现方法3. 代码实现3.1 html部分3.2
阅读更多...
CSS弹性布局常用设置方式

CSS弹性布局常用设置方式

《CSS弹性布局常用设置方式》文章总结了CSS布局与样式的常用属性和技巧,包括视口单位、弹性盒子布局、浮动元素、背景和边框样式、文本和阴影效果、溢出隐藏、定位以及背景渐变等,通过这些技巧,可以实现复杂... 一、单位元素vm 1vm 为视口的1%vh 视口高的1%vmin 参照长边vmax 参照长边re
阅读更多...
CSS3中使用flex和grid实现等高元素布局的示例代码

CSS3中使用flex和grid实现等高元素布局的示例代码

《CSS3中使用flex和grid实现等高元素布局的示例代码》：本文主要介绍了使用CSS3中的Flexbox和Grid布局实现等高元素布局的方法，通过简单的两列实现、每行放置3列以及全部代码的展示，展示了这两种布局方式的实现细节和效果，详细内容请阅读本文，希望能对你有所帮助... 过往的实现方法是使用浮动加
阅读更多...
css渐变色背景|＜gradient示例详解

css渐变色背景|＜gradient示例详解

《css渐变色背景|＜gradient示例详解》CSS渐变是一种从一种颜色平滑过渡到另一种颜色的效果,可以作为元素的背景,它包括线性渐变、径向渐变和锥形渐变，本文介绍css渐变色背景|＜gradien... 使用渐变色作为背景可以直接将渐China编程变色用作元素的背景，可以看做是一种特殊的背景图片。（是作为背
阅读更多...
CSS自定义浏览器滚动条样式完整代码

CSS自定义浏览器滚动条样式完整代码

《CSS自定义浏览器滚动条样式完整代码》：本文主要介绍了如何使用CSS自定义浏览器滚动条的样式，包括隐藏滚动条的角落、设置滚动条的基本样式、轨道样式和滑块样式，并提供了完整的CSS代码示例，通过这些技巧，你可以为你的网站添加个性化的滚动条样式，从而提升用户体验，详细内容请阅读本文，希望能对你有所帮助...
阅读更多...
css实现图片旋转功能

css实现图片旋转功能

《css实现图片旋转功能》：本文主要介绍了四种CSS变换效果：图片旋转90度、水平翻转、垂直翻转，并附带了相应的代码示例，详细内容请阅读本文，希望能对你有所帮助... 一 css实现图片旋转90度.icon{ -moz-transform:rotate(-90deg); -webkit-transfo
阅读更多...
vue基于ElementUI动态设置表格高度的3种方法

vue基于ElementUI动态设置表格高度的3种方法

《vue基于ElementUI动态设置表格高度的3种方法》ElementUI+vue动态设置表格高度的几种方法,抛砖引玉,还有其它方法动态设置表格高度,大家可以开动脑筋... 方法一、css + js的形式这个方法需要在表格外层设置一个div，原理是将表格的高度设置成外层div的高度，所以外层的div需要
阅读更多...
Vue项目中Element UI组件未注册的问题原因及解决方法

Vue项目中Element UI组件未注册的问题原因及解决方法

《Vue项目中ElementUI组件未注册的问题原因及解决方法》在Vue项目中使用ElementUI组件库时,开发者可能会遇到一些常见问题,例如组件未正确注册导致的警告或错误,本文将详细探讨这些问题... 目录引言一、问题背景1.1 错误信息分析1.2 问题原因二、解决方法2.1 全局引入 Element
阅读更多...
详解如何在React中执行条件渲染

详解如何在React中执行条件渲染

《详解如何在React中执行条件渲染》在现代Web开发中,React作为一种流行的JavaScript库,为开发者提供了一种高效构建用户界面的方式,条件渲染是React中的一个关键概念,本文将深入探讨... 目录引言什么是条件渲染？基础示例使用逻辑与运算符（&&）使用条件语句列表中的条件渲染总结引言在现代
阅读更多...
详解Vue如何使用xlsx库导出Excel文件

详解Vue如何使用xlsx库导出Excel文件

《详解Vue如何使用xlsx库导出Excel文件》第三方库xlsx提供了强大的功能来处理Excel文件,它可以简化导出Excel文件这个过程,本文将为大家详细介绍一下它的具体使用,需要的小伙伴可以了解... 目录1. 安装依赖2. 创建vue组件3. 解释代码在Vue.js项目中导出Excel文件，使用第三
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2