前端设计模式应用

黎子不会写代码
84 阅读2分钟

浏览器中的设计模式

单例模式

发布订阅模式

单列模式

定义

  • 全局唯一访问对象

应用场景

  • 缓存，全局状态管理等。

a38fd8e45c1f454196d29f7f93fd5733_tplv-k3u1fbpfcp-watermark.png

用单例模式实现请求缓存

image(1).png

image(3).png

image(4).png

image(5).png

发布订阅模式

定义

  • 一种订阅机制，可在被订阅对象发生变化时通知订阅者。

应用场景

  • 从系统架构之间的解耦，到业务中一些实现模式，像邮件订阅，上线订阅等，应用广泛。

image(6).png

用发布订阅模式实现用户上线订阅

image(7).png

image(8).png

Javascript中的设计模式

原型模式

代理模式

迭代器模式

原型模式

定义

  • 复制已有对象来创建新的对象

应用场景

  • JS中对象创建的基本模式

用原型模式创建上线订阅中的用户

image(9).png

image(10).png

代理模式

定义

  • 可自定义控制对原对象的访问方式，并且允许在更新前后做一些额外处理

应用场景

  • 监控、代理工具、前端框架实现等等

使用代理模式实现用户状态订阅

image(12).png

image(13).png

image(14).png

迭代器模式

定义

  • 在不暴露数据类型的情况下访问集合中的数据

应用场景

  • 数据结构中有多种数据类型，列表、树等，提供通用操作接口

image(15).png

用for of迭代所有组件

image(16).png

image(17).png

image(18).png

前端框架中的设计模式

代理模式

组合模式

代理模式

Vue组件实现计数器

image.gif

image(19).png

前端框架中对DOM操作的代理

graph LR
更改DOM属性 --> 视图更新

graph LR
更改DOM属性 --> 更新虚拟DOM -->|Diff| 视图更新

Dom更新前后的钩子

image(20).png

image(1).gif

组合模式

定义

  • 可多个对象组合使用，也可单个对象独立使用

应用场景

  • DOM，前端组件，文件目录，部门

React的组件结构

image(21).png

image(22).png

总结

设计模式不是银弹

  • 总结出抽象的模式相对比较简单，但是想要将抽象的模式套用到场景中却非常困难

  • 现代编程语言的多编程范式带来的更多可能性

  • 真正优秀的开源项目学习设计模式并不断实践

avatar
文章
阅读
粉丝