前端设计模式概述 | 青训营笔记

34 阅读2分钟

这是我参与「第五届青训营 」伴学笔记创作活动的第 15 天

本节课通过前端开发日常实践中软件工程的设计模式及在前端的应用,来对设计模式定义解读,讲解设计模式的发展背景、分类,并且带来浏览器中的单例和发布订阅这两个主要设计模式。

1. 设计模式概念和背景解读

2. 设计模式分类枚举

3. 浏览器中主要的设计模式

1. 设计模式概念和背景解读

什么是设计模式

简单来说,就是软件设计中常见问题的解决方案模型 image.png

设计模式发展背景

从模式语言的提出到设计模式的应用 image.png

设计模式的趋势

image.png

2. 设计模式分类枚举

最经典的有23种设计模式,它们又主要分为三大类:

  • 创建型 - 如何创建一个对象
  • 结构型 - 如何灵活的将对象组装成较大的结构
  • 行为型-负责对象间的高效通信和职责划分 image.png

3. 浏览器中主要的设计模式

image.png

1.单例模式

image.png

贴一个简单的单例模式的实现

     private static Singleton instance;
     private Singleton (){} 

     public static Singleton getInstance() { 
       if (instance == null) { 
           instance = new Singleton();
       } 
      return instance;
     } 
  }

2.发布订阅模式

定义: 发布-订阅模式又被称为观察者模式,它是定义在对象之间一对多的关系中,当一个对象发生变化,其他依赖于它的对象收到通知。

什么时候使用该设计模式:

如果你的程序只有很少的订阅者,或者需要与子系统进行实时的交互,那么发布/订阅者模式是不适合的。

  1. 应用程序需要向大量消费者广播信息。例如微信订阅号就是一个消费者量庞大的广播平台。
  2. 应用程序需要与一个或多个独立开发的应用程序或服务通信,这些应用程序或服务可能使用不同的平台、编程语言和通信协议。
  3. 应用程序可以向消费者发送信息,而不需要消费者的实时响应。
  4. 被集成的系统被设计为支持其数据的最终一致性模型。
  5. 应用程序需要将信息传递给多个消费者,这些消费者可能具有与发送者不同的可用性要求或正常运行时间计划。例如你消息在上午发布了出去,消费者计划在下午才去处理这些消息。 image.png