设计模式 — — 前端

常见的设计模式

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

单例模式

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

场景应用

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

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

工厂模式

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

策略模式

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

至少分成两部分:

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

代理模式

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

场景应用

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

观察者模式

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

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

场景应用

  • vue 双向绑定 v-model
  • DOM 事件(监听返回)
相关推荐
卸任7 小时前
Vibe coding工具使用心得
前端·ai编程
brien98 小时前
为什么模型标称 1M,Google Antigravity 聊到 256K 却突然失忆?我们给它做了个原生行内监控圆环
前端
修炼的dance8 小时前
录屏关键帧间隔多少合适?六档实测,2秒到10秒小了75.6%
前端
Lank_M8 小时前
关键帧从1秒拉到10秒,录屏小87.3%,摄像头小10.8%
前端
补码缩写8 小时前
用 ffprobe 拆录屏,八成字节在 29 个关键帧上
前端
百思不得小李8 小时前
一个复杂的动态表单是如何实现的
前端·设计模式
陈随易8 小时前
Cmder 停更 17 个月,2.0 支持 Windows Terminal
前端·后端·程序员
风骏时光牛马9 小时前
前沿视界
前端
kyriewen9 小时前
我扫了 814 个依赖,97 个还敢要 Node 10
前端·javascript·程序员
陈随易9 小时前
3000 万人在用的翻译插件,重写一遍就是一门生意
前端·后端·程序员