js中的设计模式

设计模式

代码整体的结构会更加清楚,管理起来会更加方便,更好地维护

设计模式是一种思想

发布订阅

模块化开发 导入很多模块

容器即数组存储未来要执行的方法,同addEventListener

数组塌陷问题*

由于删除了元素,导致从删除元素的位置开始之后的每一项索引向前递进的问题。

如果还像开始一样索引递增+1,那么就会产生某些元素被跳过的现象

(function (){
      let listeners={}
      function checkName(name){
          if(typeof name !== 'string') throw new Error('name must be a string!')
      }
      function checkFunc(func){
          if(typeof func !== 'function') throw new Error('callback must be a function!')
      }
      const on=function (name,func){
          checkName(name)
          checkFunc(func)
          if(!listeners.hasOwnProperty(name)) listeners[name]=[]
          let pond=listeners[name]
          if(!pond.includes(func)){
              pond.push(func)
          }      }
      const off=function (name,func){
          checkName(name)
          checkFunc(func)
          if(!listeners.hasOwnProperty(name)) return;
          let pond=listeners[name]
          let index=pond.indexOf(func)
          if(index>-1){
              pond[index]=null;
          }
      }
      const emit=function (name,...args){
          checkName(name)
          let pond=listeners[name]
          if(!pond) return;
          for(let i=0;i
              let fn=pond[i]
              if(typeof fn !== 'function'){
                  pond.splice(i,1)
                  i--;
                  continue;
              }
              // fn执行
              fn(...args)          }      }
      window.$subscribe={
          on,
          off,
          emit
      }  })()
  const fn1=function (){
      console.log('fn1');
  }
  const fn2=function (){
      console.log('fn2');
      $subscribe.off('success',fn1)
      $subscribe.off('success',fn2)
  }
  const fn3=function (){
      console.log('fn3');
  }
  const fn4=function (){
      console.log('fn4');
  }
  $subscribe.on('success',fn1)
  $subscribe.on('success',fn2)
  $subscribe.on('success',fn3)
  $subscribe.on('success',fn4)
  $subscribe.emit('success')

OOP设计模式

函数式编程不能中止中间不能结束,也不能控制循环的步骤

发布订阅设计思想:

vue中父子组件$emit/$on通信,react中redux中公共状态改变通知各个组件执行,好几个地方加入一些方法,某个阶段把它们统一执行,而加入的方法并没有在同一个js中,这个时候就使用发布订阅。

观察者模式

两个对象:观察者和目标

目标:订阅一些方法和通知方法执行

观察者update,每个观察者执行update

把之前函数=>观察者,往事件池中加的是观察者,每个观察者都有一个结构

区别:

加入的是观察者,而不是一个函数。而通知也是通知observer.update执行。

核心思路:

都有个容器,把要呼叫的东西放进去到达时间以后通知执行

先放个容器,把所有东西订阅进去或移除订阅,以后再通知执行fire/notify

发布订阅是加方法,观察者是加观察者实例。发布订阅是直接通知方法,而观察者是通知观察者实例执行update。

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

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

相关文章

数据库知识-事务

数据库知识-事务 当处理数据库中的多个操作时,事务是一个关键的概念,它确保这些操作要么全部成功执行,要么全部回滚到初始状态,以保持数据的一致性。在SQL中,事务具有四个关键属性(ACID)&#…

4.Makefile使用自动推导(附示例)

一、Makefile自动推导理解 在Makefile中,自动推导是通过一些内置规则(implicit rules)来实现的。这些内置规则定义了一些常见的编译和链接操作,用于根据文件的扩展名自动推导生成目标文件和可执行文件。 当make命令执行时,它会查找Makefile中的目标和依赖关系,并根据这…

easyui实用点

easyui实用点 1.下拉框(input框只能选不能手动输入编辑) data-options"editable:false"//不可编辑2.日期框,下拉框,文本框等class class"easyui-datebox"//不带时分秒 class"easyui-datetimebox"…

idea调节文字大小、日志颜色、git改动信息

idea调节菜单栏文字大小: 调节代码文字大小: 按住ctrl滚动滑轮可以调节代码文字大小: 单击文件即可在主窗口上打开显示: idea在控制台对不同级别的日志打印不同颜色 : “grep console”插件 点击某一行的时候&#x…

关于会议OA需求分析与开发功能设计

前言:现如今,企业在会议管理方面对OA系统的需求越来越高。因为会议是企业内部沟通和协作的重要环节,一个高效的会议管理系统可以帮助企业提升会议效率、降低成本,并且提高内部信息共享的效果。 目录 一,以下是OA系统在…

React从入门到实战-react脚手架,消息订阅与发布

创建项目并启动 全局安装 npm install -g create-react-app切换到想创建项目的目录,使用命令:create-react-app 项目名称 ​ [外链图片转存失败,源站可能有防盗链机制,建议将图片保存中…(iQ6hEUgAABpQAAAD1CAYAAABeIRZoAAAAAXNSR0IArs4c6QAAIABJREFUe…

[threejs]相机与坐标

搞清相机和坐标的关系在threejs初期很重要,否则有可能会出现写了代码,运行时一片漆黑的现象,这种情况就有可能是因为你相机没弄对。 先来看一下threejs中的坐标(世界坐标) 坐标轴好理解,大家只需要知道在three中不同颜色代表的轴…

ARM单片机中断处理过程解析

前言 中断,在单片机开发中再常见不过了。当然对于中断的原理和执行流程都了然于胸,那么对于ARM单片机中断的具体处理行为,你真的搞清楚了吗? 今天来简单聊一聊,ARM单片机中断处理过程中的具体行为是什么样的&#xf…

一张图像相当于 16×16 个单词:用于大规模图像识别的 Transformers(视觉 Transformers)

一张图片值多少字? 一张图片胜过千言万语?无法用言语完整地描述一幅图画。但论文告诉我们一张图像相当于 1616 个单词。在这篇博客中,我将解释使用 Transformer 进行图像识别。这是一篇非常有趣的论文, 这篇论文有什么特别之处? 它很特别,因为这里我们不会使用任何卷积网…

【Linux】配置java

yum -y install java-1.8.0-openjdk-devel.x86_64 可以直接使用 由于后续需要安装一些软件需要JAVA_HOME 所以需要配置JAVA_HOME 用yum下载的软件的目录是软连接的 which javals -lrt /usr/bin/javals -lrt /etc/alternatives/java /etc/profile 会自动加载/etc/profile.d…

vite+typescript项目 :找不到模块“./***.vue”或其相应的类型声明——解决方案

vue3ts报错&#xff1a; 找不到模块“./App.vue”或其相应的类型声明。ts(2307) 解决方法&#xff1a; 1、在src文件夹找到 vite-env.d.ts 加入以下代码&#xff1a; declare module *.vue {import type { DefineComponent } from vueconst vueComponent: DefineComponent<…

django使用ztree实现树状结构效果,子节点实现动态加载(l懒加载)

一、实现的效果 由于最近项目中需要实现树状结构的效果,考虑到ztree这个组件大家用的比较多,因此打算在django项目中集成ztree来实现树状的效果。最终实现的示例效果如下: 点击父节点,如果有子节点,则从后台动态请求数据,然后显示出子节点的数据。 二、实现思路 …

蓝桥杯上岸每日N题 第六期(求阶乘)!!!

蓝桥杯上岸每日N题第六期 ❗️ ❗️ ❗️ 同步收录 &#x1f447; 蓝桥杯上岸必背&#xff01;&#xff01;&#xff01;(持续更新中~) 大家好 我是寸铁&#x1f4aa; 冲刺蓝桥杯省一模板大全来啦 &#x1f525; 蓝桥杯4月8号就要开始了 &#x1f64f; 距离蓝桥杯省赛倒数…

AndroidBanner - ViewPager

解决banner 不可见依旧轮播的问题 思考一下&#xff1a;什么时候可以轮播&#xff0c;什么时候不可以轮播 当Banner添加到屏幕上&#xff0c;且对用户可见的时候&#xff0c;可以开始轮播 当Banner从屏幕上移除&#xff0c;或者Banner不可见的时候&#xff0c;可以停止轮播 当…

Kafka系列之:安装Know Streaming详细步骤

Kafka系列之:安装Know Streaming详细步骤 一、相关技术博客二、安装elasticsearch1.下载elasticsearch2.创建数据目录3.创建es用户4.修改最大文件数5.解压elasticsearch6.赋予es用户目录权限7.修改es配置8.切换es用户启动elasticsearch三、安装KnowStreaming1.下载KnowStreami…

电影推荐系统】系统初步搭建及离线个性化推荐

上篇博文我们已经写完统计推荐部分&#xff0c;现在我们将使用VueElement-uiSpringBoot来快速搭建系统&#xff0c;展示出电影&#xff0c;并介绍个性化推荐部分。 1 系统页面设计 初步是想设计一个类似豆瓣电影推荐系统 用户登陆后&#xff0c;可以查看高分电影可以查看推荐…

P2404 自然数的拆分问题

题目 思路 最简单的dfs题之一 只需要一点点小优化 代码 #include<bits/stdc.h> using namespace std; const int maxn55; int n; int ans[maxn],s; void print(int tot) { for(int i1;i<tot-1;i) cout<<ans[i]<<""; cout<<ans[tot-1]&…

微信小程序,商城底部工具栏的实现

效果演示&#xff1a; 前提条件&#xff1a; 去阿里云矢量图标&#xff0c;下载8个图标&#xff0c;四个黑&#xff0c;四个红&#xff0c;如图&#xff1a; 新建文件夹icons&#xff0c;把图标放到该文件夹&#xff0c;然后把该文件夹移动到该项目的文件夹里面。如图所示 app…

【Redis深度专题】「核心技术提升」探究Redis服务启动的过程机制的技术原理和流程分析的指南(集群指令分析—实战篇)

探究Redis服务启动的过程机制的技术原理和流程分析的指南&#xff08;集群指令分析—下篇&#xff09; Cluster XX的集群指令&#xff08;扩展&#xff09;写入记录主节点和备节点切换-CLUSTER FAILOVER新加入master节点新加入slave节点为slave节点重新分配master分配哈希槽删除…

jmeter之接口测试(http接口测试)

基础知识储备 一、了解jmeter接口测试请求接口的原理 客户端--发送一个请求动作--服务器响应--返回客户端 客户端--发送一个请求动作--jmeter代理服务器---服务器--jmeter代理服务器--服务器 二、了解基础接口知识&#xff1a; 1、什么是接口&#xff1a;前端与后台之间的…