前端需要理解的设计模式知识

news2024/11/18 22:55:46

设计模式的原则:1. 单一职责原则(一个对象或方法只做一件事) 2. 最少知识原则(尽可能少的实体或对象间互相作用) 3. 开放封闭原则(软件实体具有可扩展且不可修改)

设计模式是通过代码设计经验总结出的解决问题的一系列套路。

1 单例模式

保证只有一个实例且提供全局访问点。

优点是避免频繁创建和销毁实例,减少内存占用。缺点是不适合需动态扩展对象或创建多个相似对象的场景。

应用于:1. 第三方库的引入 2. 弹窗 3. 购物车 4.全局状态管理(vuex) 5. 连接数据库的线程池。

JavaScript单线程,不涉及同步锁的问题。

模式实现:

惰性弹窗:

 

2 发布-订阅模式

基于一个事件(主题)通道,接收对象subscriber通过自定义事件订阅主题,被激活的对象publisher通过发布主题通知订阅该主题的subscriber。常规是订阅后,发布才通知,也可订阅后,获取之前发布的通知。

优点是时间解耦(实现异步)、空间解耦,弱化对象实体间的引用关系,事件中心可更细粒度处理。缺点是复杂场景不易追踪维护和理解,事件中心等额外时间内存开销。

应用:1. JQuery的on 2. vue的响应式 3. vue父子组件通信$on / $emit

模式实现:

 

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

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

相关文章

2021年12月 C/C++(四级)真题解析#中国电子学会#全国青少年软件编程等级考试

第1题:移动路线 桌子上有一个m行n列的方格矩阵,将每个方格用坐标表示,行坐标从下到上依次递增,列坐标从左至右依次递增,左下角方格的坐标为(1,1),则右上角方格的坐标为(m,n)。 小明是个调皮的孩子,一天他捉来一只蚂蚁,不小心把蚂蚁的右脚弄伤了,于是蚂蚁只能向上或向右…

基于PIC单片机温度-脉搏-DS18B20温度-液晶12864显示(proteus仿真+源程序)

一、系统方案 1、上电初始化液晶第一行显示脉搏,第二行显示温度,第三行显示模式,第四行显示强度;按下K1按键可以选择模式,催眼模式或治疗模式。 2、治疗模块下,可以通过K2、K3修改强度。 二、硬件设计 原理…

探索数据湖中的巨兽:Apache Hive分布式SQL计算平台浅度剖析!

文章目录 ◆ Apache Hive 概述1.1 分布式SQL计算1.2 Hive的优势 ◆ 模拟实现Hive功能2.1 元数据管理2.2 解析器2.3 基础架构2.4 Hive架构 ◆ Hive基础架构3.1 Hive架构图3.2 Hive组件3.2.1 元数据存储3.2.2 Driver驱动程序3.2.3 用户接口 ◆ Hive部署4.1 VMware虚拟机部署步骤一…

SSL/CA 证书及其相关证书文件(pem、crt、cer、key、csr)

数字证书是网络世界中的身份证,数字证书为实现双方安全通信提供了电子认证。数字证书中含有密钥对所有者的识别信息,通过验证识别信息的真伪实现对证书持有者身份的认证。数字证书可以在网络世界中为互不见面的用户建立安全可靠的信任关系,这…

互联网医院成品功能你有哪些看法?

随着信息化的飞速发展,医疗领域信息化程度日益加深,医院对于信息化的自身需求越来越高,由此也推动了医院信息化的快速发展。而即时医疗信息服务能够解决普通老百姓医疗信息匮乏、花大钱看小病、就医不及时等基本问题。通过智能手机、平板电脑…

国内Android应用市场上线流程

国内各个Android应用市场的上线流程可能会有所不同,特别是在审核方面。此外,某些应用市场可能有一些特殊的政策和要求,您需要仔细阅读并遵循这些要求,以确保您的应用能够顺利上线并保持在市场上。在整个过程中,与市场的…

重磅丨《欧盟电池和废电池法规》最新发布!

《欧盟新电池法》 8月17日,欧盟官方公示满20天的《欧盟电池和废电池法规》(文中简称《新电池法》)将正式生效。 根据《新电池法》,自2027年起,动力电池出口到欧洲必须持有符合要求的“电池护照”,记录电池…

Spring与Mybatis集成且Aop整合(放飞双手,迅速完成CRUD及分页)

目录 一、概述 二、集成 ( 1 ) 为什么 ( 2 ) 优点 ( 3 ) 实例 三、整合 3.1 讲述 3.2 整合进行分页 带我们带来的收获 一、概述 集成是指将不同的组件、系统或框架整合在一起,使它们能够协同工作,共同完成某个功能或提供某种服务。在软件开发中&…

M1/M2打开Parallels Desktop提示“由于临界误差,不能启动虚拟机”解决办法

M1/M2安装Parallels Desktop 18.3.2PD虚拟机后,安装win11或者打开原有win系统提示由于临界误差,不能启动虚拟机。 解决方法: 很简单! 关闭系统SIP,重新安装PD18虚拟机激活即可。

4G模组EC20 网卡udhcpc获取IP但是没有设置IP

使能网卡: ifconfig usb0 up dhcp获取ip,虽然没有报error,但是很显然没有设置进配置 获取ip命令:udhcpc -i usb0 非正常现象: 正常现象: 解决方法: (1)rootfs 创建文件夹…

资深网络工程师的网络排障全过程,太强了!【附工具下载】

下午好,我的网工朋友 我们知道,交换机是局域网中一种很重要的网络设备,它的工作状态与客户端系统的上网状态息息相关。 可是,在实际工作过程中,交换机的状态很容易受到外界的干扰,那样一来局域网中就会出…

打印所有声母,韵母组合汉语拼音并显示到表格中

最近辅导孩子学习语文:声母,韵母。现在将其组合起来。打印所有拼音集合 以下是整理出的有关拼音的内容。 声母(23个): b、p、m、f、d、t、n、l、g、k、h、j、q、x、zh、ch、sh、r、z、c、s、y、w。 韵母&#xff0…

GitHub星标4.6k,一个项目解决(几乎所有)机器学习问题

在github上发现了一个宝藏项目。 先介绍一下这个项目的作者Abhishek Thakur,他是世界上第一位kaggle四重大师!在比赛、数据集、Notebooks、讨论四项排名中皆名列前茅。 本次分享的项目书籍就是由Abhishek Thakur亲自撰写,可以这么说&#xf…

vue3使用Elementplus 动态显示菜单icon不生效

1.问题描述 菜单icon由后端提供&#xff0c;直接用的字符串返回&#xff0c;前端使用遍历显示&#xff0c;发现icon不会显示 {id: 8, path:/userManagement, authName: "用户管理", icon: User, rights:[view]}, <el-menu-item :index"menu.path" v-f…

2023年中国B2B行业研究报告白皮书(完整版)

随着科技的迅猛发展和市场的不断变革&#xff0c;2023年的中国B2B行业正展现出前所未有的活力和潜力。作为一个关键的经济领域&#xff0c;B2B行业在推动企业之间合作、促进供应链优化以及推动整体经济增长方面发挥着至关重要的作用。 今天运营坛为大家整理了一份《2023年中国…

如何自己实现一个丝滑的流程图绘制工具(六)bpmn删除、复制节点

前言 需要对流程图支持键盘操作删除&#xff0c;复制节点的操作 1、删除节点 获取点击节点事件&#xff0c;把点中的节点存入变量 eventBus.on(element.click, e > {const element elementRegistry.get(e.element.id)this.currentElement element})监听键盘操作进行节点…

C++多线程编程——线程同步(保姆级-1.4W字)

目录 C线程同步 引入 互斥锁 std::mutex std::lock_guard类模板 unique_lock 成员方法 应用举例 std::lock()函数模板 std::call_once(flag、function) 懒汉式单例模式实例 unique_lock互斥锁方式 ​编辑 call_once方式 条件变量 std::condition 条件变量使…

017-文件

017-文件 一、C文件的有关概念 1.什么是文件 文件是指存储在外存储器上的数据的集合。 操作系统是以文件为单位对数据进行管理的。输入输出是数据传送的过程,数据如流水一样从一处流向另一处,因此常将输入输出形象地称为流(stream),即输入输出流。C语言把文件看作是一个…

低功耗串口wifi模块在智能工厂解决方案中的数据透传应用

智能工厂解决方案必然是依赖于产品自身去完成信息采集&#xff0c;数据上传。目前基于串口WiFi模块的智慧工厂解决方案应用极为广泛。 工业物联网与串口WiFi模块 工业物联网是在制造和工业环境中&#xff0c;将连网仪器、传感器和其他设备与机械和流程连接起来的实现。创新的…

K8S cluster with multi-masters on Azure VM

拓扑参考&#xff1a; 在 Azure VM 实例上部署 KubeSphere 基础模板 需要修改 IP 地址和 VM Image的可以在模板中修改。 {"$schema": "https://schema.management.azure.com/schemas/2019-04-01/deploymentTemplate.json#","contentVersion": &q…