前端设计模式 | 青训营

34 阅读2分钟

学习在传统的基于面向的设计模式在前端中的应用场景,以及在非传统的面向对象的设计语言中和不同场景下的应用

设计模式(Design Pattern):软件设计中常见问题的解决方案模型

    历史经验总结
    与特定语言无关

23种设计模式:

    创建型:创建对象,比较高效灵活
    结构性:将对象组装成较大的结构
    行为型:负责对象间的沟通和划分
    

浏览器中的设计模式:

    单例模式:存在全局唯一访问对象,在缓存和全局状态管理的场景应用
    发布订阅模式(观察者模式):一种订阅机制,在被订阅对象发生变化时通知订阅者,从系统架构之间的解耦到业务中一些实现模式,类似邮件订阅和上线订阅等使用,应用广泛
   

JavaScript中的设计模式:

    原型模式:复制已有对象创建新对象,类似JavaScript中的原型链,区别于面向对象语言中的创建对象方式
    代理模式:可自定义控制对原对象的访问方式和写入方式,并且允许在更新前后做额外处理,可以在监控记录、代理工具、前端框架实现等场景使用
    迭代器模式:在不暴露数据类的情况下访问集合中的数据,提供访问多种数据类型的通用操作接口

使用代理模式实现用户状态订阅:
1691740687328.jpg 为方便后期维护工作可利用代理模式进行优化,首先将此步骤变化为仅18-19行,再进行新的定义分离功能。

前端框架中的设计模式:

    代理模式:与JavaScript中的不同
    组合模式:可以多个对象组合使用,也可单个使用,在DOM、前端组件、文件目录和部门等应用场景应用。类似迭代器模式
    

但是总结简单,设计模式的应用场景却比较困难,需要不断实践