设计模式 — — 前端

常见的设计模式

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

单例模式

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

场景应用

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

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

工厂模式

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

策略模式

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

至少分成两部分:

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

代理模式

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

场景应用

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

观察者模式

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

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

场景应用

  • vue 双向绑定 v-model
  • DOM 事件(监听返回)
相关推荐
万维易源13 小时前
免费药品信息查询:用API 读懂常用药
java·前端·数据库·药品信息·药品查询·药品查询api
勾勾圈圈蛋蛋13 小时前
Vue2 与 Vue3 响应式数据原理详解
前端
用户693717500138413 小时前
深夜炸场!DeepSeek 没发新模型,却重构了整个 Agent 生态
前端·后端·github
岁月留痕16813 小时前
16 实战项目一:实现暗黑模式
前端
岁月留痕16813 小时前
7 Flutter 篇:玩转组件(一)
前端
码农阿豪13 小时前
Ubuntu部署GodoOS:Docker搭建Web办公桌面并实现远程访问
前端·ubuntu·docker
郑州光合科技余经理13 小时前
餐饮预定系统架构拆解:订单链路、权限组织与私有化源码交付
java·开发语言·前端·数据库·人工智能·系统架构·php
Nebula_g13 小时前
JavaSE基础语法:特殊类(特殊情景下的设计模式)
java·开发语言·设计模式
满栀58514 小时前
vue3动态路由详细效果
前端·javascript·vue.js·typescript·前端框架
使用小功能大师14 小时前
从零搭建高可用Web应用:全栈架构实战与成本优化完全指南
前端·阿里云·架构·服务搭建