javascript 常见设计模式

什么是设计模式?

在软件开发中，设计模式是解决特定问题的经验总结和可复用的解决方案。设计模式可以提高代码的复用性、可维护性和可读性，是提高开发效率的重要手段。

单例模式

1.概念

单例模式 （Singleton Pattern），保证一个类只有一个实例，并提供一个访问它的全局访问点。也就是说，第二次使用同一个类创建新对象的时候，应该得到与第一次创建的对象完全相同的对象。

2.代码实现

class Singleton {
  static instance;
  constructor() {
    if (!Singleton.instance) {
      Singleton.instance = this;
    }
    return Singleton.instance;
  }
}

const instance1 = new Singleton();
const instance2 = new Singleton();

console.log(instance1 === instance2); // true
3.应用场景
  • 浏览器中的 window 和 document 全局变量，这两个对象都是单例，任何时候访问他们都是一样的对象，window 表示包含 DOM 文档的窗口，document 是窗口中载入的 DOM 文档，分别提供了各自相关的方法。
  • element-ui 中以服务方式调用的Loading 是单例的。
  • 项目中的全局状态管理模式 Vuex 维护的全局状态，vue-router`维护的路由实，在单页应用的单页面中都属于单例的应用。
4.优缺点

优点

  • 内存中只有一个实例，减少内存开销，尤其是频繁创建和销毁实例时（如管理学院首页页面缓存）。
  • 避免资源的多重占用（如写文件操作）。

缺点

  • 扩展不友好：没有接口，不能继承。
  • 与单一职责原则冲突，一个类应该只关心内部逻辑，而不关心实例化方式。

二、发布订阅模式

1.概念

JavaScript 发布订阅模式（Publish/Subscribe Pattern）是一种常用的设计模式。在发布订阅模式中，事件的发生者（发布者）不需要直接调用事件的处理者（订阅者），而是通过一个「发布-订阅中心」来管理事件的发生和处理。具体来说，发布者将事件发布到「发布-订阅中心」中，订阅者可以向「发布-订阅中心」注册事件处理函数，当事件发生时，「发布-订阅中心」会将事件通知给所有注册了该事件处理函数的订阅者，订阅者就可以处理该事件。
发布订阅模式的核心思想是解耦事件的发生和事件的处理，使得事件发生者和事件处理者之间不直接依赖，从而提高程序的灵活性和可维护性。

2.代码实现


/**
 * @description: 发布订阅
 * @return {*}
 */
// events: {
//   [key]: [{fn: Function, isOnce: Boolean},],
//   [key2]: [{fn: Function, isOnce: Boolean}, ],
// }
class EventBus {
  events = {}
  constructor() {
    this.events = {}
  }

  // 注册事件
  on(key, fn, isOnce = false) {
    if (!key) return
    const currentEvents = this.events[key]
    if (!currentEvents) {
      this.events[key] = []
    }
    this.events[key].push({ fn, isOnce })
  }
  // once
  once(key, fn) {
    this.on(key, fn, true)
  }
  // 触发事件
  emit(key, ...args) {
    if (!key) return
    const currentEvents = this.events[key]
    if (!currentEvents || !currentEvents.length) {
      return
    }
    this.events[key] = currentEvents.filter((item) => {
      item.fn(...args)
      return !item.isOnce
    })
  }
  // 取消订阅
  off(key, fn = undefined) {
    if (!this.events[key]) return
    if (!fn) {
      this.events[key] = []
    } else {
      this.events[key] = this.events[key].filter((_) => _.fn !== fn)
    }
  }
}
const e = new EventBus()

function fn1(a, b) { console.log('fn1', a, b) }
function fn2(a, b) { console.log('fn2', a, b) }
function fn3(a, b) { console.log('fn3', a, b) }

e.on('key1', fn1)
e.on('key1', fn2)
e.once('key1', fn3)
e.emit('key1', 10, 20) // 触发 fn1 fn2 fn3
e.off('key1', fn1)
e.emit('key1', 100, 200) // 触发 fn2
3.应用场景
4.优缺点

优点

  • 发布-订阅模式的有点非常明显，一为时间上的解耦，二为对象之间的解耦。
  • 应用广泛，既可以用在异步编程中，也可以帮助我们更松耦合的代码编写。

缺点

  • 创建订阅者本身要消耗一定的时间和内存，而且当订阅一个消息后，也许此消息最后都未发生，但这个订阅者会始终存在于内存中。
  • 发布-订阅模式虽然可以弱化对象之间的联系，但如果过度使用的话，对象与对象之间必要的联系也将被深埋在背后，会导致程序难以跟踪维护和理解。

二、观察者模式

1.概念

观察者模式（Observer Pattern）是一种行为型设计模式，它定义了一种一对多的依赖关系，当一个对象的状态发生改变时，其所有依赖者都会收到通知并自动更新。

2.代码实现
let observerId = 1;
let observedId = 10;
//观察者类
class Observer {
  constructor() {
    this.id = observerId++;
  }
  //观测到变化后的处理
  update(ob) {
    console.log("观察者" + this.id + `-检测到被观察者${ob.id}变化`);
  }
}

//被观察者列
class Observed {
  constructor() {
    this.observers = [];
    this.id = observedId++;
  }
  //添加观察者
  addObserver(observer) {
    this.observers.push(observer);
  }
  //删除观察者
  removeObserver(observer) {
    this.observers = this.observers.filter(o => {
      return o.id != observer.id;
    });
  }
  //通知所有的观察者
  notify() {
    this.observers.forEach(observer => {
      observer.update(this);
    });
  }
}
let mObserved = new Observed();
let mObserver1 = new Observer();
let mObserver2 = new Observer();

mObserved.addObserver(mObserver1);
mObserved.addObserver(mObserver2);

mObserved.notify();
3.应用场景

微信公众号，如果一个用户订阅了某个公众号，那么便会收到公众号发来的消息，那么，公众号就是『被观察者』，而用户就是『观察者』

观察者模式 VS 发布订阅模式

在这里插入图片描述

对象关系
  • 观察者模式中，被观察者和观察者之间的关系是一对多的关系，即一个被观察者可以有多个观察者，但是每个观察者只关注一个被观察者。被观察者维护一个观察者列表，当被观察者发生变化时，通知所有观察者进行相应的处理。
  • 发布订阅模式中，发布者和订阅者之间的关系是多对多的关系，即一个发布者可以有多个订阅者，每个订阅者可以关注多个发布者。发布者和订阅者之间通过「发布-订阅中心」进行通信，当发布者发生变化时，通知所有订阅者进行相应的处理。
解耦
  • 在观察者模式中，被观察者和观察者之间的通信是直接的，即被观察者会直接调用观察者的方法进行通信。这种直接的通信方式可能会导致被观察者与观察者之间的耦合度较高。
  • 在发布订阅模式中，发布者和订阅者之间的通信是通过「发布-订阅中心」进行的，即发布者不直接与订阅者通信，而是通过「发布-订阅中心」进行通信。这种间接的通信方式可以降低发布者与订阅者之间的耦合度。

三、策略模式

1.概念

策略模式（Strategy Pattern）指的是定义一系列的算法，把它们一个个封装起来，并且使它们可以互相替换。封装的策略算法一般是独立的，策略模式根据输入来调整采用哪个算法。
⽬的就是将策略的实现和使用分离。

Context ：封装上下文，根据需要调用需要的策略，屏蔽外界对策略的直接调用，只对外提供一个接口，根据需要调用对应的策略；
Strategy ：策略，含有具体的算法，其方法的外观相同，因此可以互相代替；
StrategyMap ：所有策略的合集，供封装上下文调用；

2.应用(表单校验)

表单验证是一个常见的应用场景，而策略模式可以很好地应用于表单验证的实现。通过策略模式，可以将不同的验证规则封装成策略对象，根据具体的情况选择相应的验证策略进行验证。这样可以实现更加灵活和可扩展的表单验证功能。

// 定义表单验证策略对象
const strategies = {
  isNotEmpty(value, errorMsg) {
    if (value === '') {
      return errorMsg;
    }
  },
  isEmail(value, errorMsg) {
    const emailReg = /^\w+([-+.]\w+)*@\w+([-.]\w+)*.\w+([-.]\w+)*$/;
    if (!emailReg.test(value)) {
      return errorMsg;
    }
  },
  minLength(value, length, errorMsg) {
    if (value.length < length) {
      return errorMsg;
    }
  },
};
​
// 表单验证类
class Validator {
  constructor() {
    this.rules = [];
  }
  addRule(value, rule, errorMsg) {
    this.rules.push(() => strategies[rule](value, errorMsg));
  }
  validate() {
    for (let rule of this.rules) {
      const errorMsg = rule();
      if (errorMsg) {
        return errorMsg;
      }
    }
  }
}
​
// 使用策略模式进行表单验证
const validator = new Validator();
validator.addRule('example@qq.com', 'isNotEmpty', '邮箱不能为空');
validator.addRule('example@qq.com', 'isEmail', '邮箱地址无效');
const error = validator.validate();
if (error) {
  console.log(error);
} else {
  console.log('表单验证通过');
}
4.优缺点

优点

  • 算法切换自由：可以在运行时根据需要切换算法。
  • 避免多重条件判断：消除了复杂的条件语句。
  • 扩展性好：新增算法只需新增一个策略类，无需修改现有代码。

缺点

  • 策略类数量增多：每增加一个算法，就需要增加一个策略类。
  • 所有策略类都需要暴露：策略类需要对外公开，以便可以被选择和使用。

四代理模式

1.概念

为其他对象提供一种代理以控制对这个对象的访问。在某些情况下，一个对象不适合或者不能直接引用另一个对象，而代理对象可以在客户端和目标对象之间起到中介的作用。

代码举例
1、图片懒加载
//图片加载
let imageEle = (function(){
    let node = document.createElement('img');
    document.body.appendChild(node);
    return {
        setSrc:function(src){
            node.src = src;
        }
    }
})();
//代理对象
let proxyImage = (function(){
    let img = new Image();
    img.onload = function(){
        imageEle.setSrc(this.src);
    };
    return {
        setSrc:function(src){
            img.src = src;
            imageEle.setSrc('loading.gif');
        }
    }
})();
proxyImage.setSrc('example.png');
2.缓存代理

缓存代理可以作为一些开销大的运算结果提供暂时的存储，下次运算时，如果传递进来的参数跟之前一致，则可以直接返回前面存储的运算结果

//计算乘积
let mult = function(){
    let result = 1;
    for(let i = 0,len = arguments.length;i < len;i++){
        result*= arguments[i];
    }
    return result;
}

//缓存代理
let proxy = (function(){
    let cache = {};
    reutrn function(){
        let args = Array.prototype.join.call(arguments,',');
        if(args in cache){
            return cache[args];
        }
        return cache[args] = mult.apply(this,arguments);
    }
})();
3.优缺点

优点

  • 职责分离：代理模式将访问控制与业务逻辑分离。
  • 扩展性：可以灵活地添加额外的功能或控制。
  • 智能化：可以智能地处理访问请求，如延迟加载、缓存等。
    缺点
  • 性能开销：增加了代理层可能会影响请求的处理速度。
  • 实现复杂性：某些类型的代理模式实现起来可能较为复杂。

注：更多设计模式待后续补充…

参考链接

  • https://juejin.cn/post/6844904032826294286?searchId=202407012147303848AD829D3DBC1E62B7
  • https://juejin.cn/post/7372514352425926668
  • https://juejin.cn/post/6844904138707337229?searchId=20240701174747B0D1A8A77127F94493AD#heading-19
  • https://www.runoob.com/design-pattern/design-pattern-tutorial.html

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mfbz.cn/a/763050.html

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

ssm校园二手交易平台小程序

ssm校园二手交易平台小程序

设计技术&#xff1a; 开发语言&#xff1a;Java数据库&#xff1a;MySQL技术&#xff1a;SpringMybatisSpringMvc微信小程序 工具&#xff1a;IDEA、Maven、Navicat 主要功能&#xff1a; (a) 管理员&#xff1b;管理员进入系统主要功能包括首页&#xff0c;个人中心&…
阅读更多...
RedHat9 | 内部YUM本地源服务器搭建

RedHat9 | 内部YUM本地源服务器搭建

服务器参数 标识公司内部YUM服务器主机名yum-server网络信息192.168.37.1/24网络属性静态地址主要操作用户root 一、基础环境信息配置 修改主机名 [rootyum-server ~]# hostnamectl hostname yum-server添加网络信息 [rootyum-server ~]# nmcli connection modify ens160 …
阅读更多...
红黑树模拟

红黑树模拟

1.红黑树概念 红黑树&#xff0c;是一种二叉搜索树&#xff0c;但每个节点上增加了一个存储位表示结点的颜色&#xff0c;可以是RED或BLACK。通过任何一条根到叶子节点的途径上各个节点的着色方式的限制&#xff0c;红黑树确保没有一条路径会超过其他路径的二倍&#xff0c;因…
阅读更多...
MySQL InnoDB Cluster 高可用集群部署

MySQL InnoDB Cluster 高可用集群部署

MySQL InnoDB Cluster 简介 官方文档&#xff1a;https://dev.mysql.com/doc/refman/8.4/en/mysql-innodb-cluster-introduction.html 本章介绍 MySQL InnoDB Cluster&#xff0c;它结合了 MySQL 技术&#xff0c;使您能够部署和管理完整的 MySQL 集成高可用性解决方案。 说…
阅读更多...
SOC模块LoRa-STM32WLE5有哪些值得关注

SOC模块LoRa-STM32WLE5有哪些值得关注

SoC 是片上系统的缩写&#xff0c;是一种集成芯片&#xff0c;集成了计算机或其他电子系统的所有或大部分组件。这些组件通常包括中央处理器 (CPU)、内存、输入/输出接口和辅助存储接口。包含数字、模拟、混合信号和通常的 RF 信号处理功能&#xff0c;具体取决于应用。片上系统…
阅读更多...
优质快刊合集！内含TOP刊、CCF推荐期刊！编辑友好，极速发表！

优质快刊合集！内含TOP刊、CCF推荐期刊！编辑友好，极速发表！

【SciencePub学术】本期给大家推荐的是几本计算机快刊合集&#xff0c;内含优质TOP刊&#xff0c;现在版面已经所剩不多。且均属于我处目前进展很顺的期刊&#xff0c;大家可以放心投稿&#xff01; 计算机工程类 SCI&#xff08;TOP刊 / CCF-C类&#xff09; 【期刊简介】IF…
阅读更多...
高斯过程的数学理解

高斯过程的数学理解

目录 一、说明 二、初步&#xff1a;多元高斯分布 三、 线性回归模型与维度的诅咒 四、高斯过程的数学背景 五、高斯过程的应用&#xff1a;高斯过程回归 5.1 如何拟合和推理高斯过程模型 5.2 示例&#xff1a;一维数据的高斯过程模型 5.3 示例&#xff1a;多维数据的高斯过程模…
阅读更多...
滑动窗口算法系列|基础概念|例题讲解

滑动窗口算法系列|基础概念|例题讲解

大家好,我是LvZi,今天带来滑动窗口算法系列|基础概念|例题讲解 一.滑动窗口问题基础概念 滑动窗口本质上是同向双指针问题,脱胎于双指针.使用两个指针l, r维护一定长度的数组区间,在r 指针遍历的过程中,执行进窗口,判断,更新结果,出窗口 等操作,当r指针遍历完毕,就能得到最后…
阅读更多...
Study--Oracle-05-Oracler体系结构

Study--Oracle-05-Oracler体系结构

一、oracle 体系概览 Oracle数据库的体系结构通常包括以下主要组件&#xff1a; 1、实例&#xff08;Instance&#xff09;&#xff1a;运行数据库的软件环境&#xff0c;包括内存结构&#xff08;SGA&#xff09;和进程结构&#xff08;Background Processes and User Proces…
阅读更多...
如何一键修复0x0000011b错误，修复0x0000011b终极指南

如何一键修复0x0000011b错误，修复0x0000011b终极指南

在使用Windows操作系统和网络打印机的过程中&#xff0c;很多用户可能遇到了一个常见的错误代码“0x0000011b”。这个问题通常发生在尝试连接或使用网络打印机时&#xff0c;尤其是在安装了特定Windows安全更新后。本文将详细介绍如何快速一键修复此问题&#xff0c;确保您的打…
阅读更多...
利用MMDetection将单阶段检测器作为Faster R-CNN的RPN

利用MMDetection将单阶段检测器作为Faster R-CNN的RPN

将单阶段检测器作为RPN 一、在 Faster R-CNN 中使用 FCOSHead 作为 RPNHead与原始配置的对比结果Neck (FPN)RPN HeadROI Head学习率 使用单阶段检测器作为RPN的优势1. 速度提升2. 准确性3. 简化架构4. 灵活性 二、评估候选区域三、用预先训练的 FCOS 训练定制的 Faster R-CNN 本…
阅读更多...
开源模型应用落地-FastAPI-助力模型交互-WebSocket篇（五）

开源模型应用落地-FastAPI-助力模型交互-WebSocket篇（五）

一、前言 使用 FastAPI 可以帮助我们更简单高效地部署 AI 交互业务。FastAPI 提供了快速构建 API 的能力,开发者可以轻松地定义模型需要的输入和输出格式,并编写好相应的业务逻辑。 FastAPI 的异步高性能架构,可以有效支持大量并发的预测请求,为用户提供流畅的交互体验。此外,F…
阅读更多...
shellhub 部署

shellhub 部署

1、环境介绍 操作系统&#xff1a;龙蜥os 7.9 2、安装docker yum install -y yum-utils device-mapper-persistent-data lvm2 yum-config-manager --add-repo https://mirrors.aliyun.com/docker-ce/linux/centos/docker-ce.repo sed -i sdownload.docker.commirrors.aliyun.c…
阅读更多...
江协科技51单片机学习- p23 DS1302实时时钟

江协科技51单片机学习- p23 DS1302实时时钟

&#x1f680;write in front&#x1f680; &#x1f50e;大家好&#xff0c;我是黄桃罐头&#xff0c;希望你看完之后&#xff0c;能对你有所帮助&#xff0c;不足请指正&#xff01;共同学习交流 &#x1f381;欢迎各位→点赞&#x1f44d; 收藏⭐️ 留言&#x1f4dd;​…
阅读更多...
【TB作品】智能台灯，ATMEGA16单片机，Proteus仿真

【TB作品】智能台灯，ATMEGA16单片机，Proteus仿真

智能台灯 1 adc检测光强光敏电阻 显示电压 2 光强太高 也就是高于临界值 就关闭小灯 3 光强太低 也就是低于临界值 就打开小灯 3 按键修改临界值 显示 实验报告&#xff1a;基于ATMEGA16单片机的智能台灯设计与Proteus仿真 1. 实验背景 智能台灯是一种能够根据环境光强自动调…
阅读更多...
计算机网络-第5章运输层

计算机网络-第5章运输层

5.1运输层协议概述 5.1.1进程之间的通信 运输层向它上面的应用层提供通信服务&#xff0c;它属于面向通信部分的最高层&#xff0c;同时也是用户功能中的最低层。 通信的两端应当是两个主机中的应用进程。 运输层复用和分用&#xff1a;复用指在发送方不同的应用进程都可以…
阅读更多...
Vue2组件传值（通信）的方式

Vue2组件传值（通信）的方式

目录 1.父传后代 ( 后代拿到了父的数据 )1. 父组件引入子组件&#xff0c;绑定数据2. 子组件直接使用父组件的数据3. 依赖注入(使用 provide/inject API)1.在祖先组件中使用 provide2.在后代组件中使用 inject 2.后代传父 &#xff08;父拿到了后代的数据&#xff09;1. 子组件…
阅读更多...
【Qt】认识Qt界面Hello world小程序

【Qt】认识Qt界面Hello world小程序

一.认识Qt界面 1.左边栏 在编辑模式下&#xff0c;左边竖排的两个窗⼝叫做 "边栏" 。 ① 是项⽬⽂件管理窗⼝ ② 是打开⽂件列表窗⼝。 边栏⾥的窗⼝数⽬可以增加&#xff0c;边栏⼦窗⼝标题栏有⼀排⼩按钮&#xff0c;最右边的是关闭按钮&#xff0c;倒数第⼆个是 …
阅读更多...
千元好礼等你来拿 MatrixOne最强体验官

千元好礼等你来拿 MatrixOne最强体验官

开发者集合&#xff01;[MatrixOne最强体验官]带着丰厚的奖品走来啦&#xff01;MatrixOne 是一款高度兼容 MySQL 语法的 HTAP 数据库&#xff0c;MatrixOne Cloud (MO Cloud) 是基于 MatrixOne 内核的全托管云原生数据平台&#xff0c;具备实时 HTAP&#xff0c;多租户&#x…
阅读更多...
Unity Shader 软粒子

Unity Shader 软粒子

Unity Shader 软粒子 前言项目Shader连连看项目渲染管线设置 鸣谢 前言 当场景有点单调的时候&#xff0c;就需要一些粒子点缀&#xff0c;此时软粒子就可以发挥作用了。 使用软粒子与未使用软粒子对比图 项目 Shader连连看 这里插播一点&#xff0c;可以用Vertex Color与…
阅读更多...
最新文章

Copyright @ 2022~2023

友情链接： 我的编程经验分享 一条长河网 尧图网站开发 尧图建网站