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

news2024/9/21 0:32:28

设计原则

最重要的:开放封闭原则

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

工厂模式

用一个工厂函数,来创建实例,隐藏 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

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

基于设备上解码的 Yolo 检测

什么是NDVI? 该存储库 ( 修改自 device-decoding) 包含直接使用 DepthAI SDK (main_sdk.py) 或 DepthAI API (main_api.py) 在设备上解码运行 Yolo 目标检测的代码。目前,支持的版本有:YoloV3 & YoloV3-tiny,YoloV4 & YoloV4-tiny,Y…

滑动窗口大总结!!!妈妈以后再也不担心我不会做滑动窗口啦~

写在前面:全部题都源于力扣 讲解题目一:最小覆盖子串题目二:字符串排列题目三:找所有字母异位词题目四:无重复字符的最长子串题目五:滑动窗口的最大值 讲解 滑动窗口算法技巧主要用来解决子数组问题&#…

B 端产品设计:导航系统构建指南

两年前写的一篇关于导航菜单的文章帮助许多学生进入 B 端设计领域。然而,两年过去了,行业在不断发展,文章中的许多观点并不适用于当前的 B 端设计环境。如今的 B 端设计越来越受到重视,所以最近打算深入挖掘之前不太过时的文章内容…

strimzi operator 部署kafka集群(可外部访问)

Strimzi介绍 官方文档:https://strimzi.io/docs/operators/0.42.0/overview#kafka-components_str Strimzi介绍 Strimzi 是一个用于 Apache Kafka 在 Kubernetes 上部署和管理的开源项目。它提供了一组 Kubernetes 自定义资源定义(Custom Resource Definitions,CRDs)、控制…

充电宝有必要买贵的吗?充电宝可以带上高铁吗?充电宝选购方法

市面上的充电宝可以说是非常的多,但是能选到一款适合自己的充电宝基本是不容易的,然而,当我们准备选购充电宝时,常常会面临诸多疑问。其中,“充电宝有必要买贵的吗”就是一个备受关注的问题。价格似乎成为了我们在众多…

[Git][认识Git]详细讲解

目录 1.什么是仓库?2.认识工作区、暂存区、版本库3.认识 .git1.index2.HEAD && master3.objects4.总结 1.什么是仓库? 仓库:进⾏版本控制的⼀个⽂件⽬录 2.认识工作区、暂存区、版本库 工作区:在电脑上写代码或⽂件的⽬录…

【C++】C++应用案例-通讯录管理系统

目录 一、整体介绍 1.1、需求和目标 1.2、整体功能描述 二、页面及功能描述 2.1 主菜单 2.2 添加联系人菜单 2.3 显示联系人菜单 2.4 修改联系人菜单 2.5 退出功能 三、流程设计 3.1 主流程 3.2 添加操作流程 3.3 显示联系人操作流程 3.4 修改联系人操作流程 四…

V.PS荷兰阿姆斯特丹VPS详细测评

V.PS怎么样? V.PS的荷兰VPS位于荷兰阿姆斯特丹数据中心,实际的网络从测评的数据来看:电信走的CN2 GIA/AS4809网络、联通走的是CUII/AS9929网络、移动走的是CUII/AS9929网络,也就是说三网都是走的运营商的轻负载线路。 默认的CPU型…

c/c++自增运算符

自增运算符在前:先自增再取值 自增运算符在后:先取值再自增 如图: lptmp等于tmp,但是t等于128,也就说,当位于后面时,先取值,再自增。

数论第四节:二元一次不定方程、勾股数

不定方程定义 解不确定的方程称为不定方程。一般化的定义为:不定方程是指未知数的个数多余方程的个数,或未知数受到某种限制(如整数、正整数等)的方程和方程组。 二元一次不定方程定义 形如axbyc的形式的方程。其中a,b不等于0&…

python print 函数参数:sep 自定义分隔符,end 自定义结尾符

1. 简述 print 函数可以将内容打印到标准输出,如果不指定 end 参数,默认在输出的内容之后加一个 “回车符\n”。 以下是 print 函数常用的参数用法: print(object, …, sepstr, endstr) object, …:要打印的内容,可以…

如何基于欧拉系统完成第三方软件仓库的安装

首先,我们需要写一个镜像脚本 rootlocalhost yum.repos.d]# vim docker-ce.repo内容如下 [docker-ce] namedocker baseurlhttps://mirrors.tuna.tsinghua.edu.cn/docker-ce/linux/rhel/9/x86_64/stable/ //我们使用的是清华的镜像源 gpgcheck0 tips:这里告诉大家一…

来点八股文(五) 分布式和一致性

Raft raft 会进入脑裂状态吗?描述下场景,怎么解决? 不会。raft通过选举安全性解决了这个问题: 一个任期内,follower 只会投票一次票,且先来先得;Candidate 存储的日志至少要和 follower 一样新…

Kafka基本讲解

Kafka基本讲解 一:Kafka介绍 Kafka是分布式消息队列,主要设计用于高吞吐量的数据处理和消息传输,适用于日志处理、实时数据管道等场景。Kafka作为实时数仓架构的核心组件,用于收集、缓存和分发实时数据流,支持复杂的…

【单例设计模式】揭秘单例模式:从原理到实战的全方位解析(开发者必读)

文章目录 深入理解单例设计模式:原理、实现与最佳实践引言第一部分:设计模式简介第二部分:单例模式定义第三部分:单例模式的优点和缺点第四部分:单例模式的实现方式懒汉式非线程安全的实现线程安全的实现(双…

vmware ubuntu虚拟机网络联网配置

介绍vmware虚拟机配置基础网络环境,同时连接外网(通过桥接模式),以及ubuntu下输入法等基础工具安装。 本文基于ubuntu22.04,前提虚拟机已经完成安装。本文更多是针对vmware虚拟机的设置,之前有一篇针对ubun…

第三关:Git 基础知识

一、Git是什么 Git是一种开源的分布式版本控制系统,广泛应用于软件开发领域,尤其是在协同工作环境中。它为程序员提供了一套必备的工具,使得团队成员能够有效地管理和跟踪代码的历史变更。下面是 Git 的主要功能和作用的规范描述&#xff1a…

Java面试题——第二篇(设计模式)

1. 工厂方法模式 1.1 普通工厂模式 建立一个工厂类,对实现了同一接口的一些类进行实例的创建。 1.2 抽象工厂模式 抽象多个工厂类,提高工厂的可扩展性 定义抽象工厂接口 public interface DeviceFactory { Phone createPhone(); Computer creat…

【工具插件类教学】vHierarchy 2工具编辑器扩展使用

目录 一、下载导入 二、使用介绍 1.便捷小工具 a.图标和颜色Icons and colors b.对象组件缩略图Component minimap c.层级线展示Hierarchy lines d.极简模式Minimal mode e.斑马条纹图案Zebra striping f.激活切换Activation toggle 2、快捷键 一、下载导入 资源官方…

Redis系列之Redis Sentinel

概述 Redis主从集群,一主多从模式,包括一个Master节点和多个Slave节点。Master负责数据的读写,Slave节点负责数据的查询。Master上收到的数据变更,会同步到Slave节点上实现数据的同步。通过这种架构实现可以Redis的读写分离&…