这是我参与「第四届青训营 」笔记创作活动的第7天
引言
在上一篇文章中,我们完成了前端三大件中JS知识的介绍,今天我们将开启全新的一章前端设计模式应用,一起来打卡总结吧!
1、何为设计模式?
设计模式代表了最佳的实践,通常被有经验的面向对象的软件开发人员所采用。设计模式是软件开发过程中面临的一般问题的结局方案。这些解决方案是众多软件开发人员经过相当长的一段时间的经验和错误总结出来的。
2、浏览器中的设计模式
单例模式
实例化对象中包含相同属性、不同属性值和相同的函数方法。
通过一个构造函数创建的实例化对象,只是存储的数据不同;不同的实例化对象存储不同的数据,函数方法调用的数据是不同的数据,但不是所有的构造函数都适用于单例模式。
核心:通过一个实例化对象满足所有需要执行的程序。
应用:缓存;全局状态管理等
发布订阅模式
定义对象之间一对多的依赖关系,当一个对象状态发生改变时,所有依赖它的对象都将得到通知。
发布订阅模式让两个对象松耦合地联系在一起,虽然不太清楚彼此的细节,但这不影响它们之间相互通信。当有新的订阅者出现时,发布者的代码不需要做任何改变,同样发布者需求改变时,也不会影响到之前的订阅者。只要约定的事件名没有变化,就可以自由地改变它们。
应用:可以用在异步编程中,也可以帮助我们完成更松耦合的代码编写
3、JS中的设计模式
| 名称 | 定义 | 应用场景 |
|---|---|---|
| 原型模式 | 复制已有对象来创建基本对象 | JS对象创建基本模式 |
| 代理模式 | 可自定义控制对原对象的访问方式,并且允许在更新前后做一些额外处理 | 监控,代理工具,前端框架实现 |
| 迭代器模式 | 在不暴露数据类型的情况下访问集合中的数据 | 数据结构中有多种数据类型,列表,树等,提供通用操作接口 |
总结
今天介绍了前端常用的设计模式,针对不同的场景要选择合适的模式。项目中合理地运用设计模式可以完美地解决很多问题,每种模式在现实中都有相应的原理来与之对应,每种模式都描述了一个在我们周围不断重复发生的问题,以及该问题的核心解决方案,这也是设计模式能被广泛应用的原因。
一起打卡学习吧!!!
烟火向星辰,所愿皆成真!