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

前端常用的【设计模式】和使用场景

设计原则

最重要的:开放封闭原则

  • 对扩展开放
  • 对修改封闭

工厂模式

用一个工厂函数,来创建实例,隐藏 new

如 jQuery 的 $ 函数,React 的 createElement 函数

在这里插入图片描述

单例模式

全局唯一的实例(无法生成第二个)

如 Vuex 和 Redux 的 store,全局唯一的 dialog,modal

在这里插入图片描述

  • JS 是单线程的,创建单例很简单
  • Java 是支持多线程的,创建单例要考虑锁死线程,否则多个线程同时创建,单例就重复了(多线程共享进程内存)

代理模式

使用者不能直接访问对象,而是访问一个代理层,在代理层可以监听 get set 做很多事情

如 ES6 Proxy 实现 Vue3 响应式

var obj = new Proxy({}, {get: function (target, propKey, receiver) {console.log(`getting ${propKey}!`);return Reflect.get(target, propKey, receiver);},set: function (target, propKey, value, receiver) {console.log(`setting ${propKey}!`);return Reflect.set(target, propKey, value, receiver);}
});

观察者模式

在这里插入图片描述

发布订阅模式

自定义事件(组件卸载时记得清除,避免内存泄漏)

在这里插入图片描述

装饰器模式

原功能不变,增加一些新功能(AOP 面向切面编程)

如 ES和Typescript 的 Decorator 语法:类装饰器,方法装饰器

@testable
class MyTestableClass {// ...
}function testable(target) {target.isTestable = true;
}MyTestableClass.isTestable // true

相关文章:

前端常用的【设计模式】和使用场景

设计原则 最重要的:开放封闭原则 对扩展开放对修改封闭 工厂模式 用一个工厂函数,来创建实例,隐藏 new 如 jQuery 的 $ 函数,React 的 createElement 函数 单例模式 全局唯一的实例(无法生成第二个) 如 Vuex 和 Redux 的 store…...

QT下载问题:Download from your IP address is not allowed

问题 Download from your IP address is not allowed 解决 https://download.csdn.net/download/baidu_34971492/89608794...

自建数据库VS云数据库

自建数据库VS云数据库 什么是自建数据库?自建数据库方案自建数据库的优点自建数据库的缺点什么是云数据库?自建数据库的缺点什么是云数据库? 云数据库方案云数据库的优点云数据库的缺点适用场景比较总结 【纪录片】中国数据库前世今生 在数字…...

【大数据开发语言Scala的入门教程】

🎥博主:程序员不想YY啊 💫CSDN优质创作者,CSDN实力新星,CSDN博客专家 🤗点赞🎈收藏⭐再看💫养成习惯 ✨希望本文对您有所裨益,如有不足之处,欢迎在评论区提出指正,让我们共同学习、交流进步! 🪁Scala 🪡Scala是一种功能丰富且具有强大表达能力的静态类型…...

docker部署kkfileview文件在线预览服务

kkfileview文件在线预览服务部署使用 免费开源,功能强大,几乎支持日常见到的所有文件类型在线预览 目前支持的文件类型如下 支持 doc, docx, xls, xlsx, xlsm, ppt, pptx, csv, tsv, dotm, xlt, xltm, dot, dotx,xlam, xla 等 Office 办公文档支持 wp…...

朱锐 | 生命图像中的时间和意识

本文载于《科学・经济・社会》2023 年第 41 卷第 2 期第 37~61 页 作者简介: 朱锐(1968年10月—2024年8月1日),中国人民大学哲学院杰出学者、特聘教授,美国德州州立大学客座教授,主要从事神经哲学、心灵哲…...

pytorch: cpu,cuda,tensorRt 推理对比学习

0:先看结果 针对resnet模型对图片做处理 原图结果 分别使用cpu,cuda,TensorRt做推理,所需要的时间对比 方法时间cpu13s594mscuda711mstensorRt 113ms 项目地址: GitHub - july1992/Pytorch-vily-study: vily 学…...

android 音频播放器,(一)SoundPool音频播放实例

1. Apk内&#xff0c;预定义按键与触发按键&#xff1a; layout 按键定义: <Button android:id"id/start" android:layout_width"match_parent" android:layout_height"wrap_content" android:textAllC…...

AVL解析

本节主要看板书 概念 AVL树&#xff08;Adelson-Velsky and Landis tree&#xff09;是一种自平衡二叉查找树&#xff0c;用于在动态集合中进行高效的插入、删除和查找操作。它保持树的高度接近最小可能值&#xff0c;从而确保这些操作的时间复杂度始终保持在O(log n)。AVL树…...

用C#和WinForms打造你的专属视频播放器:从多格式支持到全屏播放的完整指南

使用 C# 和 WinForms 创建一个功能齐全的视频播放器&#xff0c;支持 MP4 和 AVI 格式&#xff0c;并具有文件夹导入、多视频播放、全屏切换、视频列表管理等功能&#xff0c;是一个相对复杂的项目。下面我会给出一个基本的实现方案&#xff0c;包括所需的关键功能和相关代码示…...

Spring security学习笔记

目录 1. 概要2. spring security原理2.1 DelegatingFilterProxy2.2 FilterChainProxy2.3 SecurityFilterChain2.4 Spring Security 作用机制 3.Spring Security快速入门4.高级自定义配置5. Spring Security 结合 JWT使用 1. 概要 Spring Security是一个用于在Java应用程序中实…...

MySQL:基础增删查改

MySQL&#xff1a;基础增删查改 插入插入冲突 查询distinctwhereorder bylimit 删除deletetruncate 更新 插入 基本插入语法&#xff1a; insert [into] 表名 (列1, 列2 ...) values (值1, 值2 ...);into可以省略(列1, 列2 ...)与后面的(值1, 值2)一一对应如果插入时数据完全…...

Apache DolphinScheduler 1.3.4升级至3.1.2版本过程中的踩坑记录

因为在工作中需要推动Apache DolphinScheduler的升级&#xff0c;经过预研&#xff0c;从1.3.4到3.1.2有的体验了很大的提升&#xff0c;在性能和功能性有了很多的改善&#xff0c;推荐升级。 查看官方的升级文档&#xff0c;可知有提供升级脚本&#xff0c;如果只是跨小版本的…...

最后一块石头的重量(超级妙的背包问题)

1049. 最后一块石头的重量 II 有一堆石头&#xff0c;用整数数组 stones 表示。其中 stones[i] 表示第 i 块石头的重量。 每一回合&#xff0c;从中选出任意两块石头&#xff0c;然后将它们一起粉碎。假设石头的重量分别为 x 和 y&#xff0c;且 x < y。那么粉碎的可能结果…...

如何评估和提升审查者在前端代码审查中的专业技能?

评估和提升审查者在前端代码审查中的专业技能可以通过以下步骤&#xff1a; 技能评估&#xff1a; 定期进行技能评估&#xff0c;了解审查者在前端开发各方面的能力&#xff0c;包括但不限于HTML、CSS、JavaScript、框架使用、代码规范等。 代码审查实践&#xff1a; 通过实…...

C++(区别于C的)基础内容总结

参考&#xff1a; C 教程 | 菜鸟教程 (runoob.com) 简介 C 被认为是一种中级语言&#xff0c;它综合了高级语言和低级语言的特点。 C 是由 Bjarne Stroustrup 于 1979 年在新泽西州美利山贝尔实验室开始设计开发的。C 进一步扩充和完善了 C 语言&#xff0c;最初命名为带类的C&…...

实现代码灵活性:用Roslyn动态编译和执行存储在数据库中的C#代码

在许多现代应用程序中&#xff0c;动态编译和执行代码是提升灵活性和功能的一种强大技术。本文将介绍如何使用Roslyn编译器平台动态编译和执行存储在数据库中的C#代码&#xff0c;并结合实际公司案例来说明这些技术的应用场景。 1. 引言 在很多应用场景中&#xff0c;我们可能…...

探索哈希表:C++中的实现与操作详解【Map、Set、数据结构】

探索哈希表&#xff1a;C中的实现与操作详解 介绍 哈希表&#xff08;Hash Table&#xff09;是一种常见的数据结构&#xff0c;它提供了一种高效的键值对存储方式&#xff0c;能够快速进行插入、删除和查找操作。在这篇博客中&#xff0c;我们将详细介绍哈希表的概念、在C中的…...

Python酷库之旅-第三方库Pandas(062)

目录 一、用法精讲 241、pandas.Series.view方法 241-1、语法 241-2、参数 241-3、功能 241-4、返回值 241-5、说明 241-6、用法 241-6-1、数据准备 241-6-2、代码示例 241-6-3、结果输出 242、pandas.Series.compare方法 242-1、语法 242-2、参数 242-3、功能 …...

python学习之旅(基础篇看这篇足够了!!!)

目录 前言 1.输入输出 1.1 输入 1.2 输出 2. 变量与常量 2.1 变量 2.2 常量 2.3 赋值 2.4格式化输出 3. 数据类型 4. 四则运算 5.“真与假” 5.1 布尔数 5.2 比较运算和逻辑运算 5.3 布尔表达式 6.判断语句 6.1 基本的if语句 6.2 if-else语句 6.3 if-elif-el…...

铭豹扩展坞 USB转网口 突然无法识别解决方法

当 USB 转网口扩展坞在一台笔记本上无法识别,但在其他电脑上正常工作时,问题通常出在笔记本自身或其与扩展坞的兼容性上。以下是系统化的定位思路和排查步骤,帮助你快速找到故障原因: 背景: 一个M-pard(铭豹)扩展坞的网卡突然无法识别了,扩展出来的三个USB接口正常。…...

从WWDC看苹果产品发展的规律

WWDC 是苹果公司一年一度面向全球开发者的盛会&#xff0c;其主题演讲展现了苹果在产品设计、技术路线、用户体验和生态系统构建上的核心理念与演进脉络。我们借助 ChatGPT Deep Research 工具&#xff0c;对过去十年 WWDC 主题演讲内容进行了系统化分析&#xff0c;形成了这份…...

基于Uniapp开发HarmonyOS 5.0旅游应用技术实践

一、技术选型背景 1.跨平台优势 Uniapp采用Vue.js框架&#xff0c;支持"一次开发&#xff0c;多端部署"&#xff0c;可同步生成HarmonyOS、iOS、Android等多平台应用。 2.鸿蒙特性融合 HarmonyOS 5.0的分布式能力与原子化服务&#xff0c;为旅游应用带来&#xf…...

(转)什么是DockerCompose?它有什么作用?

一、什么是DockerCompose? DockerCompose可以基于Compose文件帮我们快速的部署分布式应用&#xff0c;而无需手动一个个创建和运行容器。 Compose文件是一个文本文件&#xff0c;通过指令定义集群中的每个容器如何运行。 DockerCompose就是把DockerFile转换成指令去运行。 …...

浅谈不同二分算法的查找情况

二分算法原理比较简单&#xff0c;但是实际的算法模板却有很多&#xff0c;这一切都源于二分查找问题中的复杂情况和二分算法的边界处理&#xff0c;以下是博主对一些二分算法查找的情况分析。 需要说明的是&#xff0c;以下二分算法都是基于有序序列为升序有序的情况&#xf…...

七、数据库的完整性

七、数据库的完整性 主要内容 7.1 数据库的完整性概述 7.2 实体完整性 7.3 参照完整性 7.4 用户定义的完整性 7.5 触发器 7.6 SQL Server中数据库完整性的实现 7.7 小结 7.1 数据库的完整性概述 数据库完整性的含义 正确性 指数据的合法性 有效性 指数据是否属于所定…...

【笔记】WSL 中 Rust 安装与测试完整记录

#工作记录 WSL 中 Rust 安装与测试完整记录 1. 运行环境 系统&#xff1a;Ubuntu 24.04 LTS (WSL2)架构&#xff1a;x86_64 (GNU/Linux)Rust 版本&#xff1a;rustc 1.87.0 (2025-05-09)Cargo 版本&#xff1a;cargo 1.87.0 (2025-05-06) 2. 安装 Rust 2.1 使用 Rust 官方安…...

Vue ③-生命周期 || 脚手架

生命周期 思考&#xff1a;什么时候可以发送初始化渲染请求&#xff1f;&#xff08;越早越好&#xff09; 什么时候可以开始操作dom&#xff1f;&#xff08;至少dom得渲染出来&#xff09; Vue生命周期&#xff1a; 一个Vue实例从 创建 到 销毁 的整个过程。 生命周期四个…...

Vue 3 + WebSocket 实战:公司通知实时推送功能详解

&#x1f4e2; Vue 3 WebSocket 实战&#xff1a;公司通知实时推送功能详解 &#x1f4cc; 收藏 点赞 关注&#xff0c;项目中要用到推送功能时就不怕找不到了&#xff01; 实时通知是企业系统中常见的功能&#xff0c;比如&#xff1a;管理员发布通知后&#xff0c;所有用户…...

多元隐函数 偏导公式

我们来推导隐函数 z z ( x , y ) z z(x, y) zz(x,y) 的偏导公式&#xff0c;给定一个隐函数关系&#xff1a; F ( x , y , z ( x , y ) ) 0 F(x, y, z(x, y)) 0 F(x,y,z(x,y))0 &#x1f9e0; 目标&#xff1a; 求 ∂ z ∂ x \frac{\partial z}{\partial x} ∂x∂z​、 …...