js实现发布订阅

最新推荐文章于 2024-05-10 16:21:55 发布

零度碳酸-

最新推荐文章于 2024-05-10 16:21:55 发布

阅读量352

点赞数

分类专栏： js设计模式

本文链接：https://blog.csdn.net/weixin_41086056/article/details/116126521

版权

js设计模式专栏收录该内容

1 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>简单发布订阅</title>
</head>

<body>
  <!-- 
  在发布订阅模式中，有两个对象，一个是事件的发布者，一个是订阅者。
  简要思路：
    1.创建一个对象(缓存列表)
    2.on方法用来把回调函数fn都加到缓存列表中
    3.emit方法取到arguments里第一个当做key，根据key值去执行对应缓存列表中的函数
    4.remove方法可以根据key值取消订阅 
  -->
  <script>
    let event = {
      list: {},
      // 订阅事件
      on(key, fn) {
        // 如果对象中没有对应的key值
        // 也就是说明没有订阅过
        // 那就给key创建个缓存列表
        if (!this.list[key]) {
          this.list[key] = []
        }
        // 把函数添加到对应key的缓存列表里
        this.list[key].push(fn)
      },
      // 发布事件
      emit() {
        // 第一个参数是对应的key值,直接用数组的shift方法取出
        let key = [].shift.call(arguments),
          fns = this.list[key];
        // 如果缓存列表里没有函数就返回false
        if (!fns || fns.length === 0) {
          return false
        }
        // 遍历key值对应的缓存列表
        // 依次执行函数的方法
        fns.forEach(fn => {
          fn.apply(this, arguments)
        })
      },
      // 取消订阅事件
      remove(key, fn) {
        console.log('取消订阅事件');
        let fns = this.list[key];
        // 如果缓存列表中没有函数，返回false
        if (!fns) return false;
        // 如果没有传对应函数的话
        // 就会将key值对应缓存列表中的函数都清空掉
        if (!fn) {
          fns && (fns.length = 0);
        } else {
          // 遍历缓存列表，看看传入的fn与哪个函数相同
          // 如果相同就直接从缓存列表中删掉即可
          fns.forEach((cb, i) => {
            if (cb == fn) {
              fns.splice(i, 1)
            }
          })
        }
      }
    }

    function cat() {
      console.log('我是一只猫');
    }

    function dog() {
      console.log('我是旺财');
    }

    event.on('pet', data => {
      console.log(data);
    });
    event.on('pet', cat);
    event.on('pet', dog);
    // 取消dog方法的订阅
    event.remove('pet', dog);
    // 发布
    event.emit('pet', ['波斯猫1', '琵琶狗1'])
  </script>
</body>

</html>

// 触发事件两个参数（事件名，参数）
  emit (type, ...params) {
    // 若没有注册该事件则抛出错误
    if (!(type in this.handlers)) {
      return new Error('未注册该事件')
    }
    // 便利触发
    this.handlers[type].forEach(handler => {
      handler(...params)
    })
  }

零度碳酸-

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
js实现发布订阅

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>简单发布订阅<
复制链接

扫一扫