【1024 | 程序员节】浅谈前端开发中常用的设计模式——适配器模式、工厂模式、单例模式等

前言

博主主页????蜡笔雏田学代码
专栏链接????【前端面试专栏】
今天学习前端面试题相关的知识！
感兴趣的小伙伴一起来看看吧~??

文章目录

• 设计模式
• • 设计模式分类
• 工厂模式
• • 什么是工厂模式
  • 工厂模式好处
• 单例模式
• • 什么是单例
  • 哪些地方用到了单例模式
  • 单例优缺点
  • 单例创建方式
• 开发的过程中你用到过哪些设计模式
• • 适配器模式
  • 单例模式
  • 代理模式
  • 订阅发布模式
  • 观察者模式
• 什么是 MVVM MVC 有什么区别/li>

设计模式

设计模式分类

1. ，共五种：工厂方法模式、抽象工厂模式、单例模式、建造者模式、原型模式。
2. ，共七种：适配器模式、装饰器模式、代理模式、外观模式、桥接模式、组合模式、享元模式。
3. ，共十一种：策略模式、模板方法模式、观察者模式、迭代子模式、责任链模式、命令模式、备忘录模式、状态模式、访问者模式、中介者模式、解释器模式。

工厂模式

什么是工厂模式

在工厂模式中，我们在创建对象时不会对客户端暴露创建逻辑，并且是通过使用一个共同的接口来指向新创建的对象。实现了创建者和调用者分离，

工厂模式好处

• 了，是用的一种模式。
• 利用工厂模式可以降低程序的耦合性，为后期的维护修改提供了很大的便利。
• 将选择实现类、创建对象统一管理和控制，从而将调用者跟我们的实现类解耦。

单例模式

什么是单例

保证一个类只有一个实例，并且提供一个访问该全局访问点。

哪些地方用到了单例模式

• 网站的计数器，一般也是采用单例模式实现，否则难以同步。
• 应用程序的日志应用，一般都是单例模式实现，只有一个实例去操作才好，否则内容不好追加显示。
• 多线程的线程池的设计一般也是采用，因为线程池要方便对池中的线程进行控制。
• 就是很典型的，它不能打开俩个。
• 也是典型的单例应用。在整个系统运行过程中，回收站只维护一个实例。

单例优缺点

优点：

1. 在单例模式中，活动的单例只有一个实例，对单例类的所有实例化得到的都是相同的一个实例，这样就防止其它对象对自己的实例化，确保所有的对象都访问一个实例。
2. 单例模式具有一定的伸缩性，类自己来控制实例化进程，类就在改变实例化进程上有相应的伸缩性。
3. 提供了对唯一实例的受控访问。
4. 由于在系统内存中只存在一个对象，因此可以节约系统资源，当需要频繁创建和销毁的对象时单例模式无疑可以提高系统的性能。
5. 允许可变数目的实例。
6. 避免对共享资源的多重占用。

缺点：

1. 不适用于变化的对象，如果同一类型的对象总是要在不同的用例场景发生变化，单例就会引起数据的错误，不能保存彼此的状态。
2. 由于单例模式中没有抽象层，因此单例类的扩展有很大的困难。
3. 单例类的职责过重，在一定程度上违背了”单一职责原则”。
4. 滥用单例将带来一些负面问题，如为了节省资源将数据库连接池对象设计为的单例类，可能会导致共享连接池对象的程序过多而出现连接池溢出；如果实例化的对象长时间不被利用，系统会认为是垃圾而被回收，这将导致对象状态的丢失。

单例创建方式

1. 饿汉式：类初始化时，会立即加载该对象，线程天生安全，调用效率高。
2. 懒汉式：类初始化时，不会初始化该对象，真正需要使用的时候才会创建该对象，具备懒加载功能。

开发的过程中你用到过哪些设计模式

设计模式的定义：在面向对象软件设计过程中针对特定问题的简洁而优雅的解决方案

设计模式是前人解决某个特定场景下对而总结出来的一些解决方案。可能刚开始接触编程还没有什么经验的时候，会感觉设计模式没那么好理解，这个也很正常。有些简单的设计模式我们有时候用到，不过没意识到也是存在的。
学习设计模式，可以让我们在处理问题的时候提供更多更快的解决思路。

适配器模式

这个是我们常使用的设计模式，也算最简单的设计模式之一，好处在于可以。

适配器模式（Adapter Pattern）是作为两个不兼容的接口之间的桥梁。

例子
适配器模式很好理解，假设我们和后端定义了一个接口数据结构为（可以理解为旧接口）：

但是后端后面因为其他原因，需要定义返回的结构为（可以理解为新接口）：

然后我们前端使用到后端接口有好几处，那么我可以，就不需要各处去修改字段，只要就可以了。
当然上面的是非常简单的场景，也是经常用到的场景。或许你会认为后端处理不更好了，的确是这样更好，但是这个不是我们讨论的范围。

单例模式

单例模式，从字面意思也很好理解，就是。

有些场景实例化一次，可以达到缓存效果，可以减少内存占用。还有些场景就是必须只能实例化一次，否则实例化多次会覆盖之前的实例，导致出现 bug（这种场景比较少见）。
例子
实现弹框的一种做法是先创建好弹框, 然后使之隐藏, 这样的话会浪费部分不必要的 DOM 开销, 我们可以在需要弹框的时候再进行创建, 同时结合单例模式实现只有一个实例, 从而节省部分 DOM 开销。下列为登入框部分代码：

使单例模式和创建弹框代码解耦

代理模式

代理模式的定义：为一个对象提供一个代用品或占位符，以便控制对它的访问。

虚拟代理
下面这段代码运用代理模式来实现图片预加载，可以看到通过代理模式巧妙地将创建图片与预加载逻辑分离，并且在未来如果不需要预加载，只要改成请求本体代替请求代理对象就行。

缓存代理

在原有的功能上加上结果缓存功能，就属于缓存代理。

原先有个功能是实现字符串反转（reverseString），那么在不改变 reverseString 的现有逻辑，我们可以，当然也可以在值改变的时候去处理下其他逻辑，如 Vue computed 的用法。

订阅发布模式

在软件架构中，是一种消息范式，消息的发送者（称为发布者）不会将消息直接发送给特定的接收者（称为订阅者）。而是将发布的消息分为不同的类别，无需了解哪些订阅者（如果有的话）可能存在。同样的，订阅者可以表达对一个或多个类别的兴趣，只接收感兴趣的消息，无需了解哪些发布者（如果有的话）存在。

从字面意思来看，我们需要首先订阅，发布者发布消息后才会收到发布的消息。不过我们还需要一个来协调，从事件角度来说，这个中间者就是，协调发布者和订阅者直接的消息通信。

完成订阅发布整个流程需要三个角色：

• 发布者
• 事件中心
• 订阅者（订阅者是可以多个的。）

以事件为例，简单流程如下：

，订阅者需要向事件中心订阅指定的事件 -> 发布者向事件中心发布指定事件内容 -> 事件中心通知订阅者 -> 订阅者收到消息（可能是多个订阅者），到此完成了一次订阅发布的流程。

简单的代码实现如下：

Event 可以理解为事件中心，提供了订阅和发布功能。
订阅者在订阅事件的时候，只关注事件本身，而不关心谁会发布这个事件；发布者在发布事件的时候，只关注事件本身，而不关心谁订阅了这个事件。

观察者模式

观察者模式定义了，让多个观察者对象同时监听某一个目标对象，当这个目标对象的状态发生变化时，会通知所有观察者对象，使它们能够自动更新。

观察者模式我们可能比较熟悉的场景就是，如 Vue 的响应式、Mbox 的响应式。
观察者模式完成整个流程需要两个角色：

• 目标
• 观察者
  简单流程如下：

来源：蜡笔雏田学前端