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

71 阅读1分钟

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

23种设计模式

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

浏览器中的设计模式

单例模式

  • 全局唯一访问对象
  • 场景
  • 缓存,全局状态管理

用单例模式实现缓存请求

2023-02-11_144833.png

发布者订阅模式

一种订阅机制,在被订阅对象发生变化的时候通知订阅者 场景 系统架构之间的解耦,到业务中实现模式,比如邮件订阅,上线订阅,后端数据库,消息队列,前端Vue框架中一些组件之间传消息。

2023-02-11_145912.png

JavaScript中的设计模式

原型模式

 复制一个已经有的对象创建一个新的对象
 Js对象创建基本模式

原型模式创建上线订阅的用户 2023-02-11_153607.png

代理模式

可以定义控制对对象的访问方式,并且更新之后做出一些额外处理 监控,代理工具,前端框架实现,如监控前端发出请求fetch,对值处理,看它成功率 2023-02-11_160721.png

迭代器模式

在不暴露数据类型的情况下访问集合中的数据,数据结构中有多种数据类型,如列表,树,提供操作接口

2023-02-11_162014.png

前端框架中的设计模式

代理模式

2023-02-11_162653.png

组合模式

多个对象组合使用,也可以单独使用