这是我参与「第四届青训营」笔记创作活动的第1天。
04 前端设计模式应用
前端设计模式
-
单例模式
- 定义：全局唯一访问对象
- 应用场景：缓存，全局状态管理。
首次创建新request，之后使用原来的request
-
发布订阅模式
- 定义：一种订阅机制，可在被订阅对象发生变化时通知订阅者。 发布-订阅模式又叫观察者模式，它定义对象间的一种一对多的依赖关系，当一个对象的状态发生改变时，所有依赖于它的对象都将得到通知。在JavaScript中，我们一般用事件模型来替代传统的发布-订阅模式。
- 应用场景：从系统架构之间的解耦，到业务中一些实现模式，像邮件订阅上线订阅等，应用广泛。
JS中的设计模式
- 原型模式
- 定义：复制已有对象来创建新的对象。读取对象的属性值时，会沿着原型链查找；设置对象的属性值时，不会查找原型链，如果当前对象中没有此属性，直接添加此属性并且设置其值；方法一般定义在原型中，属性一般通过构造函数定义在对象本身。
- 应用场景：JS中对象创建的基本模式
- 代理模式
- 定义：可自定义控制对原对象的访问方式，并且允许在更新前后做一些额外处理。
- 应用场景：监控，代理工具，前端框架实现等
- 迭代器模式
- 定义：在不暴露数据类型的情况下访问集合中的数据
- 应用场景：数据结构中有多种数据类型结构，列表，树等，提供通用操作接口
前端框架中的设计模式
-
代理模式
对DOM操作的代理： 更改DOM属性 --> 更新虚拟DOM --> 视图更新
-
组合模式
- 定义：可多个对象组合使用，也可单个对象独立使用
- 应用场景：DOM，前端组件，文件目录，部门
