设计模式 — — 前端

常见的设计模式

  • 单例模式
  • 工厂模式
  • 策略模式
  • 代理模式
  • 观察者模式

单例模式

保证一个类仅有一个实例,并提供一个访问它的全局访问点。实现的方法为先判断实例存在与否,如果存在则直接返回,如果不存在就创建了再返回,这就确保了一个类只有一个实例对象

场景应用

  • 页面存在一个模态框的时候,只有用户点击的时候才会创建
  • Vuexredux全局态管理库也应用单例模式的思想

很多第三方库都是单例模式,多次引用只会使用同一个对象,如 jquery、lodash、moment

工厂模式

  • 工厂角色:负责实现创建所有实例的内部逻辑.
  • 抽象产品角色:是所创建的所有对象的父类,负责描述所有实例所共有的公共接口
  • 具体产品角色:是创建目标,所有创建的对象都充当这个角色的某个具体类的实例

策略模式

策略模式,就是 定义一系列的算法,把他们一个个封装起来,并且使他们可以相互替换

至少分成两部分:

  • 策略类(可变),策略类封装了具体的算法,并负责具体的计算过程
  • 环境类(不变),接受客户的请求,随后将请求委托给某一个策略类

代理模式

代理模式:为对象提供一个 代用品或占位符,以便控制对它的访问

场景应用

  • 图片懒加载 (先通过一张loading图占位,然后通过异步的方式加载图片,等图片加载好了再把完成的图片加载到img标签里面)
  • 读取本地缓存(相同参数的请求情况下,不去调用 http 请求,节约部分请求时间跟资源)

观察者模式

观察者模式定义了一种 一对多的对象依赖关系,当被依赖的对象的状态发生了改变,所有依赖它的对象都会得到通知;

比如你订阅了某个博主的频道,当有内容更新时会收到推送

场景应用

  • vue 双向绑定 v-model
  • DOM 事件(监听返回)

相关推荐

  1. 前端设计模式概论

    2024-03-15 16:14:04       35 阅读
  2. 前端设计模式

    2024-03-15 16:14:04       43 阅读
  3. 设计模式前端

    2024-03-15 16:14:04       31 阅读
  4. 设计模式 — — 前端

    2024-03-15 16:14:04       25 阅读
  5. 前端设计模式】之模版方法模式

    2024-03-15 16:14:04       39 阅读
  6. 前端常用的设计模式

    2024-03-15 16:14:04       40 阅读
  7. 前端设计模式】之观察者模式

    2024-03-15 16:14:04       41 阅读
  8. 前端设计模式】之单例模式

    2024-03-15 16:14:04       42 阅读

最近更新

  1. TCP协议是安全的吗?

    2024-03-15 16:14:04       19 阅读
  2. 阿里云服务器执行yum,一直下载docker-ce-stable失败

    2024-03-15 16:14:04       19 阅读
  3. 【Python教程】压缩PDF文件大小

    2024-03-15 16:14:04       20 阅读
  4. 通过文章id递归查询所有评论(xml)

    2024-03-15 16:14:04       20 阅读

热门阅读

  1. c上机题第二波

    2024-03-15 16:14:04       20 阅读
  2. MongoDB 入门简介

    2024-03-15 16:14:04       20 阅读
  3. SGD的重尾行为

    2024-03-15 16:14:04       18 阅读
  4. python基础小练习大全

    2024-03-15 16:14:04       23 阅读
  5. 【Spring Boot 3】【Camel 4】动态路由

    2024-03-15 16:14:04       22 阅读
  6. Numpy矩阵到OpenCV图像的转换

    2024-03-15 16:14:04       18 阅读
  7. 软考笔记--云原生架构内涵

    2024-03-15 16:14:04       21 阅读
  8. 浅析C++的指针与引用

    2024-03-15 16:14:04       20 阅读
  9. Apache Spark 的基本概念和在大数据分析中的应用

    2024-03-15 16:14:04       20 阅读
  10. RNN实战

    RNN实战

    2024-03-15 16:14:04      15 阅读
  11. 大数据开发(Spark面试真题-卷五)

    2024-03-15 16:14:04       20 阅读
  12. 基于Python的pygame库的俄罗斯方块游戏

    2024-03-15 16:14:04       22 阅读
  13. MongoDB聚合运算符:$denseRank

    2024-03-15 16:14:04       18 阅读