前端设计模式应用|青训营笔记

102 阅读2分钟

前端设计模式应用|青训营笔记

这是我参与「 第四届青训营 」笔记创作活动的第5天

什么是设计模式?

设计模式(Design pattern)代表了最佳的实践,通常被有经验的面向对象的软件开发人员所采用。设计模式是软件开发人员在软件开发过程中面临的一般问题的解决方案。这些解决方案是众多软件开发人员经过相当长的一段时间的试验和错误总结出来的。

设计模式:

  • 软件设计中常见问题的解决方案模型
  • 历史经验的总结
  • 与特定语言无关

23种设计模式

创建型:如何创建一个对象

  • 单例模式
  • 工厂模式
  • 抽象工厂模式
  • 原型模式
  • 建造者模式

结构型:如何灵活地将对象组装成较大的结构

  • 适配器模式
  • 桥接模式
  • 装饰模式
  • 组合模式
  • 外观模式
  • 享元模式
  • 代理模式

行为型:负责对象间的高效通信和职责划分

  • 模板方法模式
  • 命令模式
  • 访问者模式
  • 迭代器模式
  • 观察者模式
  • 中介者模式
  • 备忘录模式
  • 解释器模式
  • 状态模式
  • 策略模式
  • 职责链模式

前端涉及的设计模式

浏览器中的设计模式

单例模式: 定义一个全局唯一访问对象

应用场景:缓存、全局状态管理等。例:windows。

发布订阅模式: 一种订阅机制,可在被订阅对象发生变化时通知订阅者

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

JavaScript中的设计模式:

原型模式: 复制已有对象来创建新的对象

应用场景:JS中对象创建的基本模式

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

应用场景:监控,代理工具,前端框架实现等等。

迭代器模式: 在不暴露数据类型的情况下访问集合中的数据

应用场景:数据结构有多种数据类型:列表、树等,提供通用操作接口。

前端框架中的设计模式:

代理模式: 同上。

组合模式: 可多个对象组合使用,也可单个对象独立使用。

应用场景:DOM,前端组件,文件目录,部门目录。