这是我参与「第四届青训营 」笔记创作活动的第3天，对前端常用设计模式相关知识点总结如下：
什么是设计模式：
设计模式是对软件设计开发过程中反复出现的某类问题的通用解决方案。设计模式更多的是指导思想和方法论，而不是现成的代码，当然每种设计模式都有每种语言中的具体实现方式。学习设计模式更多的是理解各种模式的内在思想和解决的问题，毕竟这是前人无数经验总结成的最佳实践，而代码实现则是对加深理解的辅助。
设计模式分类：
设计模式可分为三大类：
-
创建型（Creational Patterns） - 如何创建一个对象
处理对象的创建，根据实际情况使用合适的方式创建对象。常规的对象创建方式可能会导致设计上的问题，或增加设计的复杂度。创建型模式通过以某种方式控制对象的创建来解决问题。 -
结构型（Structural Patterns） - 如何灵活的将对象组装成较大的结构
通过识别系统中组件间的简单关系来简化系统的设计。 -
行为型（Behavioral Patterns） - 负责对象间的高效通信和职责划分
用于识别对象之间常见的交互模式并加以实现，如此，增加了这些交互的灵活性。
这三大类设计模式又可以分成更多的小类，如下图：
浏览器中的设计模式：
- 单例模式：
定义：全局唯一访问对象
应用场景：缓存、全局状态管理等
单例模式实现请求缓存：
- 发布订阅模式
定义：一种订阅机制，可在被订阅对象发生变化时通知订阅者
应用场景：从系统架构之间的解耦，到业务中一些实现模式，像邮件订阅，上线订阅等等，应用广泛。
用发布订阅模式实现用户上线订阅：
JavaScript中的设计模式：
- 原型模式：
定义：复制已有对象来创建新的对象
应用场景：JS中对象创建的基本模式
用原型模式创建上线订阅中的客户：
- 代理模式
定义：可自定义控制对原对象的访问方式，并且允许在更新前后做一些额外处理
应用场景：监控、代理、前端框架实现等
使用代理模式实现用户状态订阅：
- 迭代器模式
定义：在不暴露数据类型的情况下访问集合中的数据
应用场景：数据结构中有多种数据类型，列表，树等，提供通用操作接口
用for of迭代所有组件
前端框架中的设计模式：
- 代理模式
用vue组件实现计数器：
前端框架中对DOM操作的代理：
- 组合模式
定义：可多个对象组合使用，也可单个对象独立使用
应用场景：DOM，前端组件，文件目录，部门
React的组件结构
总结
设计模式是一门宏大而深奥的学问需要我们不断的去学习和在实践中总结，本文只涉及到部分常见的设计模式在前端领域的应用或者实现。
