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

94 阅读1分钟

定义

设计模式常见问题的解决方案模型

分类

23种

  • 创建型: 对象的创建
  • 结构型: 对象的组装
  • 行为型: 对象的通信和职责划分

浏览器中的设计模式

单例模式

  • 定义:全局唯一访问对象 如window
  • 应用场景:全局缓存,状态管理 image.png

image.png

发布订阅模式

  • 定义:在被订阅对象发生变化时通知订阅者
  • 应用场景:邮件订阅,上线订阅

image.png

JS中的设计模式

原型模式

  • 定义 复制已有的对象来创建新对象
  • 应用场景 JS中对象创建的基本模式

image.png

代理模式

  • 定义 自定义控制对原对象的访问方式,并且允许在更新前后做一些额外处理
  • 应用场景 监控,代理工具

image.png

迭代器模式

  • 定义 在不暴露数据类型的情况下访问集合中的数据
  • 为多种数据类型(列表 树)提供通用操作接口

image.png

前端框架中的设计模式

代理模式

修改DOM时,通过框架的代理操作虚拟的DOM,再更新实际的DOM

组合模式

react中组件可以单独渲染,也可以和其他组件组合渲染