前端设计模式应用 ｜ 青训营笔记
这是我参与「第四届青训营 」笔记创作活动的的第4天
什么是设计模式
-
常见问题 + 解决方案模型
-
背景:1.模式语言:城镇、建筑、建造2.设计模式：可复用面向对象软件的基础
单例对象
- 定义：全局唯一访问对象
- 应用场景：缓存，全局状态管理等
用单例模式实现请求缓存
- 传统单例
- 创建用户如果没有数据，就先进行缓存，请求两次，如果两次请求的时间不超过50ms,就认为请求成功。
- 而js可以不用先通过创建一个类，然后再创建对象使用，它可以直接创建对象使用
发布订阅模式
- 定义：一种订阅机制，可在被订阅对象发生变化是通知订阅者
- 场景：系统架构解耦，业务实现。
- 发布订阅的场景
js中的设计模式
原型模式
- 定义：复制已有对象来创建新的对象
- 场景：js中对象创建的基本模式
- object.create()基于已有对象创建新的对象
代理模式
- 定义：可自定义控制对原对象的访问方式，并且允许在更新前后做一些额外处理
- 应用场景：监控，代理工具，前端框架实现
- 场景：js中对象创建的基本模式
迭代器模式
- 定义：在不暴露数据类型的情况下访问集合中的数据
- 应用场景：数据结构中有多种数据类型，列表，树等，提供操作接口
前端框架中的设计模式
代理模式
- vue组件实现计数器
- 前端框架中对dom操作的代理
- dom前后的勾子
组合模式
- 定义：可对各对象组合使用，也可单个对象独立使用
- 应用场景：DOM，前端组建，文件目录，部门
- React的组件结构
