前端开发中常用的几种设计模式

最新推荐文章于 2024-07-26 08:45:56 发布

MaxLoongLvs

最新推荐文章于 2024-07-26 08:45:56 发布

阅读量3k

点赞数

文章标签：设计模式面试 javascript

本文链接：https://blog.csdn.net/shadowfall/article/details/112001884

版权

设计模式是什么?

首先设计模式和架构模式,还是开发模式完全是三种东西,从外到内理解:

开发模式:
- 常见的有四种开发模式，分别是敏捷开发、瀑布式开发、螺旋开发、迭代式开发，它是用于出于项目需求,在开发过程中秉承着一个什么样的原则进行开发，是需要考虑安全，还是偏向短期完成，或者是追求完美，它并不会直接约束我们如何写代码，而是代码应该秉持着完美，还是应该追求效率等等的原则进行开发。
架构模式：
- 确定好了开发模式，再来说架构模式，定义：一个架构模式描述软件系统里的基本的结构组织或纲要。架构模式提供一些呈先定义好的子系统，指定它们的责任，并给出把它们组织在一起的法则和指南。一个架构模式常常可以分解成很多个设计模式的联合使用，MVC模式就属于架构模式。
- 个人理解：简单理解为一个模板，它规定好了一个模板，我们严格按照这个模板填充内容，这个模块就是架构，已经提前分配好部门以及该做的事情，所以在项目启动前，提前考虑好使用哪一种模板比较合适。

设计模式

软件设计模式（Design pattern），又称设计模式，是一套被反复使用、多数人知晓的、经过分类编目的、代码设计经验的总结。使用设计模式是为了可重用代码、让代码更容易被他人理解、保证代码可靠性、程序的重用性。

在这里先介绍下区别，前面的开发模式和架构模式，都是针对开发的大方向上，设计模式不一样，它针对的是在遇到项目的某一个特定的需求，类似某后台管理系统项目内的某个需求功能需要实现时，又或者直播平台的弹幕功能等等，这样一个特定的具体的需求出现时，在长期积累的开发经验中，积累了大量的设计模式，java 设计模式总结了23种。这样在遇到逻辑上类似的需求时，就可以快速的选择某种设计模式，来帮助我们进行开发。
个人理解：没有一个定式，它是我们开发人员在进行长时间的开发，最终总结出来的一些规律和方法，用于某种地方的时候非常和合适，能够大大提高开发效率，减少心智负担。所以设计模式是大家总结出并且认同的的一类规律，在很多高级开发眼里根本没有设计模式的概念，因为通过长期的开发，已经养成了见到某种功能需要实现时，脑海中自动就会有它应该实现的多种方法，手中无剑，心中有剑。
现在你应该清晰的了解到这三种模式的区别，另外如果你想要真的了解设计模式，做到手中无剑，心中有剑，信手捏来的状态，就必须了解每一种模式的应用场景，为什么我要选择这种模式，每一种模式的原理，为什么要这样使用就可以完成我们的功能，它的设计理念是什么等等

简单介绍几种设计模式

单例模式
- 单例模式（Singleton Pattern）是 Java 中最简单的设计模式之一。这种类型的设计模式属于创建型模式，它提供了一种创建对象的最佳方式。这种模式涉及到一个单一的类，该类负责创建自己的对象，同时确保只有单个对象被创建。这个类提供了一种访问其唯一的对象的方式，可以直接访问，不需要实例化该类的对象。
- 简单理解：就是没有就创建，有就使用，有且仅有一个。
- 实现方法常用判断
- 常见应用场景
1. Windows的Task Manager（任务管理器）就是很典型的单例模式（这个很熟悉吧），想想看，是不是呢，你能打开两个windows task manager吗？不信你自己试试看哦~
2. windows的Recycle Bin（回收站）也是典型的单例应用。在整个系统运行过程中，回收站一直维护着仅有的一个实例。
3. 网站的计数器，一般也是采用单例模式实现，否则难以同步。
4. 应用程序的日志应用，一般都何用单例模式实现，这一般是由于共享的日志文件一直处于打开状态，因为只能有一个实例去操作，否则内容不好追加。
5. Web应用的配置对象的读取，一般也应用单例模式，这个是由于配置文件是共享的资源。
6. 数据库连接池的设计一般也是采用单例模式，因为数据库连接是一种数据库资源。数据库软件系统中使用数据库连接池，主要是节省打开或者关闭数据库连接所引起的效率损耗，这种效率上的损耗还是非常昂贵的，因为何用单例模式来维护，就可以大大降低这种损耗。
7. 多线程的线程池的设计一般也是采用单例模式，这是由于线程池要方便对池中的线程进行控制。
8. 操作系统的文件系统，也是大的单例模式实现的具体例子，一个操作系统只能有一个文件系统。
9. HttpApplication 也是单位例的典型应用。熟悉ASP.Net(IIS)的整个请求生命周期的人应该知道HttpApplication也是单例模式，所有的HttpModule都共享一个HttpApplication实例。
- 单例模式应用的场景一般发现在以下条件下：
1. 资源共享的情况下，避免由于资源操作时导致的性能或损耗等。如上述中的日志文件，应用配置。
2. 控制资源的情况下，方便资源之间的互相通信。如线程池等。
观察者模式
- 当对象间存在一对多关系时，则使用观察者模式（Observer Pattern）。比如，当一个对象被修改时，则会自动通知依赖它的对象。观察者模式属于行为型模式。
- 个人理解：类似于班主任，当需要侦听很多对象的时候，选择观察者模式，当你在玩手机的时候，班主任就会在后面窗口偷偷看着你，一旦发现就冲进来把手机没收，这里你玩手机就是一个触发侦听的行为，没收手机就是触发后执行的事件。每个同学玩手机都会被没收，所以在前面提到的弹幕实现就可以使用观察者模式，还有在Vue中的双向数据绑定使用的变形。
- 关于发布订阅模式我认为和观察者模式并非同一种模式，详解参考连接文章
- 发布订阅
  - 发布
  - 订阅
  - 取消订阅
  - 当状态发生改变的时候, 执行一段代码
  - 例子: 买一本书
    - 没有设计模式
      => 去到书店, 有就买, 没有就走
      => 过一会在来看, 有就买, 没有就走
      => 过一会在来看, 有就买, 没有就走
      => 过一会在来看, 有就买, 没有就走
      => 过一会在来看, 有就买, 没有就走
    - 发布订阅模式
      => 去到书店, 有就买, 没有就把电话留给店员(订阅)
      => 等到店员给我打电话的时候, 去到书店, 买书(发布)
      => 店员给我打电话之前, 我从别的地方买到书了, 告诉店员一下, 你别管我了(取消订阅)
  - 例子: 事件监听器
    - 元素.addEventListener(‘click’, function (e) {})
    - 元素.addEventListener(‘click’, 函数2)
    - 元素.addEventListener(‘click’, 函数3)
    - 元素.addEventListener(‘mouseover’, 函数4)
    - 元素.addEventListener(‘mouseover’, 函数5)
工厂模式
- 工厂模式（Factory Pattern）是 Java 中最常用的设计模式之一。这种类型的设计模式属于创建型模式，它提供了一种创建对象的最佳方式。在工厂模式中，我们在创建对象时不会对客户端暴露创建逻辑，并且是通过使用一个共同的接口来指向新创建的对象。
- 个人理解: 字面理解，工厂原材料放进去，产品送出来… 将参数带入,就会返回给我们一个想要的对象,每次都是新的.
- 使用场景：
1. 日志记录器：记录可能记录到本地硬盘、系统事件、远程服务器等，用户可以选择记录日志到什么地方。
2. 数据库访问，当用户不知道最后系统采用哪一类数据库，以及数据库可能有变化时。
3. 设计一个连接服务器的框架，需要三个协议，“POP3”、“IMAP”、“HTTP”，可以把这三个作为产品类，共同实现一个接口。
代理模式
在代理模式（Proxy Pattern）中，一个类代表另一个类的功能。这种类型的设计模式属于结构型模式。在代理模式中，我们创建具有现有对象的对象，以便向外界提供功能接口。
个人理解：静态代理，可以代理某个接口下的所以具体实现类的对象方法，当时还是不够解耦合，需要站在更高的角度，对所有接口都能代理，而不是某个接口下的所有具体实现类，所以利用java反射中的class类，站在这个高度上，就可以对所有接口都代理。这就是动态代理。
区分中介者模式和代理模式
应用场景：
- 权限控制
- 图片懒加载（先通过一张loading图占位，然后通过异步的方式加载图片，等图片加载好了再把完成的图片加载到img标签里面。）
代理模式主要包含三个角色，即抽象主题角色(Subject)、委托类角色(被代理角色，Proxied)以及代理类角色(Proxy)，如下图所示：

抽象主题角色:可以是接口，也可以是抽象类；
委托类角色：真实主题角色，业务逻辑的具体执行者；
代理类角色：内部含有对真实对象RealSubject的引用，负责对真实主题角色的调用，并在真实主题角色处理前后做预处理和后处理。
策略模式
- 定义：策略模式就是将一系列算法封装起来，并使它们相互之间可以替换。被封装起来的算法具有独立性，外部不可改变其特性。(简单的说减少if判断,改成switch的理念)
- 目的：将算法的使用与算法的实现分离开来
- 优点：
  顾名思义:策略即选择，当存在大量的选择判断时，可以采取策略模式，将不同的方法抽离封装，将一个个方法封装起来，提高代码复用率，减少代码冗余；策略模式可看作为if/else判断的另一种表现形式，在达到相同目的的同时，极大的减少了代码量以及代码维护成本。
- 在前端工作中的常见应用：
  - 表单校验：封装成对象，使用时直接调用，而不是进行if else判断
  - 根据vip等级不同进行不同的操作：同样封装对象，使用时直接调用。
- 下面的案例可以生动的说明策略模式：
  - 设计模式之策略模式（javascript描述）