这是我参与「第四届青训营 」笔记创作活动的第3天
一、什么是设计模式
定义：
-
模式是一种可服用的解决方案，用于解决软件设计中遇到的常见问题。
-
设计模式是软件设计中常见问题的解决方案模型
-
是历史经验的总结
-
与特定语言无关
二、设计模式的分类及原则
2.1 三种分类
一般认为的设计模式共有23种，将其分为3类：
-
创建型——如何创建一个对象
- 工厂模式
- 抽象工厂
- 建造者
- 原型
- 单例模式
-
结构型——如何灵活的将对象组装成较大的结构
- 适配器模式
- 桥接模式
- 装饰器模式
- 外观模式
- 享元模式
- 代理模式
-
行为型——负责对象间的高效通信和职责划分
2.2 六大原则
设计模式一般要遵循设计原则，设计原则分为6类：
- *单一职责原则*： 一个类应该只有一 个发生变化的原因。
- *开闭原则*：一个软件实体，如类、模块和函数应该对扩展开放,对修改关闭。
- *氏替换原则*：所有引用基类的地方必须能透明地使用其子类的对象，即子类对象可以替换其父类对象，而程序执行效果不变。
- *迪米特法则*：又叫作最少知识原则，即一个类对于其他类知道的越少越好。
- *接口隔离原则*：多个特定的客户端接口要好于一个通用性的总接口
- *依赖倒置原则*：
1. 上层模块不应该依赖底层模块， 它们都应该依赖于抽象。
2. 抽象不应该依赖于细节,细节应该依赖于抽象
三、常见设计模式
3.1 浏览器中的设计模式
1. 单例模式
- 定义：全局唯一访问对象
- 应用场景：缓存，全局状态管理等
例如在Windows中：
- 定义：一种订阅机制，可在被订阅对象发生变化时通知订阅者
- 应用场景：从系统架构之间的解耦到业务之间的一些实现模型，应用广泛。例如：邮件订阅、上线订阅等
3.2 JavaScript中的设计模式
1. 原型模式
- 定义：复制已有对象来创建新的对象
- 应用场景：JS中对象创建的基本模式
2. 代理模式
- 定义：可自定义控制对原有对象的访问方式以及写入方式，并允许在更新前后做一些额外的处理
- 应用场景：监控、代理工具、前端框架实现等
3. 迭代器模式
- 定义：在不暴露数据类型的情况下访问集合中的数据
- 应用场景：数据结构中有多种数据类型：列表、树等，提供通讯用的操作接口
3.3 前端框架中的设计模式
1. 代理模式
- 前端框架中对DOM操作的代理：
没有框架时对DOM的操作：
graph TD
更改DOM属性 --> 视图更新
前端框架对DOM的操作：
graph TD
更改DOM属性 --> 更改虚拟DOM --> 视图更新
DOM更新前后的“钩子”
2. 组合模式
- 定义：可对多个对象组合使用，也可对单个对象独立使用
- 应用场景：DOM、前端组件、文件目录、部门等
React的组件结构：
四、个人总结
今天是我参与青训营学习的第4天，今天主要学习的内容是前端设计模式，包括前端设计模型在浏览器、JavaScript以及前端框架中的具体应用和一些实例。每种模式都有相应的理论与之对应，我们在处理问题时应该灵活运用不同的设计模式进行处理，达到行之有效的处理结果。
