这是我参与「第四届青训营 」笔记创作活动的第5天
一、什么是设计模式
设计模式是软件设计中常见问题的解决方案模型：
- 历史经验的总结
- 与特定语言无关
二、设计模式类型
1.创建型--如何创建一个对象
单例模式、抽象工厂模式、建造者模式、工厂模式、原型模式
2.结构型—如何邻国的将对象组装成较大的结构
适配器模式、桥接模式、装饰模式、组合模式、外观模式、享元模式、代理模式
3.行为型—负责对象间的高效通信和职责划分
模版方法模式、命令模式、迭代器模式、观察者模式、中介者模式、备忘录模式、解释器模式、状态模式、策略模式、职责链模式、访问者模式
三、前端场景中的设计模式
（一）浏览器中的设计模式
1.单例测试
- 定义：全局唯一访问对象
- 应用场景：缓存、全局状态管理等
- 用单例模式实现请求缓存：
使用requset—getInstance来创建对象。在不同时间或地方发送一些相同的url请求，第二次请求的使用可以复用之前的值作为缓存，带来更好的用户体验。
上述代码逻辑更简单，更容易使用。定义自变量，作为全局唯一的对象，存储缓存。
单一模式的使用。
2.发布订阅模式（观察者模式）
- 定义：一种订阅机制，可在订阅对象发生变化时通知订阅者
其中，button是被订阅的对象，订阅者是函数。
- 应用场景：从系统结构之间的解耦，到业务中一些实现模式，想邮件订阅，上线订阅等
- 用发布订阅模式实现用户上线订阅
Notify是类型的定义；用户的定义包括名称（name）、status、followers（订阅的人，上线时的通知函数）；初始化一个新的user，之传入名称，默认status是offline，初始化一个空的订阅人的数组；每个subscribe有一个订阅的方法，包括订阅的人，和上线时的通知函数；每个人有一个online的方法，状态改为online，通知订阅者，调用订阅函数。
（二）Javascript中的设计模式
1.原型模式
- 定义：复制已有对象来创建新的对象
- 应用场景：JS中对象创建的基本模式
- 用原型模式创建上线订阅中的用户
先定义一个自变量对象（作为原型），定义与前面介绍的一样；创建一个独立方法CreatUser，接受name作为参数，JS中提供一个创建对象的方法是object.create。
将之前的newuser改为createuser，使用方模式和前面介绍一样。
2.代理模式
- 定义：可自定义控制对原对象的访问方式，并且允许在更新前后做一些额外处理。
- 应用场景：监控（封装发送请求，每次发送得到返回值进行监控，大多数环境下做改写，得到监控值发送给服务器）、代理工具（是业务应用场景，例如开发中会用到的代理）、前端框架实现等。
- 使用代理模式实现用户状态订阅
online只做一件事情，可维护性更高。
实现过程如上。
3.迭代器模式
- 定义：在不暴露数据类型的情况访问集合中的数据
- 应用场景：数据结构中有多种数据类型，列表、树等，提供通用操作接口
- 用for of迭代所有组件：
拟一个DOM结构，tag、children定义子组量 。
给任意对象添加一个内置方法symbol.iterator让组件变成可迭代的。
使用过程如上。
(三）前端框架中的设计模式
- 代理模式
- 组合模式
1.Vue组件实现计数器
2.前端框架中对DOM操作的代理
更改DOM属性à更新虚拟DOMà视图更新
3.Dom更新前后的钩子
4.组合模式
- 定义：可多个对象组合使用，也可单个对象独立使用
- 应用场景：DOM，前端组件，文件目录，部门
5.React的组件结构
总结与反思
设计模式不是银弹，并不能解决所有问题。总结出抽象的模式相对简单，但想要将抽象的模式套用带场景中是非常困难的；现代编程语言的多编程凡是带来的更多可能性；真正优秀的开源项目学习设计模式并不断实践。通过这节课的学习，我学习到了新的领域，设计模式更多的是一种思想和想法，不是一种特定的实现方法，更需要在今后的学习工作中不断思考，不断前进。
