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

37 阅读2分钟

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

在当前环境下,书本中的设计模式已经不能够完全满足我们的需求,所有出现了更多的不同环境下的设计模式,使开发者能够合理高效地完成需求的同时维护代码的可拓展性。所有很有必要再认识不同的设计模式。

全篇用 具体代码 来对比几个常用设计模式的特点和区别

一、设计模式分类

  1. 数量:23种
  2. 类型分类
  • 创建型-创建一个对象;
  • 结构型-灵活将对象组装成较大的结构;
  • 行为型-对象间的高效通信和职责划分;

二、浏览器中的设计模式

  1. 单例模式:
  • 定义:全局唯一访问对象
  • 场景:缓存和全局状态管理
  1. 发布订阅模式:
  • 定义:一种订阅机制,可再被订阅对象发生变化时通知订阅者
  • 场景:从系统架构之间的解耦,到业务中一些实现模式

用单例模式实现请求缓存:

image.png image.png

三、JavaScript的设计模式

  1. 原型模式(很少用到):
  • 定义:复制已有对象来创建新的对象
  • 应用场景:js中对象创建的基本模式
  1. 代理模式:
  • 定义:自定义控制对象的访问方式,并且允许再更新前后做一些额外处理
  • 场景:监控、代理工具、前端框架
  1. 迭代器模式:
  • 定义:在不暴露数据类型的情况下访问集合中的数据
  • 场景:数据结构有多种数据类型、列表、树等、提供通用操作接口

四、前端框架中的设计模式

  1. 代理模式
  • 前端框架队dom操作的代理
  • 更新DOM属性->更新虚拟机->视图更新
  1. 组合模式
  • 定义:可多个对象组合使用,可也单个对象独立使用
  • 应用场景:DOM、前端组件、文件目录、部门

对DOM更新前后钩子代码的理解

image.png

五、总结

  1. 总结的抽象的模式相对比较简单,但要套进场景中十分困难
  2. 现代编程语言的多编程范式带来的更多可能性
  3. 学习优秀的开源项目设计模式并不断实践

关于项目安排及进度

  • 原来组队做Low-Code平台的队伍突然就解散了,很遗憾,我对这个项目还是很感兴趣的5555
  • 目前进入了新的队伍,选择的项目是仿掘金平台,希望能尽自己最大的努力把这个项目完整做完!
  • 还计划下学期在闲暇时间独自或者找身边的一两个朋友共同完成该项目!