#Js篇:前端的设计模式有哪些

news2024/9/21 18:42:53

常见的前端设计模式

单例模式

  1. 保证一个类仅有一个实例,并提供一个访问他的全局访问点;vuex
  2. 常用于管理全局状态、配置信息等。

工厂模式

  1. 一个用于创建对象的接口,让子类决定实例化哪个类;

  2. 创建复杂对象或对象的组合。

策略模式

  1. 一系列算法,将每个算法封装起来,并使他们可以互换;
  2. 长于用在运行时选择算法。

适配器模式

  1. 将一个类的接口转换成客户希望的另外一个接口,使得原本由于接口不匹配而无法一起工作的那些类可以一起工作。

装饰模式

代理模式

发布订阅模式

也叫观察者模式。

比如我们点击一个按钮触发了点击事件就是使用了该模式

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

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

相关文章

解决electron-build打包后运行app报错:cannot find module xxx

现象: 关于这个问题查了很多资料,也问了chatgpt都没有找到答案。 最后只能靠自己了。 于是冷静下来回想一下细节。突然发现了一个特别点。 eletron-builder打包时,强制要求eletron-builder和eletron必须都放在devDependencies 否则&#…

001-调用函数访问结构体数组成员,并修改其数值

1 代码 /*调用函数访问结构体数组成员&#xff0c;并修改其数值 */ #include <stdio.h> /* for printf */ #include <stdlib.h> /* for exit */struct mytest{char a ;char b ;char c ; };void p_find_test(struct mytest *aaa) {struct mytest *test aaa…

这个变量要不要用volatile修饰呢?

正文 大家好&#xff0c;又见面了&#xff0c;我是bug菌~ 在嵌入式软件开发过程中&#xff0c;如果对volatile不熟&#xff0c;那可以你应该是个"假嵌入式程序员"&#xff0c;因为一个变量需不需要使用volatile考虑的场景挺多的&#xff0c;如果在某些场景下乱用&…

OpenGL笔记:纹理的初次使用

说明 纹理的代码写完后&#xff0c;一直出不来结果&#xff0c;原因是没有设置GL_TEXTURE_MIN_FILTER&#xff0c; 它的默认值为GL_NEAREST_MIPMAP_LINEAR&#xff0c; 因为这里我还没用到Mipmap&#xff0c;所以使用这个默认值&#xff0c;结果是错误的&#xff0c;关于mipma…

pycharm全网最新安装教程(附加activation code),支持2018-2023版本

官网地址Download PyCharm: Python IDE for Professional Developers by JetBrains 下载的话无脑下载安装即可&#xff01; 2018.2~2023版本用这个&#xff0c;最新的activation code码 2018.1以下版本用这个 老是审核不通过只能贴图片了&#xff08;T-T&#xff09;

pycharm右键执行,出现Run ‘Python tests in xxx‘的问题

1.问题描述 用pytest框架写了一个python的模块&#xff0c;右键执行时发现&#xff0c;执行的模块显示有问题&#xff0c;如下图所示 2.解决问题 Python tests这表示&#xff0c;当前运行的代码文件进入了pytest模式&#xff0c;pytest模式不同于run模式&#xff0c;因为运行…

基于SSM的论文管理系统的设计与实现

末尾获取源码 开发语言&#xff1a;Java Java开发工具&#xff1a;JDK1.8 后端框架&#xff1a;SSM 前端&#xff1a;Vue 数据库&#xff1a;MySQL5.7和Navicat管理工具结合 服务器&#xff1a;Tomcat8.5 开发软件&#xff1a;IDEA / Eclipse 是否Maven项目&#xff1a;是 目录…

Leetcode(面试题 08.01.)三步问题

文章目录 前言一、题目分析二、算法原理1.状态表示2.状态转移方程3.初始化4.填表顺序5.返回值是什么 三、代码实现总结 前言 在本文章中&#xff0c;我们将要详细介绍一下Leetcode(面试题 08.01.)三步问题相关的内容 一、题目分析 1.小孩可以上一阶&#xff0c;两阶&#xff…

Redis深入理解-主从架构下内核数据结构、主从同步以及主节点选举

Redis 主从挂载后的内核数据结构分析 主节点中&#xff0c;会通过 clusteNode 中的 slaves 来记录该主节点包含了哪些从节点&#xff0c;这个 slaves 是一个指向 *clusterNode[] 数组的数据结构从节点中&#xff0c;会通过 clusterNode 中的 slaveof 来记录该从节点属于哪个主…

鸿蒙应用开发-初见:入门知识、应用模型

基础知识 Stage模型应用程序包结构 开发并打包完成后的App的程序包结构如图 开发者通过DevEco Studio把应用程序编译为一个或者多个.hap后缀的文件&#xff0c;即HAP一个应用中的.hap文件合在一起称为一个Bundle&#xff0c;bundleName是应用的唯一标识 需要特别说明的是&…

Unity针对XBOX,SWITCH,PS5手柄的适配踩坑

前言&#xff1a; 记录一点最近在做手柄适配问题的踩坑。 这里推荐一款Unity做手柄适配的插件->Rewired Rewired官方文档链接Rewired Documentation | Supported Controllers Rewired插件里面有个是Player类&#xff0c;这个类获取到当前玩家的输入设备&#xff0c;输入…

ruby3.2.2 报错 undefined symbol: EC_GROUP_new_curve_GF2m

一、执行ruby -ropenssl -e puts OpenSSL::OPENSSL_VERSION 查看openssl版本时报错 ruby -ropenssl -e puts OpenSSL::OPENSSL_VERSION 这是因为ruby内的openssl版本是3.2.0版本的 而自openssl3.0以后已经废弃 EC_GROUP_new_curve_GF2m了 二、解决方案 指定ruby内的openssl…

内测分发平台是否支持敏捷开发和持续集成?

大家好&#xff0c;我是咕噜-凯撒。敏捷开发和持续集成是软件开发中非常重要的流程和方法。内测分发平台作为应用开发和测试的关键环节需要具备这种能力。下面我简单的介绍一下敏捷开发和持续集成和提供的功能。图片来源&#xff1a;news.gulufenfa.com 敏捷开发是一种迭代、协…

分析:为什么有些pdf打开之后无法编辑?

pdf文件大家应该都经常接触&#xff0c;但是不知道大家会遇到这种情况&#xff1a;有些PDF文件打开之后无法编辑&#xff1f;是什么原因呢&#xff1f;今天我们来分析一下都是那些原因导致的。 首先我们可以考虑一下&#xff0c;PDF文件中的内容是否是图片&#xff0c;如果确认…

springcloud==openfeign

单独使用 创建一个服务端 import org.springframework.boot.SpringApplication; import org.springframework.boot.autoconfigure.SpringBootApplication; import org.springframework.web.bind.annotation.GetMapping; import org.springframework.web.bind.annotation.Path…

智能优化算法应用:基于猫群算法无线传感器网络(WSN)覆盖优化 - 附代码

智能优化算法应用&#xff1a;基于猫群算法无线传感器网络(WSN)覆盖优化 - 附代码 文章目录 智能优化算法应用&#xff1a;基于猫群算法无线传感器网络(WSN)覆盖优化 - 附代码1.无线传感网络节点模型2.覆盖数学模型及分析3.猫群算法4.实验参数设定5.算法结果6.参考文献7.MATLAB…

【傻瓜级JS-DLL-WINCC-PLC交互】3.JS-DLL进行交互

思路 JS-DLL-WINCC-PLC之间进行交互&#xff0c;思路&#xff0c;先用Visual Studio创建一个C#的DLL控件&#xff0c;然后这个控件里面嵌入浏览器组件&#xff0c;实现JS与DLL通信&#xff0c;然后DLL放入到WINCC里面的图形编辑器中&#xff0c;实现DLL与WINCC的通信。然后PLC与…

ArrayList 和 HashMap 源码解析

1、ArrayList 1.1、ArrayList 构造方法 无参创建一个 ArrayList 数组默认为空数组 transient Object[] elementData; private static final Object[] DEFAULTCAPACITY_EMPTY_ELEMENTDATA {}; private int size; // 数组容量大小public ArrayList() {this.elementData DEFA…

别太担心,人类只是把一小部分理性和感性放到了AI里

尽管人工智能&#xff08;AI&#xff09;在许多方面已经取得了重大进展&#xff0c;但它仍然无法完全复制人类的理性和感性。AI目前主要侧重于处理逻辑和分析任务&#xff0c;而人类则具有更复杂的思维能力和情感经验。 人类已经成功地将一些可以数据化和程序化的理性和感性特征…

传智杯-题目1

运气 一&#xff1a;对于每一的1到6都进行枚举&#xff0c;进行递归操作 二&#xff1a;如果位数到了指定的n的时候&#xff0c;递归的条件&#xff0c;进行判断是否可以整除操作 #include<iostream> #include<algorithm> using namespace std; long long n, k, an…