关于前端设计模式 | 青训营笔记
这是我参与「第四届青训营 」笔记创作活动的的第4天。
这篇文章是对上课内容知识点的整理，扩展较小，只能算是抛砖引玉，简单描述下前端设计模式，想要深入研究设计模式的朋友可以去看一下这篇文章
设计模式
什么是设计模式？
设计模式是软件设计中常见问题的解决方案模型。
常见问题：与历史经验的总结有关
解决方案模型：与特定语言无关
设计模式分类
前端共有23种设计模式，又分为3种模式。
- 创造型： 如何创建一个对象。
- 结构型： 如何灵活的将对象组装成较大的结构。
- 行为型： 负责对象间的高效通信和责任划分。
创建型
对对象的实例化过程进行抽象，即如何创建一个对象。
- 对于
类创建模式来说通过使用继承来改变实例化的类 - 对于
对象创建模式来说通过使用代理来实例化所需的对象
创建型模式（5种）有：
- 工厂方法模式
- 抽象工厂模式
- 单例模式
- 建造者模式
- 原型模式
结构型
通过对多个类和对象进行组合得到复杂结构的类，即如何灵活的将对象组装成较大的结构。
- 使用继承或者成员变量引用形式来实现。
结构型模式（7种）有：
- 适配器模式
- 装饰器模式
- 代理模式
- 外观模式
- 桥接模式
- 组合模式
- 享元模式
行为型
行为模式不仅表达了对象和类，还表达了他们之间的交互，即负责对象间的高效通信和职责划分。
结构型模式（11种）有：
-
策略模式
-
模板方法模式
-
观察者模式
-
迭代子模式
-
责任链模式
-
命令模式
-
备忘录模式
-
状态模式
-
访问者模式
-
中介者模式
-
解释器模式。
-
两个特殊模式：
- 并发型模式
- 线程池模式
关于设计模式详细解析见这篇文章。
浏览器中的设计模式
定义：全局唯一访问对象，在任何时候都能够访问到其身上的数据方法等，比如window对象。
这种模式涉及到一个单一的类，该类负责创建自己的对象，同时确保只有单个对象被创建。这个类提供了一种访问其唯一的对象的方式，可以直接访问，不需要实例化该类的对象。
注意：
- 单例类只能有一个实例
- 单例类必须给自己创建自己的唯一实例
- 例类必须给所有其他对象提供这一个实例
应用场景：缓存，全局状态管理等。
发布订阅模式
定义：一种订阅机制，可在被订阅对象发生变化时通知订阅者。
该模式又叫观察者模式，它定义了对象间的一种一对多的关系，让多个观察者对象同时监听某一个主题对象，当一个对象发生改变时，所有依赖于它的对象都将得到通知。
应用场景：从系统架构之间的解耦，到业务中一些实现模式，像邮箱订阅，上线订阅等等，应用广泛。
javaScript中的设计模式
原型模式
定义：复制已有对象来创建新的对象。
应用场景：JS中对象创建的基本模式。
代理模式
定义：可自定义控制对原对象的访问方式，并且允许在跟新前后做一些额外处理。
应用场景：监控，代理工具，前端框架实现等，比如Vue中的数据代理。
代理模式有不同的形式主要有三种：
- 静态代理
- 动态代理 (JDK 代理、接口代理)
- Cglib 代理
迭代器模式
定义：在不暴露数据类型下访问集合中的数据。
- 迭代器模式的本质：控制访问聚合对象中的元素。
- 其设计意图：无须暴露聚合对象的内部实现，就能够访问到聚合对象中的各个元素。
应用场景：数据接口中有多种数据类型，列表，树等。提供通用操作接口。
前端框架中的设计模式
代理模式
定义：为其他对象提供一种代理以控制对这个对象的访问。在某些情况下，一个对象不适合或者不能直接引用另一个对象，而代理对象可以在客户端和目标对象之间起到中介的作用。
前端框架中对DOM操作的代理
组合模式
定义：可多个对象组合使用，可也单个对象独立使用。
组合多个对象形成[树形结构]以表示“整体-部分”的关系的层次结构。组合模式对叶子节点和容器节点的处理具有一致性，又称为整体-部分模式。
应用场景：
- DOM
- 前端组件
- 文件目录
- 部门
参考博客：
- 链接：juejin.cn/post/712573…，作者：刳卡
- 链接：juejin.cn/post/712572…，作者：linht
