设计模式 — — 前端

常见的设计模式

  • 单例模式
  • 工厂模式
  • 策略模式
  • 代理模式
  • 观察者模式

单例模式

保证一个类仅有一个实例,并提供一个访问它的全局访问点。实现的方法为先判断实例存在与否,如果存在则直接返回,如果不存在就创建了再返回,这就确保了一个类只有一个实例对象

场景应用

  • 页面存在一个模态框的时候,只有用户点击的时候才会创建
  • Vuexredux全局态管理库也应用单例模式的思想

很多第三方库都是单例模式,多次引用只会使用同一个对象,如 jquery、lodash、moment

工厂模式

  • 工厂角色:负责实现创建所有实例的内部逻辑.
  • 抽象产品角色:是所创建的所有对象的父类,负责描述所有实例所共有的公共接口
  • 具体产品角色:是创建目标,所有创建的对象都充当这个角色的某个具体类的实例

策略模式

策略模式,就是 定义一系列的算法,把他们一个个封装起来,并且使他们可以相互替换

至少分成两部分:

  • 策略类(可变),策略类封装了具体的算法,并负责具体的计算过程
  • 环境类(不变),接受客户的请求,随后将请求委托给某一个策略类

代理模式

代理模式:为对象提供一个 代用品或占位符,以便控制对它的访问

场景应用

  • 图片懒加载 (先通过一张loading图占位,然后通过异步的方式加载图片,等图片加载好了再把完成的图片加载到img标签里面)
  • 读取本地缓存(相同参数的请求情况下,不去调用 http 请求,节约部分请求时间跟资源)

观察者模式

观察者模式定义了一种 一对多的对象依赖关系,当被依赖的对象的状态发生了改变,所有依赖它的对象都会得到通知;

比如你订阅了某个博主的频道,当有内容更新时会收到推送

场景应用

  • vue 双向绑定 v-model
  • DOM 事件(监听返回)

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

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

相关文章

扫雷游戏 --- C语言实现

扫雷游戏 test.c — 与游戏相关的逻辑测试 game.c — 与游戏相关的函数实现 game.h — 与游戏相关的函数的声明 //test.c#define _CRT_SECURE_NO_WARNINGS 1#include "game.h"void menu(){printf("******************************\n");printf("******…

OpenCASCADE开发指南<七>:OCC 中的数学基本类型和数学算法

1 标准对象的集合容器 在处理现实问题时,经常将问题抽象成一个数学模型,接着对模型求解, 然后将解提取出来以解决现实问题。 其实在 CAD 软件中, 主要解决的就是数学模型。因此,本节将描述 OCC 的数学基本类型和数学算…

Adb无线连接调试

1.在开发者选项打开usb调试,以及无线调试 2.手机连接wifi,进入设置静态ip地址,网关 3.手机通过usb先连接电脑 4.adb devices命令检查设备连接情况 5.adb tcpip 5555 6.adb -s 255d50d7 tcpip 5555(255d50d7为第4步获取的设备…

JavaWeb06-MVC和三层架构

目录 一、MVC模式 1.概述 2.好处 二、三层架构 1.概述 三、MVC与三层架构 四、练习 一、MVC模式 1.概述 MVC是一种分层开发的模式,其中 M:Model,业务模型,处理业务 V: View,视图,界面展…

【LeetCode每日一题】2789. 合并后数组中的最大元素

文章目录 [2789. 合并后数组中的最大元素](https://leetcode.cn/problems/largest-element-in-an-array-after-merge-operations/)思虑&#xff1a;代码&#xff1a; 2789. 合并后数组中的最大元素 思虑&#xff1a; 1.因为要合并的条件之一是&#xff0c;num[i]<num[i1].所…

5.Python从入门到精通—Python 运算符

5.Python从入门到精通—Python 运算符 Python 运算符算术运算符比较&#xff08;关系&#xff09;运算符赋值运算符逻辑运算符位运算符成员运算符身份运算符运算符优先级 Python 运算符 Python语言支持以下类型的运算符: 算术运算符比较&#xff08;关系&#xff09;运算符赋…

c++11语法特性

c11 1.c11发展简介 ​ 第一个比较正式的c标准是1998提出的c98标准。之后定了5年计划&#xff0c;每5年来一次大更新。在2003年C标准委员会曾经提交了一份技术勘误表(简称TC1)&#xff0c;使得C03这个名字已经取代了C98称为C11之前的最新C标准名称。不过由于C03(TC1)主要是对C…

每日OJ题_哈希表④_力扣219. 存在重复元素 II

目录 力扣219. 存在重复元素 II 解析代码 力扣219. 存在重复元素 II 219. 存在重复元素 II 难度 简单 给你一个整数数组 nums 和一个整数 k &#xff0c;判断数组中是否存在两个 不同的索引 i 和 j &#xff0c;满足 nums[i] nums[j] 且 abs(i - j) < k 。如果存在&am…

RabbitMQ 模拟实现【三】:存储设计

文章目录 数据库设计SQLite配置数据库实现 数据库关于哈希表等复杂类的存储启动数据库 文件设计消息持久化消息属性格式核心方法消息序列化消息文件回收 统一硬盘存储管理内存存储管理线程安全数据结构实现 数据库设计 数据库主要存储交换机、队列、绑定 SQLite 此处考虑的是…

完整的通过git命令框和windows窗口将本地文件上传到gitee远程仓库流程步骤

1.下载git 这个网站搜索git官方&#xff0c;去下载就行了 2.打开git安装后的Git Bash命令框 3.在Git Bash命令框设置一下要远程链接的gitee账号 git config --global user.name “名字”Git config --global user.email “邮箱” 4.查看一下账号设置 git config --global -…

Chitosan-PEG-DSPE 壳聚糖修聚乙二醇磷脂 DSPE-PEG-Chitosan

产品简称&#xff1a;DSPE-PEG-Chitosan、Chitosan-PEG-DSPE、DSPE-PEG-CS、CS-PEG-DSPE 产品中文名称&#xff1a;壳聚糖-聚乙二醇-磷脂、磷脂-聚乙二醇-壳聚糖 分子量&#xff1a;可以根据要求定制 保存条件&#xff1a; -20干燥保存 有效期&#xff1a; 一年 纯度&…

创建SpringCloudGateWay

创建SpringCloudGateWay 本案例基于尚硅谷《谷粒商城》项目&#xff0c;视频27 创建测试API网关 1、创建module 2、引入依赖 <?xml version"1.0" encoding"UTF-8"?> <project xmlns"http://maven.apache.org/POM/4.0.0" xmlns:x…

Spring中的bean相关问题

Spring中的Bean的作用域主要有以下几种&#xff1a; singleton&#xff08;单例&#xff09;&#xff1a;在整个Spring IoC容器中&#xff0c;singleton作用域的Bean只会有一个实例存在。无论多少次请求容器提供该类型的Bean&#xff0c;容器都将返回同一个Bean实例。默认情况…

python中Unicode 数据库访问(Unicode Character Database)

此模块提供了对 Unicode Character Database (UCD) 的访问&#xff0c;其中定义了所有 Unicode 字符的字符属性。 此数据库中包含的数据编译自 UCD 版本 15.0.0。 该模块使用与 Unicode 标准附件 #44 “Unicode 字符数据库” 中所定义的相同名称和符号。 它定义了以下函数&…

WPF制作带图标和文字的按钮模板(通过附加属性实现)

1.界面模板代码部分 <Window.Resources><Style x:Key"IconButton" TargetType"Button"><Setter Property"Template"><Setter.Value><ControlTemplate TargetType"Button"><Border x:Name"borde…

(自用)Spring常用配置

spring: datasource: url: jdbc:mysql://127.0.0.1:3306/mycnblog?characterEncodingutf8&useSSLfalse username: root password: root driver-class-name: com.mysql.cj.jdbc.Driver mvc: favicon: enable: false profiles: #多平台配置…

C++进阶--mep和set的模拟实现

红黑树链接入口 底层容器 模拟实现set和map时常用的底层容器是红黑树。 红黑树是一种自平衡的搜索二叉树&#xff0c;通过对节点进行颜色标记来保持平衡。 在模拟实现set和map时&#xff0c;可以使用红黑树来按照元素的大小自动排序&#xff0c;并且保持插入和删除操作的高效…

Set cancelled by MemoryScratchSinkOperator

Bug信息 Caused by: com.starrocks.connector.spark.exception.StarrocksInternalException: StarRocks server StarRocks BE{host=10.9.14.39, port=9060} internal failed, status code [CANCELLED] error message is [Set cancelled by MemoryScratchSinkOperator]Bug产生的…

使用 mapstructure 解析 json

介绍 先来介绍一下 mapstructure 这个库主要用来做什么的吧&#xff0c;官网是这么介绍的&#xff1a; mapstructure 是一个 Go 库&#xff0c;用于将通用映射值解码为结构&#xff0c;反之亦然&#xff0c;同时提供有用的错误处理。 该库在解码数据流&#xff08;JSON、Gob …

微信名【无感】的同学,你还好吗?

今天遇到个选择了微信一对一服务的同学&#xff0c;问Python问题&#xff0c;问题比较简单。 回答完问题&#xff0c;我就说了一句&#xff1a;问题比较简单&#xff0c;随意打赏一个红包就行了。 然后我就被拉黑了&#xff0c;然后我的解答问题&#xff0c;收到了一堆投诉&…