前端设计模式
这是我参与「第四届青训营 」笔记创作活动的的第6天
1.重点内容
在真实的业务场景中，前端开发人员需要在开发的过程中时刻想着设计模型的实现。而近年来随着设计模型的不断深入和理解。作为青训营的同学也有需求了解什么是设计模型。
2.重要的知识点
- 什么是设计模型？
- 设计模式的背景
- 设计模式
- 浏览器中的设计模式
- JavaScript中的设计模式
3.详尽的知识点
什么是设计模型？
设计模型就是在软件设计过程中，常见问题的解决方案模型。
解决方案模型的特点
- 历史经验的总结
- 与特定的语言无关
设计模式的背景
- 模式语言：城镇、建筑、建造（1977）
- 设计模式：可复用面向对象软件的基础（1994）
设计模式
- 创建型 如何创建一个对象
- 结构型 如何灵活的将对象组装成较大的结构
- 行为型 负责对象间的高效通信和职责划分
浏览器中的设计模式
-
单例模式
- 全局唯一的访问对象（Windows对象）
- 常用于缓存，全局状态管理
-
发布订阅模式
- 一种订阅机制，可在被订阅对象发生变化时通知订阅者
- 常用于系统架构之间的解耦，真实业务中的实现模式
JavaScript中的设计模式
-
原型模式
- 复制已有的对象来创建新的对象
- 这是JavaScript中对象创建的基本模式
-
代理模式
- 可自定义控制对原对象的访问方式
- 常用于监控，代理工具，前端框架实现等
-
迭代器模式
- 在不暴露数据类型的情况下访问集合中的数据
- 常用于数据类型中有多种数据类型，此时可以使用迭代器模型提供通用的操作接口
前端框架中的设计模式
-
代理模式
- 更改DOM属性，更新虚拟DOM后和原来的视图做Diff操作，最后更新视图
-
组合模式
- 可以多个对象组合使用，也可以对单个对象独立使用
- 常用于DOM，前端组件，文件目录等
4.课后总结
设计模式不是万能的，总结出抽象的模型比较简单，但是想要将抽象的模式真正使用到场景中非常困难。同时现代编程语言的发展，让多编程范式带来更多的可能性。
因此作为前端开发人员，需要不断学习优秀的开源项目来提高自己学习设计模式的能力。
