设计模式与应用 | 青训营

PIEces
87 阅读3分钟

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

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

软件设计中常见问题和及解决方案模型

  • 历史经验的总结
  • 与特定语言无关

设计模式背景

早期书籍：

a.《模式语言:城镇、建筑、建造》1977 设计模式这个思想第一次出现，应用在建筑专业，但其思想在50年来还在使用

b.《设计模式：可复用面向对象软件的基础》1994 该书提及了许多面向对象的设计模式，是学习有关软件设计模式时不可或缺的一本书

设计模式趋势：中国互联网公司发展刚起步的时候(2014年)，有关设计模式的话题热度在中国开始提升。

image.png

设计模式分类:23种设计模式

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

浏览器中api的设计模式

前端的编程离不开浏览器，因此浏览器api的设计模式是十分重要的

  • 单例模式

定义：全局唯一访问对象

应用场景：缓存，全局状态管理等

image.png 实例：浏览器在重复发送请求时可以复用之前发送过的值以提高效率，因此例子中用单例instance缓存之前用过的值，再次请求时就可以使用instance中的值来访问。

image.png image.png 上一个实现方式已经过时和过为复杂。事实上，在JavaScript中可以不用class实现单例，可以直接使用cache以保存单例信息，这样实现起来更为简单/灵活。或者可以request同一个对象，即可以访问相同缓存。

  • 发布订阅模式

定义：一种订阅机制，可以在被订阅对象发生变化时通知订阅者。

应用场景：从系统架构之间的解耦，到业务中一些实现模式，像邮件订阅，上线订阅等等，应用广泛。

image.png

实例：这是一个网站的用户订阅关注系统，在用户被关注后，订阅者将会加入该用户的粉丝名单中。在这个用户上线时将会调用登录通知函数，关注他的人将会得到他上线的消息。

image.png

比如这里添加了三个用户，用户1及用户2关注了用户3，用户1及2将会对用户3注册一个订阅接口，当用户3登录时将会通知用户1和用户2

JavaScript 和前端框架中的设计模式

JavaScript 三大设计模式:

  1. 原型模式

定义：复制已有对象来创建新的对象，首先创建一个对象来作为原型，然后用该原型创建一个新的对象，如TypeScript中先用const a:User={}创建类型为User原型对象a，然后用const b:User=Object.create(a)来复制对象a为新的对象b

应用场景：JS中对象创建的基本模式

  1. 代理模式

定义：可自定义控制对原对象的访问方式

应用场景：监控(e.g.监控发送请求代码的成功率)，代理工具，前端框架实现等

  1. 迭代器模式

定义：在不暴露数据类型的情况下访问集合中的数据

应用场景：数据结构中有多重数据类型，列表，树等，提供通用操作接口

前端框架中的设计模式

  • 代理模式： 前端框架对DOM操作的代理 image.png

  • 组合模式

定义：多个对象组合使用，也可以单个对象独立使用

应用场景:DOM，前端组件，文件目录，部门

avatar
文章
阅读
粉丝