当前位置: 首页 > news >正文

js设计模式-工厂模式 单例模式 观察者模式 发布订阅模式 原型模式 代理模式 迭代器模式

1 工厂模式

// 工厂模式: 调用函数返回对象function factory(name, age){return {name: name,age: age}
}const person1 = factory('Tom', 18);
// 类似的库使用工厂函数的有: jQuery, React.createElement,axios.create,vue.createApp等

2 单例模式

// 单例模式:单例方法返回唯一实例 单例模式的核心是确保只有一个实例,并提供全局访问
// 单例模式实现class SingleTon {static #instance = null;static getInstance(){if(!this.#instance){this.#instance = new SingleTon();}return this.#instance;}
}
// 这是单例模式的方法
const singleTon1 = SingleTon.getInstance();
const singleTon2 = SingleTon.getInstance();
console.log(singleTon1 === singleTon2); // true
// 类似的库使用单例模式的有: vue.use vant中的notify等

3 观察者模式

// 观察者模式:一个对象可能有一个或多个观察者,当对象状态发生变化时,会通知所有观察者(执行对应的回调)
// 最典型的例子是DOM事件 如下就是一个简单的观察者模式
const button = document.getElementById('button');
button.addEventListener('click', function(){console.log('click');
})
// 可以有多个事件监听器(观察者)
button.addEventListener('click', function(){console.log('click2');
})

4 发布订阅模式

// 发布订阅模式:发布者和订阅者之间没有直接联系,通过第三方来实现调度(事件总线)
// 一般来说有四种行为 $on注册事件 $off清除事件 $emit触发时间 $once仅触发一次
// 现在简单的实现一个发布订阅模式
class MygoEventBus{#handlers = {}$on(event, callback){if(!this.#handlers[event]){this.#handlers[event] = []}this.#handlers[event].push(callback)}$emit(event, ...args){this.#handlers[event] ||  (this.#handlers[event] = [])this.#handlers[event].forEach(callback => {callback(...args)})}$off(event){this.#handlers[event] = undefined}$once(event, callback){this.$on(event, (...args) => {callback(...args)this.$off(event)})}
}// 测试代码
const bus = new MygoEventBus();
bus.$on('click', function(){console.log('click');
})
bus.$on('click', function(){console.log('click2');
})
bus.$emit('click');
bus.$emit('click');
bus.$off('click');
bus.$emit('click');
bus.$once('click', function(){console.log('click3');
})
bus.$emit('click');
bus.$emit('click');
// 输出结果为 click click2 click click2 click3

5 原型模式

// 原型模式:类似于使用object.create()方法创建对象
// 通过原型模式创建对象
const person = {name: 'Tom',age: 18
}const person2 = Object.create(person);
// 再Vue中数组和对象的响应式原理就是通过原型模式实现的

6 代理模式

// 代理模式:代理模式是为一个对象提供一个代用品或占位符,以便控制对它的访问
// 下面举例一个应用场景(类似于DNS查找)就是数据缓存中间件 代码如下:
class AreaData{cache = {}getAreaCode(code){if(!this.cache[code]){// 模拟请求数据console.log('请求数据')this.cache[code] = 'area' + code}return this.cache[code]}
}const areaData = new AreaData();
console.log(areaData.getAreaCode(1));
// 第二次请求数据时,直接返回缓存数据
console.log(areaData.getAreaCode(1));
console.log(areaData.getAreaCode(2));

7 迭代器模式

// 迭代器模式:只要一个对象实现了迭代器协议和next方法,就可以被for...of循环遍历
// 实现迭代器可以使用generator或者手动实现
// [Symbol.iterator]要求返回一个迭代器对象,迭代器对象要求有next方法,next方法返回一个对象,对象有value和done两个属性
const obj = {[Symbol.iterator]: () =>{function* gen(){yield 1;yield 2;yield 3;}return gen();}
}for(let item of obj){console.log(item); // 1 2 3
}// 手动实现迭代器
const obj2 = {data: [1, 2, 3],[Symbol.iterator]: function(){let index = 0;let that = this;return {next(){return {value: that.data[index],done: index++ === that.data.length}}}}
}for(let item of obj2){console.log(item); // 1 2 3
}// 迭代器模式模仿python中的range
function* range(end){for(let i = 0; i < end; i ++){yield i;}
}for(let item of range(10)){console.log(item); // 0 1 2 3 4 5 6 7 8 9
}

相关文章:

js设计模式-工厂模式 单例模式 观察者模式 发布订阅模式 原型模式 代理模式 迭代器模式

1 工厂模式 // 工厂模式: 调用函数返回对象function factory(name, age){return {name: name,age: age} }const person1 factory(Tom, 18); // 类似的库使用工厂函数的有: jQuery, React.createElement,axios.create,vue.createApp等 2 单例模式 // 单例模式&#xff1a;单…...

关于Java中的List<User>如何进行深拷贝

联调中发现了一个很初级&#xff0c;但有容易被忽略的拷贝问题&#xff1a; 错误方式&#xff1a;List<User> us new ArrayList<>(); // name "张三"List<User> us1 new ArrayList<>(us);for (User u : us) {...u.setName("douzi&q…...

2025 年 IT 前景:机遇与挑战并存,人工智能和云计算成重点

云计算de小白 投资人工智能&#xff1a;平衡潜力与实用性 到 2025 年&#xff0c;人工智能将成为 IT 支出的重要驱动力&#xff0c;尤其是在生成式人工智能领域。人工智能的前景在于它有可能彻底改变业务流程、增强决策能力并开辟新的收入来源。然而&#xff0c;现实情况更加微…...

Cortex-A7和Cortex-M7架构处理器取中断向量全流程分析

0 参考资料 Cortex M3权威指南(中文).pdf ARM Cortex-A(armV7)编程手册V4.0.pdf1 Cortex-A7和Cortex-M7处理器架构取中断向量全流程分析 1.1 什么是中断向量&#xff1f; 中断向量就是中断服务函数入口地址&#xff0c;例如我们发生了EXTI0中断&#xff0c;就需要执行EXT0中…...

MODELS 2024震撼续章:科技与可持续性的未来交响曲

MODELS 2024国际会议正如火如荼地进行着&#xff0c;每一天都充满了新的发现与启迪&#xff0c;每一场分享都是对技术前沿的一次深刻探索&#xff0c;更是对现实世界可持续性挑战的一次积极回应。现在让我们继续这场科技盛宴&#xff0c;看看小编为您精选几场的学术分享吧~ 会议…...

CICD 持续集成与持续交付

一 、CICD是什么 CI/CD 是指持续集成&#xff08;Continuous Integration&#xff09;和持续部署&#xff08;Continuous Deployment&#xff09;或持续交付&#xff08;Continuous Delivery&#xff09; 1.1 持续集成&#xff08;Continuous Integration&#xff09; 持续集…...

“数据面”(Data Plane)是指负责实际数据处理和转发的部分

在计算机网络和服务架构中&#xff0c;“数据面”&#xff08;Data Plane&#xff09;是指负责实际数据处理和转发的部分。数据面负责执行具体的网络通信任务&#xff0c;如接收、处理和转发数据包。与数据面对应的是“控制面”&#xff08;Control Plane&#xff09;&#xff…...

面试题:MySQL你用过WITH吗?领免费激活码

感谢Java面试教程的Java多线程文章&#xff0c;点击查看>原文 Java面试教程&#xff0c;发mmm116可获取IDEA-jihuoma 在MySQL中&#xff0c;WITH子句用于定义临时表或视图&#xff0c;也称为公共表表达式&#xff08;CTE&#xff09;。它允许你在一个查询中定义一个临时结果…...

consul 介绍与使用,以及spring boot 项目的集成

目录 前言一、Consul 介绍二、Consul 的使用三、Spring Boot 项目集成 Consul总结前言 提示:这里可以添加本文要记录的大概内容: 例如:随着人工智能的不断发展,机器学习这门技术也越来越重要,很多人都开启了学习机器学习,本文就介绍了机器学习的基础内容。 提示:以下是…...

Linux常用命令shell常用知识 。。。。面试被虐之后,吐血整理。。。。

Linux三剑客&常用命令&shell常识 Linux三剑客grep - print lines matching a patternsed - stream editor for filtering and transforming textawkman awk Linux常用命令dd命令ssh命令tar命令curl命令top命令tr命令xargs命令sort命令du/df/free命令 shell 知识functio…...

压力测试指南-压力测试基础入门

压力测试基础入门 在当今快速迭代的软件开发环境中&#xff0c;确保应用程序在高负载情况下仍能稳定运行变得至关重要。这正是压力测试大显身手的时刻。本文将带领您深入了解压力测试的基础知识&#xff0c;介绍实用工具&#xff0c;并指导您设计、执行压力测试&#xff0c;最…...

Linux:LCD驱动开发

目录 1.不同接口的LCD硬件操作原理 应用工程师眼中看到的LCD 1.1像素的颜色怎么表示 ​编辑 1.2怎么把颜色发给LCD 驱动工程师眼中看到的LCD 统一的LCD硬件模型 8080接口 TFTRGB接口 什么是MIPI Framebuffer驱动程序框架 怎么编写Framebuffer驱动框架 硬件LCD时序分析…...

QT:常用类与组件

1.设计QQ的界面 widget.h #ifndef WIDGET_H #define WIDGET_H#include <QWidget> #include <QPushButton> #include <QLineEdit> #include <QLabel>//自定义类Widget,采用public方式继承QWidget&#xff0c;该类封装了图形化界面的相关操作&#xff…...

企业内训|提示词工程师高阶技术内训-某运营商研发团队

近日&#xff0c;TsingtaoAI为某运营商技术团队交付提示词工程师高级技术培训&#xff0c;本课程为期2天&#xff0c;深入探讨深度学习与大模型技术在提示词生成与优化、客服大模型产品设计等业务场景中的应用。内容涵盖了深度学习前沿理论、大模型技术架构设计与优化、以及如何…...

K8S真正删除pod

假设k8s的某个命名空间如&#xff08;default&#xff09;有一个运行nginx 的pod&#xff0c;而这个pod是以kubectl run pod命令运行的 1.错误示范&#xff1a; kubectl delete pod nginx-2756690723-hllbp 结果显示这个pod 是删除了&#xff0c;但k8s很快自动创建新的pod,但是…...

数据结构:队列及其应用

队列&#xff08;Queue&#xff09;是一种特殊的线性表&#xff0c;它的主要特点是先进先出&#xff08;First In First Out&#xff0c;FIFO&#xff09;。队列只允许在一端&#xff08;队尾&#xff09;进行插入操作&#xff0c;而在另一端&#xff08;队头&#xff09;进行删…...

26个用好AI大模型的提示词技巧

如果你已深入探索过ChatGPT、Microsoft Copilot、风变AI等前沿的生成式AI工具&#xff0c;那么你对“prompt”&#xff08;提示词&#xff09;这一核心概念一定有自己的认知。 作为连接你与AI创意源泉的桥梁&#xff0c;“prompt”不仅是触发无限想象的钥匙&#xff0c;更是塑…...

线性表二——栈stack

第一题 #include<bits/stdc.h> using namespace std; stack<char> s; int n; string ced;//如何匹配 出现的右括号转换成同类型的左括号&#xff0c;方便我们直接和栈顶元素 char cheak(char c){if(c)) return (;if(c]) return [;if(c}) return {;return \0;/…...

浏览器发送请求后关闭,服务器的处理过程

之前在开发中&#xff0c;有些后端服务处理非常慢&#xff0c;页面可能会出现504 Gateway time-out的提示&#xff0c;或者服务器还没返回数据&#xff0c;浏览器就关掉了。我们只是看到了浏览器关掉&#xff0c;但是服务器和客户端的状态都是什么样的呢&#xff1f; 问题 在…...

tee命令:轻松同步输出到屏幕与文件

一、命令简介 ​tee​ 命令在 Linux 和 Unix 系统中用于读取标准输入的数据&#xff0c;并将其同时输出到标准输出和文件中。简单来说&#xff0c;tee​ 命令可以用来分割数据流&#xff0c;使其既能够被输出到屏幕&#xff0c;也能够被写入到文件中。 ​​ ‍ 二、命令参数…...

【大模型RAG】拍照搜题技术架构速览:三层管道、两级检索、兜底大模型

摘要 拍照搜题系统采用“三层管道&#xff08;多模态 OCR → 语义检索 → 答案渲染&#xff09;、两级检索&#xff08;倒排 BM25 向量 HNSW&#xff09;并以大语言模型兜底”的整体框架&#xff1a; 多模态 OCR 层 将题目图片经过超分、去噪、倾斜校正后&#xff0c;分别用…...

【Axure高保真原型】引导弹窗

今天和大家中分享引导弹窗的原型模板&#xff0c;载入页面后&#xff0c;会显示引导弹窗&#xff0c;适用于引导用户使用页面&#xff0c;点击完成后&#xff0c;会显示下一个引导弹窗&#xff0c;直至最后一个引导弹窗完成后进入首页。具体效果可以点击下方视频观看或打开下方…...

基于大模型的 UI 自动化系统

基于大模型的 UI 自动化系统 下面是一个完整的 Python 系统,利用大模型实现智能 UI 自动化,结合计算机视觉和自然语言处理技术,实现"看屏操作"的能力。 系统架构设计 #mermaid-svg-2gn2GRvh5WCP2ktF {font-family:"trebuchet ms",verdana,arial,sans-…...

VB.net复制Ntag213卡写入UID

本示例使用的发卡器&#xff1a;https://item.taobao.com/item.htm?ftt&id615391857885 一、读取旧Ntag卡的UID和数据 Private Sub Button15_Click(sender As Object, e As EventArgs) Handles Button15.Click轻松读卡技术支持:网站:Dim i, j As IntegerDim cardidhex, …...

【Linux】C语言执行shell指令

在C语言中执行Shell指令 在C语言中&#xff0c;有几种方法可以执行Shell指令&#xff1a; 1. 使用system()函数 这是最简单的方法&#xff0c;包含在stdlib.h头文件中&#xff1a; #include <stdlib.h>int main() {system("ls -l"); // 执行ls -l命令retu…...

家政维修平台实战20:权限设计

目录 1 获取工人信息2 搭建工人入口3 权限判断总结 目前我们已经搭建好了基础的用户体系&#xff0c;主要是分成几个表&#xff0c;用户表我们是记录用户的基础信息&#xff0c;包括手机、昵称、头像。而工人和员工各有各的表。那么就有一个问题&#xff0c;不同的角色&#xf…...

MVC 数据库

MVC 数据库 引言 在软件开发领域,Model-View-Controller(MVC)是一种流行的软件架构模式,它将应用程序分为三个核心组件:模型(Model)、视图(View)和控制器(Controller)。这种模式有助于提高代码的可维护性和可扩展性。本文将深入探讨MVC架构与数据库之间的关系,以…...

高危文件识别的常用算法:原理、应用与企业场景

高危文件识别的常用算法&#xff1a;原理、应用与企业场景 高危文件识别旨在检测可能导致安全威胁的文件&#xff0c;如包含恶意代码、敏感数据或欺诈内容的文档&#xff0c;在企业协同办公环境中&#xff08;如Teams、Google Workspace&#xff09;尤为重要。结合大模型技术&…...

Module Federation 和 Native Federation 的比较

前言 Module Federation 是 Webpack 5 引入的微前端架构方案&#xff0c;允许不同独立构建的应用在运行时动态共享模块。 Native Federation 是 Angular 官方基于 Module Federation 理念实现的专为 Angular 优化的微前端方案。 概念解析 Module Federation (模块联邦) Modul…...

论文解读:交大港大上海AI Lab开源论文 | 宇树机器人多姿态起立控制强化学习框架(一)

宇树机器人多姿态起立控制强化学习框架论文解析 论文解读&#xff1a;交大&港大&上海AI Lab开源论文 | 宇树机器人多姿态起立控制强化学习框架&#xff08;一&#xff09; 论文解读&#xff1a;交大&港大&上海AI Lab开源论文 | 宇树机器人多姿态起立控制强化…...