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

96 阅读2分钟

设计模式基本概念介绍:

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

设计模式定义:

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

设计模式背景:

  • 模式语言:城镇、建筑、建造 (A Pattern Language: Towns, Buildings,Construction) 1977
  • 设计模式:可复用面向对象软件的基础 (Design Patterns: Elements of Reusable Object-Oriented Software) 1994

23种设计模式

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

单例模式

应用场景:缓存、全局状态管理等 image.pngimage.png

image.png

发布订阅模式(观察者模式)

应用场景:系统架构之间的解耦,业务中的实现模式,如:邮件订阅、上线订阅等,应用广泛。

用发布订阅模式实现用户上线提醒订阅

image.png image.png

代理模式

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

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

image.png

迭代器模式

迭代器模式定义: 在不暴露数据类型的情况下访问集合中的数据

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

用 for of 迭代所有组件

image.png

image.png

总结

设计模式不是银弹

  • 总结出抽象的模式相对比较简单,但是想要将抽象的模式套用到场景中却非常困难。
  • 现代编程语言的多编程范式带来的更多可能性。
  • 真正优秀的开源项目学习设计模式并不断实践。