前端设计模式应用

软件设计中常见问题的解决方案模型是历史经验的总结与特定语言无关，不是具象的东西，是一种想法和模式

该笔记主要记录一些课程上的概念和解析（因为是小白，代码对我来说有些难懂，就不贴上来了）

课程中提及的设计模式有23种，主要分为创建型（如何创建一个对象）、结构型（如何灵活的将对象组装成较大的结构）、行为型（负责对象间的高效通信和职责划分）

前端场景下的一些设计模式

浏览器中的设计模式

单例模式：会存在一个全局唯一访问对象，在任何地方都会访问的是同一个对象，在一个地方修改也会反应到另外一个地方对这个对象的使用上。这种对象我们最常用的就是window，提供了一个对浏览器操作封装的对象

它的应用场景一般是会有一个全局的缓存，这个基本上都是用单例模式来实现的，另外就是我们限制框架和库中比较流行的全局状态管理等等

用单例模式实现请求缓存

发布订阅模式：一种订阅机制，可以在被订阅对象发送变化时通知订阅者，这个订阅者也一定需要是一个对象

它的应用场景非常广泛，从系统架构之间的解耦到业务中一些实现模式，像邮件订阅，上线订阅等等。并不局限于前端

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

JavaScript中的设计模式

原型模式：JavaScript中有一个源特性叫做原型链，来实现JavaScript关于继承包括对象的一些定义，实际上这个就是和原型模式有关的，除了继承以外原型链中的模型指的就是原型模式，它在JavaScript中就是对象的一个基本创建模式，复制已有的对象来创建新的对象，在传统的面向对象的语言中，创建对象一定要new一个类，而在面对一个复杂庞大的对象时，大家认为复制原有的对象可能会有更好的性能等

它的应用场景就是JavaScript中对象创建的基本模式

代理模式:可以自定义控制原对象的访问方式和写入方式，在改一个值或者获取对象的时候都可以进行一个控制。并且允许在更新前后做一些额外处理

它的应用场景有监控（比如说前端要监控用户浏览器发送请求的一个成功率，我们会改写原本fetch的能力对它做一个劫持代理掉原本的fetch，做的事情就是每次请求返回之后我们看它是否成功，然后拿到对应的值发送给我们的监控服务器），代理工具，前端框架实现等等

使用代理模式实现用户状态订阅

迭代器模式：在不暴露数据类型的情况下访问集合中的数据，在JavaScript中我们内置一些集合比如说数组，包括我们可以自己定义的树和图也是集合

它的应用场景可以是为数据结构中多种数据类型，列表，树等提供通用操作接口

用for of迭代所有组件

前端框架中的设计模式

代理模式：这个和JavaScript中可以提供api的代理模式有些不同前端框架对DOM操作的代理：更改DOM属性->更新虚拟DOM->视图更新

组合模式：和前面的迭代器模式有些类似，可以多个对象组合使用变成一个单个对象，也可单个对象独立使用

它的应用场景是DOM、前端组件、文件目录、部门

设计模式不是完美的，总结出抽象的模式相对比较简单，但是想要将抽象的模式套到场景中却非常困难，现代编程语言的多编程范式带来的更多可能性

真正优秀的开源项目学习设计模式并不断实践