前端设计模式应用 | 青训营笔记

190 阅读4分钟

这是我参与「第四届青训营 」笔记创作活动的第4天

什么是设计模式?

设计模式 (design pattern)是对 面向对象设计 中反复出现的问题的解决方案。 这个术语是在1990年代由Erich Gamma等人从建筑设计领域引入到计算机科学中来的。

1.  历史经验的总结
2.  与特定语言无关

设计模式分类

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

浏览器中的设计模式

1.单例模式

定义: 全局唯一访问对象。

应用场景: 缓存、全局状态管理等。

优点:

  • 单例模式节省公共资源

比如:大家都要喝水,但是没必要每人家里都打一口井是吧,通常的做法是整个村里打一个井就够了,大家都从这个井里面打水喝。对应到我们计算机里面,像日志管理、打印机、数据库连接池、应用配置。

  • 单例模式方便控制

就像日志管理,如果多个人同时来写日志,你一笔我一笔那整个日志文件都乱七八糟,如果想要控制日志的正确性,那么必须要对关键的代码进行上锁,只能一个一个按照顺序来写,而单例模式只有一个人来向日志里写入信息方便控制,避免了这种多人干扰的问题出现。

缺点:

  • 由于单利模式中没有抽象层,因此单例类的扩展有很大的困难。

  • 单例类的职责过重,在一定程度上违背了“单一职责原则”。

  • 滥用单例将带来一些负面问题,如为了节省资源将数据库连接池对象设计为的单例类,可能会导致共享连接池对象的程序过多而出现连接池溢出;如果实例化的对象长时间不被利用,系统会认为是垃圾而被回收,这将导致对象状态的丢失。

2.发布订阅模式

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

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

优点:

  • 实现时间上的解耦(组件,模块之间的异步通讯)。
  • 对象之间的解耦,交由发布订阅的对象管理对象之间的耦合关系。

缺点:

  • 创建订阅者本身会消耗内存,订阅消息后,也许,永远也不会有发布,而订阅者始终存在内存中。
  • 对象之间解耦的同时,他们的关系也会被深埋在代码背后,这会造成一定的维护成本。

javascript中的设计模式

1.原型模式

定义: 原型模式(Prototype Pattern)是用于创建重复的对象,同时又能保证性能。这种类型的设计模式属于创建型模式,它提供了一种创建对象的最佳方式。

这种模式是实现了一个原型接口,该接口用于创建当前对象的克隆。当直接创建对象的代价比较大时,则采用这种模式。例如,一个对象需要在一个高代价的数据库操作之后被创建。我们可以缓存该对象,在下一个请求时返回它的克隆,在需要的时候更新数据库,以此来减少数据库调用。

应用场景: js中对象创建的基本模式

2.代理模式

定义: 可自定义控制对原对象的访问方式,并且允许在更新前后做一些额外处理。

应用场景: 监控,代理工具,前端框架实现等等。

3.迭代器模式

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

应用场景: 数据结构中有多种数据类型,列表,树等,提供通用操作接口。

前端框架中的设计模式

1.代理模式

定义:代理模式给某一个对象提供一个代理对象,并由代理对象控制对原对象的引用。通俗的来讲代理模式就是我们生活中常见的中介。

应用场景:代理请求-读取本地缓存、埋点功能-代理全局fetch、缓存代理-处理缓存时间等

image.png

2.组合模式

定义: 可多个对象组合使用,也可单个对象独立使用。

应用场景: dom、前端组件、文件目录、部门。