前端设计模式 | 青训营笔记
这是我参与「第四届青训营 - 前端场」笔记创作活动的第7天。
什么是设计模式
设计模式是对软件设计开发过程中反复出现的某类问题的通用解决方案。
设计模式更多的是指导思想和方法论，而不是现成的代码，每种设计模式在不同语言中有不同的具体实现方式。学习设计模式更多的是理解各种模式的内在思想和解决的问题。
设计模式可以分为三大类：
- 结构型模式（Structural Patterns） ：如何灵活地将对象组装成较大的结构。
- 创建型模式（Creational Patterns） ：如何创建一个对象。
- 行为型模式（Behavioral Patterns） ：负责对象间的高效通信和职责划分。
设计模式一共有23种，前端开发人员需要了解其中10种模式。
浏览器中的设计模式
单例模式
定义：全局唯一访问对象 。
应用场景：缓存、全局状态管理等。
单例指的是创建的总是同一个实例，也就是使用类创建的实例始终是相同的。
- 需要使用return。
- 需要每次return的是同一个对象。
发布订阅模式（观察者模式）
定义：一种订阅机制，可在被订阅对象发生变化时通知订阅者。
应用场景：从系统架构之间的解耦，到业务中一些实现模式，像邮件订阅，上线订阅等等，应用广泛。
发布订阅模式定义了一种一对一或者一对多的关系，让多个观察者对象同时监听某一个主题对象，这个主题对象的状态发生变化时就会通知所有的观察者对象，使它们能自动更新自己。
发布订阅模式的好处：
- 支持简单的广播通信，自动通知所有已经订阅过的对象。
- 目标对象与观察者存在的是动态关联，增加了灵活性。
- 目标对象与观察者之间的抽象耦合关系能够单独扩展以及重用。
JavaScript 中的设计模式
原型模式
定义：复制已有对象来创建新的对象。
应用场景：JS 中对象创建的基本模式
这个模式是指创建者新创建的对象的原型是创建者指定的对象。如果需要重复创建某个对象，那么就可以使用原型模式
代理模式
定义：可自定义控制对原对象的访问方式，并且允许在更新前后做一些额外处理。
应用场景：监控，代理工具，前端框架实现等等。
使用者无权访问目标对象，中间加代理，通过代理做授权和控制。可以理解成为一个对象提供一个代用品或者占位符，以便控制对它的访问。
迭代器模式
定义：在不暴露数据类型的情况下访问集合中的数据。
应用场景：数据结构中有多种数据类型，列表，树等，提供通用操作接口。
迭代器用于遍历容器并访问容器中的元素，无论容器的数据结构是什么，迭代器的接口都应该是一样的，都需要遵循迭代器协议。
迭代器模式解决的问题：
- 提供一致的遍历各种数据结构的方式，而不用了解数据的内部结构
- 提供遍历容器的能力而无需改变容器的接口
前端框架中的设计模式
代理模式
与前文相同
前端框架中对 DOM 操作的代理
组合模式
定义：可多个对象组合使用，也可单个对象独立使用。
应用场景：DOM，前端组件，文件目录，部门。
组合模式一般用来描述整体与部分的关系，它将对象组织到树形结构中，整个树形结构中的对象都属于同一种类型，用户不需要辨别是树枝节点还是叶子节点，可以直接进行操作。
其他还需了解的有：工厂模式、装饰器模式、适配器模式、策略模式、状态模式。
如有错误欢迎指正。
