01 设计模式
1. 什么是设计模式
软件设计中常见问题的解决方案模型：
- 常见问题：软件发展中多年历史经验的总结
- 解决方案模型：与特定语言无关，非具象的实现方法
2. 设计模式背景
- 模式语言：城镇、建筑、建造(A PatternLanguage: Towns, Buildings, Construction)1977
- 设计模式：可复用面向对象软件的基础 (Design Patterns: Elements of ReusableObject-Oriented Software)1994
3. 设计模式趋势
从2004年开始，中国互联网企业开始发展时出现，现今开始趋于平缓，无明显变化。
4. 设计模式分类
23种设计模式
- 创建型-如何创建一个对象
- 结构型-如何灵活的将对象组装成较大的结构
- 行为型-负责对象间的高效通信和职责划分
02 浏览器中的设计模式
-
单例模式
- 定义：全局唯一访问对象
- 应用场景：缓存，全局状态管理等
-
发布订阅模式
- 定义：一种订阅机制,可在被订阅对象发生变化时通知订阅者。
- 应用场景：从系统架构之间的解耦，到业务中一些实现模式，像邮件订阅，上线订阅等等，应用广泛。
03 JavaScript中的设计模式
-
原型模式
- 定义：复制已有对象来创建新的对象
- 应用场景：JS中对象创建的基本模式
-
代理模式
- 定义：可自定义控制对原对象的访问方式，并且允许在更新前后做一些额外处理
- 应用场景：监控，代理工具，前端框架实现等等
-
迭代器模式
- 定义：在不暴露数据类型的情况下访问集合中的数据
- 应用场景：数据结构中有多种数据类型，列表数，树等，提供通用操作接口
04 前端框架中的设计模式
-
代理模式
- Vue 组件实现计数器
- 前端框架中对DOM操作的代理
-
组合模式
- 定义：可多个对象组合使用，可也单个对象独立使用
- 应用场景：DOM，前端组件，文件目录，部门
05 总结
- 总结出抽象的模式相对比较简单，但是想要将抽象的模式套用到场景中却非常困难
- 现代编程语言的多编程范式带来的更多可能性
- 真正优秀的开源项目学习设计模式并不断实现
前端设计模式是前端开发过程中非常重要的概念，它可以大大提高代码的可维护性、可复用性和可读性。在前端开发中，我们需要遵循一些通用的设计原则，使用一些通用的代码设计模式，从而使代码更加清晰、易于维护和扩展。同时，我们还需要学会抽象、封装、继承和多态等开发思维，从而编写出高质量的前端代码。
