这是我参与「第四届青训营 」笔记创作活动的的第3天
一、设计模式简介
设计模式(英语 design pattern)是对面向对象设计中反复出现的问题的解决方案。这个术语是在1990年代由Erich Gamma等人从建筑设计领域引入到计算机科学中来的。这个术语的含义还存有争议。算法不是设计模式，因为算法致力于解决问题而非设计问题。设计模式通常描述了一组相互紧密作用的类与对象。设计模式提供一种讨论软件设计的公共语言，使得熟练设计者的设计经验可以被初学者和其他设计者掌握。设计模式还为软件重构提供了目标。
随着软件开发社群对设计模式的兴趣日益增长，已经出版了一些相关的专著，定期召开相应的研讨会，而且Ward Cunningham为此发明了WikiWiki用来交流设计模式的经验。
总之，设计模式就是为了解决某类重复出现的问题而出现的一套成功或有效的解决方案
设计模式趋势
设计模式的三个分类
- 创建型模式：对象实例化的模式，创建型模式用于解耦对象的实例化过程。（如何创建一个对象）
- 结构型模式：把类或对象结合在一起形成一个更大的结构。（如何灵活得将对象组装成一个大的结构）
- 行为型模式：类和对象如何交互，及划分责任和算法。（负责对象间高效通信和职责划分）
如下图所示：
二、浏览器中的设计模式
单例模式
- 定义：全局唯一访问对象
- 应用场景：缓存，全局状态管理等
如下图所示：
用单例模式实现请求缓存
发布订阅模式
- 定义：一种订阅机制，可在被订阅对象发生变化时通知订阅者
- 应用场景：从系统架构之间的解耦，到业务中的一些实用模式，如邮件订阅，上线订阅等等，应用广泛。
用发布订阅模式实现用户上线订阅
如下图所示：
三、JavaScript中的设计模式
原型模式
- 定义：复制已有对象来创建对象
- 应用场景：js中对象创建的基本模式
用原型模式来创建上线订阅中的用户
如下图所示：
代理模式
- 定义：可自定义控制对原对象的访问方式，并且允许在更新前后做一些额外处理
- 应用场景：监控，代理工具，前端框架实现等等
使代理模式实现用户状态订阅
如下图所示：
迭代器模式
- 定义：在不暴露数据类型的情况下访问集合中的数据
- 应用场景：数据结构中有多种数据类型，列表，树等，提供通用操作接口
用for of迭代所有组件
如下图所示：
四、前端框架中的设计模式
代理模式
用vue组件实现计数器
如下图所示：
前端框架中对DOM操作的代理
如下图所示：
DOM更新前后的钩子
组合模式
- 定义：可多个对象组合使用，也可单个对象单独使用
- 应用场景：DOM，前端组件，文件目录，部门
React组件结构
如下图所示：
总结与反思
这节课我了解了设计模式，也学习到了设计模式在前端中的广泛应用，我将会继续深入学习，将设计模式应用到项目开发中。
