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

面试之《前端常见的设计模式》

news 来源：原创 2025/8/19 3:48:26

前端开发中运用多种设计模式可以提高代码的可维护性、可扩展性和可复用性。以下是一些常见的前端设计模式：

创建型模式

1. 单例模式

定义：确保一个类只有一个实例，并提供一个全局访问点。
应用场景：在前端中，像全局状态管理对象、数据库连接对象等通常使用单例模式。例如，在 React 项目中使用 Redux 管理全局状态，Redux 的 store 就是一个单例，整个应用只有一个 store 实例。
示例代码（JavaScript）：

class Singleton {constructor() {if (!Singleton.instance) {this.data = [];Singleton.instance = this;}return Singleton.instance;}addItem(item) {this.data.push(item);}getData() {return this.data;}
}
const singleton1 = new Singleton();
const singleton2 = new Singleton();
console.log(singleton1 === singleton2); // true

2. 工厂模式

定义：定义一个创建对象的接口，让子类决定实例化哪个类。
应用场景：当创建对象的逻辑比较复杂时，使用工厂模式可以将对象的创建和使用分离。例如，在创建不同类型的弹窗组件时，可以使用工厂模式根据不同的参数创建不同样式和功能的弹窗。
示例代码（JavaScript）：

class Button {constructor(text) {this.text = text;}render() {return `<button>${this.text}</button>`;}
}class Link {constructor(text, url) {this.text = text;this.url = url;}render() {return `<a href="${this.url}">${this.text}</a>`;}
}class ElementFactory {createElement(type, ...args) {if (type === 'button') {return new Button(...args);} else if (type === 'link') {return new Link(...args);}return null;}
}const factory = new ElementFactory();
const button = factory.createElement('button', 'Click me');
const link = factory.createElement('link', 'Google', 'https://www.google.com');
console.log(button.render());
console.log(link.render());

结构型模式

1. 装饰器模式

定义：动态地给一个对象添加一些额外的职责。
应用场景：在前端中，常用于给组件添加额外的功能，如添加样式、事件处理等。例如，在 React 中可以使用高阶组件（HOC）来实现装饰器模式，给组件添加日志记录、权限验证等功能。
示例代码（JavaScript）：

function logDecorator(component) {return class extends React.Component {componentDidMount() {console.log('Component mounted');}render() {return <component {...this.props} />;}};
}class MyComponent extends React.Component {render() {return <div>My Component</div>;}
}const DecoratedComponent = logDecorator(MyComponent);

2. 代理模式

定义：为其他对象提供一种代理以控制对这个对象的访问。
应用场景：在前端中，常用于处理图片懒加载、数据缓存等。例如，使用代理对象来控制对图片资源的访问，当图片进入可视区域时再加载真实的图片资源。
示例代码（JavaScript）：

class Image {constructor(src) {this.src = src;this.loadImage();}loadImage() {console.log(`Loading image from ${this.src}`);}display() {console.log(`Displaying image from ${this.src}`);}
}class ProxyImage {constructor(src) {this.src = src;this.realImage = null;}display() {if (!this.realImage) {this.realImage = new Image(this.src);}this.realImage.display();}
}const proxy = new ProxyImage('https://example.com/image.jpg');
proxy.display();

行为型模式

1. 观察者模式

定义：定义对象间的一种一对多的依赖关系，当一个对象的状态发生改变时，所有依赖它的对象都会得到通知并自动更新。
应用场景：在前端中，常用于实现事件系统、状态管理等。例如，在 Vue.js 中，响应式原理就是基于观察者模式实现的，当数据发生变化时，会自动更新与之绑定的 DOM 元素。
示例代码（JavaScript）：

class EventEmitter {constructor() {this.events = {};}on(eventName, callback) {if (!this.events[eventName]) {this.events[eventName] = [];}this.events[eventName].push(callback);}emit(eventName, ...args) {if (this.events[eventName]) {this.events[eventName].forEach(callback => callback(...args));}}off(eventName, callback) {if (this.events[eventName]) {this.events[eventName] = this.events[eventName].filter(cb => cb!== callback);}}
}const emitter = new EventEmitter();
const callback = (message) => {console.log(`Received message: ${message}`);
};
emitter.on('message', callback);
emitter.emit('message', 'Hello, world!');
emitter.off('message', callback);
emitter.emit('message', 'This message won\'t be received.');

2. 状态模式

定义：允许一个对象在其内部状态改变时改变它的行为，对象看起来似乎修改了它的类。
应用场景：在前端中，常用于实现组件的不同状态切换，如按钮的不同状态（正常、禁用、加载中）。
示例代码（JavaScript）：

class ButtonState {constructor(button) {this.button = button;}click() {}render() {}
}class NormalState extends ButtonState {click() {console.log('Button clicked');}render() {return '<button>Normal</button>';}
}class DisabledState extends ButtonState {click() {console.log('Button is disabled');}render() {return '<button disabled>Disabled</button>';}
}class Button {constructor() {this.state = new NormalState(this);}setState(state) {this.state = state;}click() {this.state.click();}render() {return this.state.render();}
}const button = new Button();
button.click();
button.setState(new DisabledState(button));
button.click();

以上只是前端开发中常见的一些设计模式，实际应用中可以根据具体需求选择合适的设计模式来优化代码。

面试之《前端常见的设计模式》

前端开发中运用多种设计模式可以提高代码的可维护性、可扩展性和可复用性。以下是一些常见的前端设计模式： 创建型模式 1. 单例模式定义：确保一个类只有一个实例，并提供一个全局访问点。应用场景：在前端中，像全局状…...

编程日记 2025/8/19 3:48:26

PostgreSQL异常：An IO error occurred while sending to the backend

在使用PostgreSQL数据库批量写入数据的时候，遇到了一个问题，异常内容如下： Cause: org.postgresql.util.PSQLException: An I/O error occurred while sending to the backend.报错内容报错提示1 Caused by: org.postgresql.util.PSQLExc…...

编程日记 2025/8/19 3:45:35

嵌入式八股C语言---面向对象篇

面向对象与面向过程面向过程就是把整个业务逻辑分成多个步骤,每步或每一个功能都可以使用一个函数来实现面向对象对象是类的实例化,此时一个类就内部有属性和相应的方法封装在C语言里实现封装就是实现一个结构体,里面包括的成员变量和函数指针,然后在构造函数中,为结构体…...

编程日记 2025/8/19 3:44:00

一周学会Flask3 Python Web开发-使用SQLAlchemy动态创建数据库表

锋哥原创的Flask3 Python Web开发 Flask3视频教程： 2025版 Flask3 Python web开发视频教程(无废话版) 玩命更新中~_哔哩哔哩_bilibili 前面我们定义了模型，我们可以通过sqlalchemy对象提供的create_all()方法来映射和动态创建数据库表。因为我们用到…...

编程日记 2025/8/19 3:43:09

【spring】springAOP

1.基本概念 AOP即面向切面编程，它利用的是一种横切技术，解剖开封装的对象内部，并将那些影响多个类的公共行为封装到一个可重用模块，这就是所谓的Aspect方面/切面。所谓的切面，简单点所说，就是将哪些与业务…...

编程日记 2025/8/19 3:47:39

解决VMware虚拟机CentOS 7 忘记登陆密码问题

1. 重启虚拟机，在重启时不停按E键进入初始化脚本编辑界面 2.在初始化脚本编辑界面，按↓键向下拉到最后，找到LANG/zh_CN.UTF-8那里，输入空格，接着添加 "init/bin/sh" 。然后按ctrlX键进入下一步。 3. 在界面中…...

编程日记 2025/8/19 3:44:55

如何在 Windows 10 启用卓越性能模式及不同电源计划对比

在使用 powercfg -duplicatescheme 命令启用 “卓越性能模式”（即 Ultimate Performance 模式）之前，有几个前提条件需要注意： 前提条件： 系统版本要求：卓越性能模式仅在 Windows 10 专业版或更高版本&a…...

编程日记 2025/8/19 3:42:27

基于 GEE 利用 Sentinel-2 数据反演叶绿素与冠层水分含量

目录 1 数据加载与预处理 2 叶绿素含量反演 3 冠层水分反演 4 数据可视化与导出 5 完整代码 6 运行结果在生态学和环境科学领域，植被的健康状况是评估生态系统稳定性和功能的关键指标之一。而叶绿素含量和冠层水分含量作为反映植被生理状态的重要参数&#x…...

编程日记 2025/8/19 3:44:00

《鸿蒙系统下AI模型训练加速：时间成本的深度剖析与优化策略》

在当今数字化浪潮中，鸿蒙系统凭借其独特的分布式架构与强大的生态潜力，为人工智能的发展注入了新的活力。随着AI应用在鸿蒙系统上的日益普及，如何有效降低模型训练的时间成本，成为了开发者与研究者们亟待攻克的关键课题。这不仅关…...

编程日记 2025/8/17 18:34:39

PyTorch分布式训练

本文结构： 分布式训练概述环境设置数据并行（DDP）模型并行启动训练性能优化建议示例代码参考资料和相关问题以下是为您整理的PyTorch分布式训练教程指南： 一、PyTorch分布式训练核心概念数据并行：通过分割数据集实…...

编程日记 2025/8/19 3:43:09

ubuntu22.04 关于挂在设备为nfts文件格式无法创建软连接的问题

最近遇到情况，解压工程报错，无法创建软连接但是盘内还有130G空间，明显不是空间问题，查找之后发现是移动硬盘的文件格式是NTFS，在ubuntu上不好兼容，于是报错。开贴记录解决方案。 1.确定文件格式使用命…...

编程日记 2025/8/19 3:47:40

C++编程：进阶阶段—4.2对象

目录 4.2 对象特征 4.2.1 构造函数和析构函数 4.2.2 构造函数的分类 4.2.3 拷贝函数调用时机 4.2.4 构造函数调用规则 4.2.5 深拷贝与浅拷贝 4.2.6 初始化列表 4.2.7 类对象作为类成员 4.2.8 静态成员 4.2.9 成员变量和成员函数的存储 4.2.10 this指针 4.2.11 空指针…...

编程日记 2025/8/19 3:44:56

C++跨平台开发环境搭建全指南：工具链选型与性能优化实战

C跨平台开发环境搭建全指南：工具链选型与性能优化实战目录开发环境搭建工具链选型性能优化实战常见问题排查开发环境搭建操作系统环境准备 Windows# 安装Visual Studio Build Tools choco install visualstudio2022buildtools choco install cmake --instal…...

编程日记 2025/8/19 3:43:59

常见JVM命令

1. java -XX:PrintCommandLineFlags HelloGC 作用：打印 JVM 启动时的命令行参数，包括用户显式设置的参数和 JVM 自动默认设置的参数。用于确认 JVM 实际使用的配置。 2. java -Xmn10M -Xms40M -Xmx60M -XX:PrintCommandLineFlags -XX:PrintGC -XX:Prin…...

编程日记 2025/8/19 3:47:41

C语言实现队列数据结构：思路与代码详解

目录一、引言二、整体思路三、代码模块分析 （一）头文件包含与宏定义 （二）数据类型定义 （三）队列操作函数 1. 队列初始化 2. 队列销毁 3. 入队操作 4. 出队操作 5. 获取队头元素 6…...

编程日记 2025/8/19 1:27:22

【Docker项目实战】使用Docker与Caddy部署BanBan任务管理工具

【Docker项目实战】使用Docker部署BanBan任务管理工具一、BanBan介绍1.1 BanBan简介1.2 主要特点1.3 使用场景二、本次实践规划2.1 本地环境规划2.2 本次实践介绍三、本地环境检查3.1 检查Docker服务状态3.2 检查Docker版本3.3 检查docker compose 版本四、下载BanBan镜像五、…...

编程日记 2025/8/19 3:47:40

AI重构私域增长：从流量收割到终身价值运营的三阶跃迁

私域运营的AI进化论：内容即服务的三个阶段随着企业微信生态的成熟，私域运营正经历从"流量收割"到"关系养成"的本质转变。在AIGC技术的推动下，2024年私域场景正式进入**"内容即服务"**的价值共创期&#xff1…...

编程日记 2025/8/18 19:41:44

es扩容节点以后写入数据量增加1倍

背景： es扩容一倍的数据节点以后写入数据量增加1倍业务反馈业务访问量没增加。最后定位是监控数据： PUT _cluster/settings {"persistent": {"xpack.monitoring.collection.enabled" : "false"} }这个索引记录的是节…...

编程日记 2025/8/19 3:44:02

Go本地缓存设计与实现

本地缓存是一个项目中很常见的组件。在很多人的眼中就是一个简单的key-value的map存储即可实现，但实际上，设计一个本地缓存需要考虑的问题远比你想象的多，比如说，本地缓存是将数据存储在内存，若数据量激增突破了内存限…...

编程日记 2025/8/19 3:44:55

04 | 初始化 fastgo 项目仓库

提示： 所有体系课见专栏：Go 项目开发极速入门实战课；欢迎加入云原生 AI 实战星球，12 高质量体系课、20 高质量实战项目助你在 AI 时代建立技术竞争力（聚焦于 Go、云原生、AI Infra）；本节课最终…...

编程日记 2025/8/19 3:42:29

Spring中复杂对象的创建方式：FactoryBean、实例工厂与静态工厂全解析

1.反转控制与依赖注入控制：对于成员变量赋值的控制权反转控制：把对于成员变量赋值的控制权，从代码中反转(转移)到Spring工厂和配置文件中完成好处：解耦合底层实现：工厂设计模式依赖注入： 注入&#xf…...

编程日记 2025/8/19 0:02:45

异或和之和第十四届蓝桥杯大赛软件赛省赛C/C++ 大学 A 组

异或和之和题目来源第十四届蓝桥杯大赛软件赛省赛C/C++ 大学 A 组原题链接蓝桥杯异或和之和 https://www.lanqiao.cn/problems/3507/learning/ 问题描述问题分析要点1：异或运算概念异或（Exclusive OR，简称 XOR）是一种数学运算符，常用于逻辑运算与计算机…...

编程日记 2025/8/19 3:44:01

设计模式一、软件设计原则

一、理解设计原则 1、单一原则 1.1 如何理解单一职责原则（SRP） 单一职责原则（Single Responsibility Principle，简称SRP）,他要求一个类或模块应该只负责一个特定的功能，这有助于降低类之间的耦合度&#xf…...

编程日记 2025/8/19 3:43:08

修复Electron项目Insecure Content-Security-Policy（内容安全策略CSP）警告的问题

将以下代码粘贴进html的<header>标签内 <metahttp-equiv"Content-Security-Policy"content"default-src self; style-src self unsafe-inline; img-src self data:; "> 解释一下上面代码中的属性含义 default-src self：配置加载策…...

编程日记 2025/8/19 3:46:46

机器人交互系统部署构建

环境要求 Ubuntu 20.04 或更高版本ROS Noetic 或兼容版本Python 3.8 安装步骤 1. 安装ROS环境（如未安装） sudo apt update sudo apt install ros-noetic-desktop-full source /opt/ros/noetic/setup.bash2. 创建工作空间并克隆代码 mkdir -p ~/code…...

编程日记 2025/8/19 3:45:36

当AI回答问题时，它的“大脑”里在炒什么菜？

文章目录 1. 拆解订单：AI如何听懂你的“暗号”？2. 调用工具：AI的“万能工具箱”里有什么？3. 知识不够？去“图书馆”现学现卖！4. 人类的秘密武器：给AI戴上“镣铐”5. 为什么AI会“胡言乱语”&…...

编程日记 2025/8/18 23:46:18

linux 软件扩展GPU显存

概述共享内存可以通过 Unified Memory（统一内存）来实现，它允许 CPU 和 GPU 共享相同的内存地址空间，从而方便数据的传输和访问。利用该技术可解决家用GPU 机器学习时显存不足的问题 （注： 虽然解决了爆显…...

编程日记 2025/8/19 3:45:35

【RabbitMQ】Spring Boot 结合 RabbitMQ 完成应用间的通信

🔥个人主页： 中草药 🔥专栏：【中间件】企业级中间件剖析 Spring 框架与 RabbitMQ 的整合主要通过 Spring AMQP（Advanced Message Queuing Protocol）模块实现，提供了便捷的消息队列开发能力。引…...

编程日记 2025/8/19 3:44:01

DeepSeek本地化部署（DeepSeek+olloma+Dify）

文章目录概要需要准备的工具Ollama准备内容Docker准备内容Dify准备内容本地访问Dify 概要提示：本篇文章主要讲述如何部署本地Deepseek私有大模型，使用Windows无显卡环境进行部署需要准备的工具 Ollama、Docker Desktop 下载地址： Ollama…...

编程日记 2025/8/18 19:26:05

Spring boot3-WebClient远程调用非阻塞、响应式HTTP客户端

来吧，会用就行具体理论不讨论 1、首先pom.xml引入webflux依赖 <dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-webflux</artifactId> </dependency> 别问为什么因为是响应式....…...

编程日记 2025/8/19 3:42:28

Ubuntu22.04安装数据

数据库安装步骤： sudo apt-get update sudo apt install mysql-server mysql-client sudo systemctl start mysql sudo systemctl status mysql （1）在命令行登录 MySQL 数据库，并使用 mysql 数据库 （必须使用这个…...

编程日记 2025/8/19 3:46:45

【python-uiautomator2】手机上的ATX应用界面报错问题处理：无法提供服务，非am instrument启动

目录一、前期准备 1.1 插入设备 1.2 安装atx-agent 二、解决报错：无法提供服务，非am instrument启动 2.1 出现报错 2.2 尝试解决 2.3 最终解决三、开启ATX的悬浮窗权限一、前期准备 1.1 插入设备本地插入待执行设备，待执行设备…...

编程日记 2025/8/19 3:46:45

自动化测试介绍及学习路线

目录一、自动化测试 1.1 自动化测试的概念 1.2 自动化测试的主流领域接口自动化测试 UI自动化测试持续集成二、学习路线一、自动化测试 1.1 自动化测试的概念自动化测试是指利用软件工具或脚本来执行测试用例和比较实际结果与预期结果的过程，通过运行…...

编程日记 2025/8/19 3:45:34

Python：函数（一）

python函数相关的知识点 1. 函数定义与调用定义：使用 def 关键字，后接函数名和参数列表。 def greet(name):"""打印问候语（文档字符串）"""print(f"Hello, {name}!") 调用&#xff1a…...

编程日记 2025/8/19 3:44:57

qml c++混合编程注意事项

在Qml和C类进行数据交互时，通用的办法都是注册C到Qml中，但是很多时候C的对象是在C中进行创建，如果在Qml中创建了，数据之间的交互就会出现无法控制的问题。信号与槽、上下文等都是数据交互的方式，但是当嵌套多层时&…...

编程日记 2025/8/18 6:39:44

Leetcode6-Z字形变换

题目链接：6. Z 字形变换 - 力扣（LeetCode） 思路： 定义numRows个字符数组，用于存每一行的字符；再定义一个标志行数的变量cnt，cnt在0到numRows-1之间不停的加一或减一（当cnt到0了&am…...

编程日记 2025/8/19 3:45:36

【eNSP实战】配置交换机端口安全

拓扑图目的：让交换机端口与主机mac绑定，防止私接主机。主机PC配置不展示，按照图中配置即可。开始配置之前，使用PC1 ping 一遍PC2、PC3、PC4、PC5，让交换机mac地址表刷新一下记录。 LSW1查看mac地址表 LSW1配置端…...

编程日记 2025/8/19 3:46:46

React.js 基础与进阶教程

React.js 基础与进阶教程 React.js 是由 Facebook 开发的流行前端 JavaScript 库，专为构建用户界面（UI）设计，尤其适用于单页面应用（SPA）。它采用组件化开发模式，使 UI 结构更加清晰、可维护性更…...

编程日记 2025/8/19 3:40:10

Docker基础入门（一）

初识Docker 什么是Docker Docker是一个快速交付应用、运行应用的技术： 可以将程序及其依赖、运行环境一起打包为一个镜像，可以迁移到任意Linux操作系统运行时利用沙箱机制形成隔离容器，各个应用互不干扰启动、移除都可以通过一行命令完成&…...

编程日记 2025/8/16 12:31:21

moment.js时间处理库

目录一、moment().isValid()验证时间是否有效二、moment().second()获取秒数或者设置秒数三、moment().day()获取星期或者设置星期四、moment().add()加法操作五、moment().subtract()减法操作六、moment.max()最大值七、moment.min()最小值八、克隆时间一、mo…...

编程日记 2025/8/17 19:25:43

基于hive的电信离线用户的行为分析系统

标题:基于hive的电信离线用户的行为分析系统内容:1.摘要随着电信行业的快速发展，用户行为数据呈现出海量、复杂的特点。为了深入了解用户行为模式，提升电信服务质量和精准营销能力，本研究旨在构建基于 Hive 的电信离线用户行为分析系统。通…...

编程日记 2025/8/16 5:25:14

循环神经网络（RNN）：时序建模的核心引擎与演进之路

在人工智能处理序列数据的战场上，循环神经网络（RNN）如同一个能够理解时间的智者。从 2015 年谷歌神经机器翻译系统颠覆传统方法，到 2023 年 ChatGPT 实现对话连续性，这些突破都植根于 RNN 对时序建模的深刻理解。本文将…...

编程日记 2025/8/18 17:57:04

我们在上篇文章中已经修改了daemon.json 安装镜像时如果search超时就直接pull 安装mysql docker pull mysql:5.7 启动命令 docker run --name mysql-docker -p 3306:3306 -e MYSQL_ROOT_PASSWORDroot1234 -d mysql:5.7 ocker run：运行docker容器命令 --name my…...

编程日记 2025/8/15 20:21:28

大数据学习（63）- Zookeeper详解

&&大数据学习&& 🔥系列专栏： 👑哲学语录: 用力所能及，改变世界。 💖如果觉得博主的文章还不错的话，请点赞👍收藏⭐️留言📝支持一下博主哦🤞 &#x1f…...

编程日记 2025/8/15 16:21:01

安卓Compose中accompanist库使用详解

安卓Compose中accompanist库使用详解文章目录安卓Compose中accompanist库使用详解一、Accompanist 库概览二、核心组件详解三、总结与建议本文首发地址 https://h89.cn/archives/348.html 最新更新地址 https://gitee.com/chenjim/chenjimblog 一、Accompanist 库概览 Acco…...

编程日记 2025/8/16 9:48:20