这是我参与「第四届青训营 」笔记创作活动的第4天。
什么是设计模式？
软件设计中常见问题的解决方案模型。
- 历史经验的总结
- 与特定语言无关
七大设计原则
- 单一职责原则: 设计目的单一的类
- 开放-封闭原则: 对扩展开放,对修改封闭
- 李氏(Liskov)替换原则:子类可以替换父类
- 依赖倒置原则: 要依赖于抽象,而不是具体实现:针对接口编程,不要针对实现编程
- 接口隔离原则: 使用多个专门的接口比使用单一的总接口要好
- 组合重用原则: 要尽量使用组合，而不是继承关系达到重用目的
- 迪米特(Demeter)原则(最少知识法则): 一个对象应当对其他对象有尽可能少的了解
设计模式分类
三类23种设计模式
- 创建型
- 结构型
- 行为型
创建型-如何创建一个对象（5种）
- 工厂方法模式
- 抽象工厂模式
- 单例模式
- 建造者模式
- 原型模式
结构型-如何灵活的将对象组装成较大的结构（7种）
- 适配器模式
- 装饰器模式
- 代理模式
- 外观模式
- 桥接模式
- 组合模式
- 享元模式
行为型-负责对象间的高效通信和职责划分(11种)
- 策略模式
- 模板方法模式
- 观察者模式
- 迭代子模式
- 责任链模式
- 命令模式
- 备忘录模式
- 状态模式
- 访问者模式
- 中介者模式
- 解释器模式
浏览器中的设计模式
- 单例模式
- 发布订阅模式
单例模式
- 定义：全局唯一访问对象
- 例如:浏览器
window对象.
- 应用场景：缓存、全局状态管理等
发布订阅模式
- 定义：一种订阅机制，可在被订阅对象发生变化时通知订阅者。
- 应用场景：从系统架构之间的解耦，到业务中一些实行模式，像邮件订阅、上线订阅等等，应用广泛。
JavaScript中的设计模式
- 原型模式
- 代理模式
- 迭代模式
原型模式
- 定义：复制已有对象来创建新的对象。
- 应用场景：JS中对象创建的基本模式。
代理模式
- 定义：可自定义控制对原对象的访问方式,并且允许在更新前后做一些额外处理。
- 应用场景：监控、代理工具、前端框架实现等等。
迭代器模式
- 定义：在不暴露数据类型的情况下访问集合中的数据。
- 应用场景：数据结构中有多种数据类型，列表，树等，提供通用操作接口。
前端框架中的设计模式
- 代理模式
- 组合模式
代理模式
- 定义：可自定义控制对原对象的访问方式,并且允许在更新前后做一些额外处理。
- 应用场景：监控、代理工具、前端框架实现等等。
原生DOM操作
graph LR
更改DOM属性 --> 视图更新
前端框架中对DOM操作的代理
graph LR
更改DOM属性 --> 更新虚拟DOM --Diff--> 视图更新
组合模式
- 定义：可多个对象组合使用，也可单个对象独立使用。
- 应用场景：DOM、前端组件、文件目录、部门...
- 例子：React的组件结构
function App() { return ( <div className="App"> <Header /> <Count /> <Footer /> </div> ); }
总结
本文记录并介绍了前端业务场景中常用的设计模式，仅作为入门学习提纲。在上述所有设计模式中，有些设计模式已经过时，并且新的或者组合式的设计模式正在实际开发中诞生。设计模式并不能解决现代开发中的所有场景问题，更重要的是学习这些设计模式的思想，融汇贯通，针对不同的场景选择最合适的解决方案。
