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

116 阅读2分钟

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

一.什么是设计模式

软件设计中常见问题的解决方案模型,这些方案是一种思想,是历史经验的总结,与编程语言本身无关。

image.png 设计模式在近些年也成为热度比较高的话题,因此掌握各种设计模式的思想,是我们开发人员的必经之路。

二.设计模式分类

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

三.浏览器中的设计模式

1.单例模式

全局唯一访问对象,主要应用是缓存、全局状态管理等。

image.png 用单例模式实现请求缓存

2.发布订阅模式

一种订阅机制,可在被订阅对象发生变化时通知订阅者。利用好它可以有效的将项目进行解耦,还可以在实际业务像比如邮箱订阅、上线订阅等上发挥作用。

image.png 设置监听点击事件

四.javascript中的设计模式

1.原型模式

复制已有的对象来创建新的对象,JavaScript的创建对象就是基于原型模式的思想,通过原型链来创建对象的。

2.代理模式

可自定义控制原对象的访问方式,并且允许在更新前后做一些额外处理。一些监控系统、代理工具(webpack正向代理server、nginx反向代理等)、框架实现(Vue3响应式原理)都是基于这种思想的。

3.迭代器模式

在不暴露数据类型的情况下访问集合中的数据。如果数据结构中有多种数据类型,就可以通过迭代器模式对外提供操作接口。

image.png

image.png for of迭代所有组件