https://blog.csdn.net/sinat_41871344/article/details/82708684
https://www.cnblogs.com/null11/p/7498820.html
https://zhuanlan.zhihu.com/p/144832214
https://blog.csdn.net/csdnnews/article/details/107273877

UML类图

image.png

发布订阅代码实现

设计一个发布订阅模块

  1. class Subscribe {
  3. }

jquery发布订阅

$.Callbacks()

  • add
  • remove
  • fire

  • once

    1. (function() {
    2. class Subscribe {
    3.   constructor() {
    4.     // 创建一个事件池，用来存储后面需要执行的方法
    5.     this.pond = []
    6.   }
    8.   // 向事件池中添加方法
    9.   add (func) {
    10.     if(typeof func !== 'function') return
    12.     // 重复处理
    13.     const include = this.pond.some(item => item === func)
    14.     if(!include) this.pond.push(func)
    15.   }
    17.   // 把事件池中的方法，按照顺序依次执行
    18.   emit(...args) {
    19.     const { length } = this.pond
    21.     for (let i = 0;i < length;i++) {
    22.       const item = this.pond[i]
    24.       if (typeof item !== 'function') {
    25.         // 如果当前项不是函数，直接删除当前项，跳过当前循环
    26.         this.pond.splice(i, 1)
    27.         i--;
    28.         continue;
    29.       }
    30.       // 三个以上的参数，call性能好于 apply
    31.       item.call(this, ...args)
    32.     }
    33.   }
    35.   once(func) {
    36.     if(typeof func !== 'function') return
    38.     func()
    39.     this.remove(func)
    40.   }
    42.   // 从事件池中删除方法
    43.   off(func) {
    44.     this.pond
    45.   }
    46. }
    48. // return 实例，暴露接口
    49. return () => new Subscribe()
    50. })()

    使用发布订阅模式 ```javascript const sub = new Subscribe()

// 创建事件池 const pond = subscribe()

document.querySelect(‘.submit’).onclick = function(ev) { pond.emit(ev) } ```

数组塌陷问题

删除一个后，原有数组的每一项都向前移动了一位，
但还是按照原来的顺序循环，导致中间的某几项直接跳过，
jquery3.x修复了跳过的bug
image.png