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。

相关推荐
蹦蹦跳跳真可爱58919 分钟前
Python----OpenCV(几何变换--图像平移、图像旋转、放射变换、图像缩放、透视变换)
开发语言·人工智能·python·opencv·计算机视觉
我血条子呢19 分钟前
动态组件和插槽
前端·javascript·vue.js
骁的小小站23 分钟前
HDLBits刷题笔记和一些拓展知识(十一)
开发语言·经验分享·笔记·其他·fpga开发
Jtti25 分钟前
如何准确查看服务器网络的利用率?
开发语言·php
前端付豪27 分钟前
13、表格系统架构:列配置、嵌套数据、复杂交互
前端·javascript·架构
人生在勤,不索何获-白大侠30 分钟前
day17——Java集合进阶(Collections、Map)
java·开发语言
南屿im33 分钟前
发布订阅模式和观察者模式傻傻分不清?一文搞懂两大设计模式
前端·javascript
JustHappy35 分钟前
SPA?MPA?有啥关系?有啥区别?聊一聊页面形态 or 路由模式
前端·javascript·架构
每天开心36 分钟前
🧙‍♂️闭包应用场景之--防抖和节流
前端·javascript·面试
程序员小羊!42 分钟前
Java教程:JavaWeb ---MySQL高级
java·开发语言·mysql