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

在前端开发中用到了哪些设计模式？

news 2026/3/30 1:46:09

在前端开发中用到了哪些设计模式？

  • 1.单例模式
  • 2.观察者模式
  • 3.工厂模式
  • 4.适配器模式
  • 5.装饰器模式
  • 6.命令模式
  • 7.迭代器模式
  • 8.组合模式
  • 9.策略模式
  • 10.发布订阅模式

1.单例模式

确保一个类只有一个实例，提供一个全局访问点，vue就是一个单例模式，在前端开发中，常用于管理全局状态、共享资源或创建唯一的对象实例

2.观察者模式

双向数据绑定的原理就是观察者模式

3.工厂模式

定义一个用于创建对象的接口，由子类决定实例化哪个类，在前端开发中常用于根据不同的条件或配置创建不同类型的对象，例如组件工厂、路由工厂

4.适配器模式

将一个类的接口转换为客户希望的另一个接口，在前端开发中，常用于解决不同组件库的接口不兼容的问题，或对外部数据进行格式转换

5.装饰器模式

动态地给对象添加额外的职责，同时又不改变其原有的结构，在前端开发中常用于给组件或函数添加额外的功能，例如日志记录、性能检测等

6.命令模式

将一个请求封装为一个对象，从而使得你可以用不同的请求对客户进行参数化，在前端开发中，常用于实现可撤销的操作、异步请求的管理等

7.迭代器模式

遍历数组、集合或异步数据流

8.组合模式

将对象组合成树形结构以表示“部分-整体”的层次结构，使得用户对单个对象和组合对象的使用具有一致性，在前端开发中常用于构建复杂的组件结构、树形导航等

9.策略模式

定义一系列的算法，将每个算法封装起来，并使他们可以互相转换，在前端开发中常用于根据不同的策略处理相同类型的数据或事件，例如表单验证、排序算法等

10.发布订阅模式

组件间的通信

相关文章：

在前端开发中用到了哪些设计模式？

在前端开发中用到了哪些设计模式？ 1.单例模式2.观察者模式3.工厂模式4.适配器模式5.装饰器模式6.命令模式7.迭代器模式8.组合模式9.策略模式10.发布订阅模式 1.单例模式 确保一个类只有一个实例，提供一个全局访问点，vue就是一个单例模式&…...

编程日记 2024/4/14 20:12:58

ES6 的解构赋值

解构赋值（Destructuring assignment）是一种方便快捷的方式，可以从对象或数组中提取数据，并将数据赋值给变量。解构赋值是ES6中一项强大且常用的特性. 1. 基本数组解构 首先，让我们看看如何对数组进行解构赋值。假设我…...

编程日记 2024/4/14 20:11:57

蓝桥杯物联网竞赛_STM32L071KBU6_全部工程及国赛省赛真题及代码

包含stm32L071kbu6全部实验工程、源码、原理图、官方提供参考代码及国、省赛真题及代码 链接：https://pan.baidu.com/s/1pXnsMHE0t4RLCeluFhFpAg?pwdq497 提取码：q497...

编程日记 2024/4/14 20:10:56

关于UCG游戏平台的一些思考

UCG游戏平台，全称User Generated Content，即用户生成内容。它涵盖了所有玩家可以自主编辑的部分，包含并不限于换装、捏脸、关卡摆放等内容。 UCG概念在最近又火了起来，但这个模式出现的并不早。早在10多年前，war3编辑器…...

编程日记 2024/4/14 20:09:54

一起学习python——基础篇（20）

前言，之前经常从网上找一些免费的接口来测试，有点受制于人的感觉。想了想还不如直接写一个接口，这样方便自己测试。自己想返回什么格式就返回什么样子，不用担心服务报错，因为自己就可以完全掌控。然后宿舍二哥告诉我py…...

编程日记 2024/4/14 20:05:50

云服务器安装Mysql、MariaDB、Redis、tomcat

前置工作 进入根目录 cd / 创建java文件夹 mkdir java 进入java文件夹 cd java 上传压缩包 rz 压缩包 Mysql 1.下载并安装MySQL官方的 Yum Repository wget http://dev.mysql.com/get/mysql-community-release-el7-5.noarch.rpm rpm -ivh mysql-community-release-el7-5.noa…...

编程日记 2024/4/14 20:01:47

Android笔记--MediaCodec(二)

这一节主要了解MediaCodec处理音频，MediaCodec直译媒体解码器，用于访问媒体编解码器，即编码器/解码器组件，它是 Android 多媒体支持基础设施的一部分；从广义上讲，编解码器处理输入数据以生成输出数据。它异…...

编程日记 2024/4/14 19:59:45

【Java探索之旅】方法重载 递归

🎥 屿小夏 ： 个人主页 🔥个人专栏 ： Java编程秘籍 🌄 莫道桑榆晚，为霞尚满天！ 文章目录 📑前言一、方法重载1.1 为什么要有方法重载1.2 方法重载的概念与使用1.3 方法签名 二、递归2…...

编程日记 2024/4/14 19:54:40

多输入多输出 | Matlab实现XGboost多输入多输出预测

多输入多输出 | Matlab实现XGboost多输入多输出预测 目录 多输入多输出 | Matlab实现XGboost多输入多输出预测预测效果基本介绍程序设计往期精彩参考资料 预测效果 基本介绍 Matlab实现XGboost多输入多输出预测 1.data为数据集，10个输入特征，3个输出变量…...

编程日记 2024/4/14 19:49:35

【设计模式】3、builder 建造者模式

文章目录 三、builder 模式（生成器）3.1 build 房屋3.1.1 builder.go3.1.2 director.go3.1.3 director_test.go3.1.4 house.go3.1.5 igloo_builder.go3.1.6 normal_builder.go3.1.7 测试 3.2 option3.2.1 pool_test.go3.3.2 pool.go3.3.3 option.go 3.3 自…...

编程日记 2024/4/14 19:48:34

使用ROCm的HIP API向量加法程序

一、向量加法程序 Radeon Open Compute (ROCm) 是一个开源平台，用于加速高性能计算 (HPC) 和机器学习应用程序。它支持包括GPUs在内的多种硬件，并提供HIP (Heterogeneous-compute Interface for Portability) 作为CUDA代码的便捷转换工具。为了提供一个…...

编程日记 2024/4/14 19:47:33

Vue3---基础7（Props）

props&#xff0c;用于给子组件传递父组件的值的方法 代码示例&#xff1a; 父组件 <template><Text1 :list"personList"/> </template><script lang"ts" setup namae"App">import Text1 from ./components/text2.vu…...

编程日记 2024/4/14 19:46:32

第一节：什么是操作系统

什么是操作系统 一、一台计算机的组成部分1、计算机能干啥2、谈谈计算机硬件 二、什么是操作系统三、学习操作系统的层次 一、一台计算机的组成部分 如下图所示&#xff1a; 这就是就是构成一台计算机的组成部分 1、计算机能干啥 ∙ \bullet ∙计算机是我们专业吃饭的家伙&a…...

编程日记 2024/4/14 19:45:31

Day:007（1） | Python爬虫：高效数据抓取的编程技术（scrapy框架使用）

Scrapy的介绍 Scrapy 是一个用于抓取网站和提取结构化数据的应用程序框架&#xff0c;可用于各种有用的应用程序&#xff0c;如数据挖掘、信息处理或历史存档。 尽管 Scrapy 最初是为网络抓取而设计的&#xff0c;但它也可用于使用API提取数据或用作通用网络爬虫。 Scrapy的优势…...

编程日记 2024/4/14 19:44:30

Echarts使用dataTool写可自定义横坐标的盒须图（箱线图）

在vue2中的完整盒须图组件代码 可自适应浏览器窗体变化&#xff0c;可自定义横坐标&#xff0c;无需写箱线图数据处理逻辑。dataTool是echarts自带的&#xff0c;无需额外安装&#xff0c;只要引入。 <template><span><div ref"BoxPlotChart" id&qu…...

编程日记 2024/4/14 19:43:29

SpringBoot编写一个SpringTask定时任务的方法

1&#xff0c;在启动类上添加注解 EnableScheduling//开启定时任务调度 2&#xff0c; 任务&#xff08;方法&#xff09;上也要添加注解&#xff1a; Scheduled(cron " 0 * * * * ? ") //每分钟执行一次 域&#xff1a; 秒 分 时 日 月 周 &#xff08;年&#…...

编程日记 2024/4/14 19:41:26

【Qt编译】ARM环境 Qt5.14.2-QtWebEngine库编译 （完整版）

ARM 编译Qt5.14.2源码 1.下载源码 下载Qt5.14.2源代码&#xff08;可根据自己的需求下载不同版本&#xff09; 下载网站&#xff1a;https://download.qt.io/new_archive/qt/5.14/5.14.2/single/ 2.相关依赖(如果需要的话) 先参考官方文档的需求进行安装&#xff1a; 官方…...

编程日记 2024/4/14 19:40:25

vue简单使用二（循环）

目录 属性绑定 if判断&#xff1a; for循环&#xff1a; 属性绑定 代码的形式来说明 三元表达式的写法&#xff1a; if判断&#xff1a; for循环&#xff1a; 完整代码&#xff1a; <!DOCTYPE html> <html lang"en"> <head><meta charset"…...

编程日记 2024/4/14 19:39:23

JavaScript入门--变量

JavaScript入门--变量 一、JS变量二、变量命名三、常量四、局部变量 一、JS变量 定义变量a, b, c&#xff0c;并输出到控制台。 var a 1; var b 13.14; var c hello Js;console.log(a, b, c) //console.log()语句用于输出结果到控制台&#xff0c;类似python的print语句…...

编程日记 2024/4/14 19:37:20

给自己的机器人部件安装单目摄像头并实现gazebo仿真功能

手术执行器添加摄像头 手术执行器文件夹surgical_new内容展示如何添加单目摄像头下载现成的机器人环境文件启动仿真环境 手术执行器文件夹surgical_new内容展示 进入src文件夹下选择进入vision_obliquity文件夹 选择launch 有两个可用gazebo中rviz展示的launch文件&#xff0…...

编程日记 2024/4/14 19:36:19

虚拟机自动化新范式：CUA Computer SDK十分钟入门指南

虚拟机自动化新范式&#xff1a;CUA Computer SDK十分钟入门指南 【免费下载链接】cua Create and run high-performance macOS and Linux VMs on Apple Silicon, with built-in support for AI agents. 项目地址: https://gitcode.com/GitHub_Trending/cua/cua 在当今的…...

编程新知 2026/3/30 1:40:17

如何用AI在3分钟内自动生成专业视频：告别复杂剪辑的全新解决方案

如何用AI在3分钟内自动生成专业视频&#xff1a;告别复杂剪辑的全新解决方案 【免费下载链接】auto-video-generateor 自动视频生成器&#xff0c;给定主题&#xff0c;自动生成解说视频。用户输入主题文字&#xff0c;系统调用大语言模型生成故事或解说的文字&#xff0c;然后…...

编程新知 2026/3/30 1:01:47

CentOS7下StarRocks 3.1.13集群部署实战：三节点FE高可用配置详解

CentOS7下StarRocks 3.1.13集群部署实战&#xff1a;三节点FE高可用配置详解 在当今数据驱动的商业环境中&#xff0c;企业级分析型数据库的可靠性和性能至关重要。StarRocks作为新一代MPP分析数据库&#xff0c;凭借其卓越的实时分析能力和高并发查询性能&#xff0c;正逐渐成…...

编程新知 2026/3/29 23:39:18

新手避坑指南：安捷伦/是德示波器探头选1MΩ还是50Ω？实测对比告诉你差别有多大

示波器探头阻抗选择实战手册&#xff1a;1MΩ与50Ω的黄金法则 第一次接触示波器时&#xff0c;我犯了个低级错误——用1MΩ探头直接测量射频电路&#xff0c;结果不仅波形畸变成锯齿状&#xff0c;还差点烧毁前端放大器。这个价值3000元的教训让我深刻认识到&#xff1a;探头…...

编程新知 2026/3/29 23:07:08

深度解析Wiki.js操作日志系统：构建企业级安全监控的完整方案

深度解析Wiki.js操作日志系统&#xff1a;构建企业级安全监控的完整方案 【免费下载链接】wiki- Wiki.js | A modern and powerful wiki app built on Node.js 项目地址: https://gitcode.com/GitHub_Trending/wiki78/wiki- 当团队协作编辑Wiki内容时&#xff0c;你是否…...

编程新知 2026/3/29 22:38:52

解密SWAT模型中的土壤水分特性：如何用SPAW快速计算AWC与饱和导水率？

土壤水分特性在SWAT模型中的关键作用与SPAW实战指南 土壤水分参数对水文模拟的影响机制 在分布式水文建模领域&#xff0c;土壤水分特性参数犹如隐藏在水循环方程式中的密码钥匙。这些看似简单的数值背后&#xff0c;实则决定着水分在土壤剖面中的运移轨迹、植物根系的吸水效率…...

编程新知 2026/3/29 22:12:41

PDF-Extract-Kit-1.0教育应用：教材习题自动识别与题库构建

PDF-Extract-Kit-1.0教育应用&#xff1a;教材习题自动识别与题库构建 1. 引言 老师们每天都要面对一大堆教材PDF&#xff0c;里面藏着无数宝贵的习题资源。但手动把这些题目一个个抄出来&#xff0c;整理成电子题库&#xff0c;简直是个噩梦——费时费力还容易出错。有没有什…...

编程新知 2026/3/29 20:42:10

Vivado进阶指南：网表物理约束实战解析

1. 网表物理约束的核心价值 第一次接触Vivado的网表物理约束时&#xff0c;我和很多初学者一样困惑&#xff1a;明明RTL代码已经定义了所有功能&#xff0c;为什么还要多此一举&#xff1f;直到在某次高速ADC数据采集项目中&#xff0c;系统频繁出现时序违例&#xff0c;我才真…...

编程新知 2026/3/29 20:38:09

C# 工业级温度监控软件：支持多PLC通信与实时曲线绘制

前言工业自动化领域&#xff0c;温度监控是保障生产安全与产品质量的核心环节。面对多台设备分散、数据孤岛严重的现状&#xff0c;开发一套高效、可视化的上位机系统显得尤为重要。本文将详细介绍一款基于 WinForms 与 S7.Net 开发的温度监控系统。该系统不仅实现了对多台西门…...

编程新知 2026/3/29 20:30:08

PowerPaint-V1 Gradio 新手入门指南：3步搞定图片修复，小白也能变大神

PowerPaint-V1 Gradio 新手入门指南&#xff1a;3步搞定图片修复&#xff0c;小白也能变大神 1. 为什么选择PowerPaint-V1&#xff1f; 如果你经常需要处理图片中的瑕疵、水印或者想替换某些元素&#xff0c;PowerPaint-V1绝对是你的得力助手。这个由字节跳动与香港大学联合研…...

编程新知 2026/3/29 20:08:01