前端——设计模式

0 设计模式分类

  • 创建型:帮助创建对象(工厂模式、单例模式、建造者模式、原型模式)
  • 结构型:帮助设计代码结构(适配器模式、装饰者模式、享元模式)
  • 行为型:帮助组织模块行为(策略模式、职责链模式、命令模式)
  • 技巧型:优化代码的技巧

1 策略模式

需求:用户管理和组织管理中存在相同的处理操作:创建、编辑、详情,针对编辑和详情,对于不同字段又有不同的处理方式,导致最后写了很多if else,那为什么不能复用,写一段可维护的代码?

export const processDefaultValueFn = {create: () => {},update: () => {},detail: () => {}
}export updateCaseFn = {string: () => {},boolean: () => {}
}

2 适配器模式

需求:组件数据来源由原来的单一来源改为多个接口来源,但原有接口无法改变,因此需要适配,在项目中,我们大多都是单一数据源

3 单例模式

定义:保证一个类仅有一个实例,并提供一个访问它的全局访问点

例子:采用单例模式创建dom元素

//单一职责原则,该函数只用于创建DOM元素,不关注创建的DOM元素是什么,将创建DOM元素的内容代理至外部函数中
const createDOM = function(fn) {var resultreturn function() {return result || (fn.apply(this, arguments))	}
}const createDiv = function (){return div
}const createSpan = function(){return span
}createDOM(createDiv)
createDOM(createSpan)

4 代理模式

用法:当不方便访问一个对象时,提供一个代理对象来控制对这个对象的访问

缓存代理:例如useMemo

5 发布-订阅模式

例如:登陆后需要进行一系列设置,导致后续有业务需要添加在登录成功后的函数中,需要加代码

通常写法:

login.success(()=>{header.setAvatar(data)nav.setAvatar()
})

改进写法:

$.ajax('',()=>{login.trigger(data)
})//各模块监听登录成功的消息
const header = (()=>{login.listen('success',(data) => {header.setAvatar(data)})
})()

6 命令模式

应用场景:有些时候需要向某个对象发送请求,但是不知道请求的接收者是谁,请求的操作是什么。通过命令模式解耦请求发送者和请求接收者之间的联系

优点

  • 发布者和接收者之间解耦
  • 可以使用栈来维护一个请求队列,从而实现撤销、连续点击等功能

缺点

  • 额外增加一个命令对象,使得代码变得复杂

7 组合模式

分析:创建一颗命令树,每个树的叶子节点包含一个execute方法,js中实现组合模式的难点在于必须保证组合对象和叶对象拥有相同的方法
缺点:树的结果如果比较复杂,性能会受到影响,可以采用职责链模式避免遍历整棵树

应用场景:表示对象的部分-整体结构,统一对待树中的所有对象

8 享元模式(用于性能优化,时间换空间)

该模式要求将对象的属性划分为内部属性和外部属性

  • 内部属性:存储于对象内部,可以被一些对象共享,独立于具体场景,不会改变
  • 外部属性:取决于具体场景,并根据场景变化,不能共享

应用场景:多文件上传优化

适用场景

  • 使用大量对象造成很大的内存开销
  • 对象的大多数状态可以转换成外部状态

使用闭包来私有化对象

const uploadFactory = function() {const obj = {}return {create: function(type) {if (obj[type]) {return obj[type]}return obj[type] = new Upload(type)}	}
}

9 中介者模式

其实就是发布-订阅模式
应用场景:对象之间的耦合性太高,更改一个对象后还需更改另一个对象,中介者模式使对象之间的关系解耦
缺点:中介者对象可能会非常复杂

10 装饰器模式

给某个对象动态添加某个功能,并且不影响使用这个对象的其他对象

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

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

相关文章

Pyqt5实现多线程程序

主从架构 Pyqt常常使用**主从架构(Master-Workers 架构)**来避免界面卡死的情况。 Master-Workers 架构就像它的名字,一个master统领着几个workers一起干活。其中某个worker倒下了不会导致整体任务失败。matser不用干活,因此可以…

分布式锁之基于redis实现分布式锁(二)

2. 基于redis实现分布式锁 2.1. 基本实现 借助于redis中的命令setnx(key, value),key不存在就新增,存在就什么都不做。同时有多个客户端发送setnx命令,只有一个客户端可以成功,返回1(true);其他…

市场是变化的?这种悖论fpmarkets澳福一秒打破

你是不是始终认为市场是经常变化的,其实这是不对的,这种认识fpmarkets澳福今天一秒打破。 市场经常变化吗?众多投资者无需过多思考,就认为答案是肯定的。因为无论是在互联网的哪个角落,都可以看到这样的信息。即使我们没有深入研…

NLP基本知识

NLP基本知识 词嵌入&词向量 词嵌入(Word Embedding)是一种将单词或文本转化为向量表示的技术,它在自然语言处理(NLP)中广泛应用。词嵌入的目标是将文本数据映射到一个低维度的向量空间中,以便计算机可…

Python---函数的嵌套(一个函数里面又调用了另外一个函数)详解

函数嵌套调用------就是一个函数里面又调用了另外一个函数。 基本语法: # 定义 函数B def funcB():print(这是funcB函数的函数体部分...)# 定义 函数A def funcA():print(- * 80) # 这一行为了更好区分print(这是funcA函数的函数体部分...)# 假设我们在调用funcA…

设计模式-Adapter

定义 适配器设计模式是一种结构型设计模式,用于将一个类的接口变换成客户端所期待的另一种接口,从而使原本因接口不匹配而无法在一起工作的两个类能够在一起工作。 适配器模式包括三种形式:类适配器模式、对象适配器模式、接口适配器模式&a…

Ubuntu18 Opencv3.4.12 viz 3D显示安装、编译、使用、移植

Opencv3.*主模块默认包括两个3D库 calib3d用于相机校准和三维重建 ,viz用于三维图像显示,其中viz是cmake选配。 参考: https://docs.opencv.org/3.4.12/index.html 下载linux版本的源码 sources。 查看cmake apt list --installed | grep…

App Cleaner Uninstaller Pro 一键清理,彻底卸载Mac应用

随着科技的不断发展,Mac电脑已经成为许多用户工作和娱乐的首选。然而,随着时间的推移,我们的Mac电脑上可能会堆积大量的无效文件和冗余数据,这不仅占用了宝贵的磁盘空间,还可能影响到系统的运行速度。为了解决这一问题…

基于51单片机zigbee温室大棚监控系统

**单片机设计介绍,基于51单片机zigbee温室大棚监控系统 文章目录 一 概要二、功能设计设计思路 三、 软件设计原理图 五、 程序六、 文章目录 一 概要 基于51单片机和Zigbee技术的温室大棚监控系统是一种用于监测和控制温室大棚环境的设备。以下是一个基本的设计介…

STM32 CAN通信自定义数据包多帧连发乱序问题

场景: can标准帧中每一帧只能传输8字节,而应用中传输一包的内容往往超过8字节,因此需要把一个包拆成多个帧发送,接收端才把收到的多帧重新组装成一个完整的包 问题描述 在一问一答的两块板间通信,多帧连发是能够按照…

UDP分片和丢包与TCP效果对比

UDP 分片 与 丢包,UDP 真的比 TCP 高效吗? UDP(用户数据报协议)和TCP(传输控制协议)在很多方面都有显著的区别。总体来说,TCP更适合需要可靠传输的应用,例如网页浏览、电子邮件等&a…

信创系列之大数据,分布式数据库产业链跟踪梳理笔记…

并购优塾 投行界的大叔,大叔界的投行 【产业链地图,版权、内容与免责声明】1)版权:版权所有,违者必究,未经许可不得翻版、摘编、拷贝、复制、传播。2)尊重原创:如有引用未标注来源…

CentOS 7启动时报“Started Crash recovery kernel arming.....shutdown....”问题处理过程

有台虚拟机由于CPU负载过高而宕机,宕机重启后停在“Started Crash recovery kernel arming…shutdown…”阶段,如下所示: 重置虚拟机,进入grub菜单,按e编辑启动选项,在linux16 行末,加上&…

【考研】数据结构(更新到循环链表)

声明&#xff1a;所有代码都可以运行&#xff0c;可以直接粘贴运行&#xff08;只有库函数没有声明&#xff09; 线性表的定义和基本操作 基本操作 定义 静态&#xff1a; #include<stdio.h> #include<stdlib.h>#define MaxSize 10//静态 typedef struct{int d…

【追求卓越02】数据结构--链表

引导 今天我们进入链表的学习&#xff0c;我相信大家对链表都很熟悉。链表和数组一样&#xff0c;作为最基础的数据结构。在我们的工作中常常会使用到。但是我们真的了解到数组和链表的区别吗&#xff1f;什么时候使用数组&#xff0c;什么时候使用链表&#xff0c;能够正确的选…

监控员工上网有什么软件

监控员工上网的软件主要用于监控员工在工作时间内的网络行为&#xff0c;包括浏览网页、使用社交媒体、发送邮件等。通过监控员工上网行为&#xff0c;企业管理者可以更好地了解员工的工作状态和行为&#xff0c;规范员工的上网行为&#xff0c;提高工作效率&#xff0c;同时也…

SSL证书对网站的作用及影响?

SSL证书作为当下互联网的重要安全件&#xff0c;包括搜索引擎的收录、网站是否具备信任的条件以及HTTP2.0传输协议的相互作用等&#xff0c;尤其是浏览器对古老的http协议警告提示不安全将直接影响到用户的信任度以及品牌形象&#xff0c;对于网站来说可谓是必不可少。 SSL证书…

Webstorm 插件文件目录颜色分析——白蓝绿红黄灰

Webstorm 插件文件目录【白色、蓝色、绿色、红色、黄色、灰色】对应当前文件发生什么了&#xff0c;即文件夹当前状态。 WebStrom配置好git或SVN后文件颜色代表的含义&#xff1a; 白色&#xff1a;本地无修改内容 蓝色&#xff1a;文件内容有修改&#xff0c;暂未提交到git…

python命令行 引导用户填写可用的ip地址和端口号

字多不看&#xff0c;直接体验 待补充 演示代码 # -*- coding:UTF-8 -*- """ author: dyy contact: douyaoyuan126.com time: 2023/11/23 10:29 file: 引导用户填写可用的ip地址和端口号.py desc: xxxxxx """# region 引入必要的依赖 import …

C语言-判断上三角矩阵

上三角矩阵指主对角线以下的元素都为0的矩阵&#xff1b;主对角线为从矩阵的左上角至右下角的连线。 本题要求编写程序&#xff0c;判断一个给定的方阵是否上三角矩阵。 输入格式&#xff1a; 输入第一行给出一个正整数T&#xff0c;为待测矩阵的个数。接下来给出T个矩阵的信…