js自写发布订阅模块

实现效果如下图所示：
在这里插入图片描述
代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <button id="count">点我</button>
  <button id="show"></button>

  <script>
    /*************  封装的发布订阅模块start  *************/
    var event = {
      clientList: {},
      //订阅
      listen: function(key, fn) {
        if (!this.clientList[key]) {
          this.clientList[key] = []
        }
        this.clientList[key].push(fn) //事件添加到clientList
      },
      //发布
      trigger: function() {
        var key = Array.prototype.shift.call(arguments),  //获取trigger()第一个参数 /订阅事件名
            fns = this.clientList[key]; //获取订阅事件名对应的事件
        if (!fns || fns.length === 0) {
          return false
        }
        for (var i = 0, fn; fn = fns[i++];) {
          fn.apply(this, arguments);  //一个一个执行
        }
      },
      //删除
      remove: function (key, fn) {
        var fns = this.clientList[ key ]
        if ( !fns ) { //是否有这个订阅的事件名
          return false
        }
        if ( !fn ) {  //2参没有值就全部清空该订阅事件
          fns && (fns.length = 0)
        } else {
          for (var l = fns.length - 1; l >= 0; l--) {
            var _fn = fns[l]
            if (_fn === fn) {
              fns.splice(l, 1)  //删除订阅着的回调函数
            }
          }
        }
      }
    }
    /*************  封装的发布订阅模块end  *************/

    //制造发布订阅函数
    var installEvent = function(obj) {
      for (var i in event) {
        obj[i] = event[i]
      }
    }

    //制造一个名为Event的发布订阅方法
    var Event = {}
    installEvent(Event)

    var a = (function () {
      var count = 0
      var button = document.getElementById('count')
      button.onclick = function () {
        //2. 当点击id=count按钮后发布执行add集合内所有的方法
        Event.trigger('add', count++)
      }
    })()

    var b = (function () {
      var div = document.getElementById('show')
      //1. 先在key为add的方法集合内订阅一个方法
      Event.listen('add', function(count) {
        div.innerHTML = count
      })
    })()
  </script>
</body>
</html>
舜岳
发布了218 篇原创文章 · 获赞 35 · 访问量 13万+
私信关注
js自写发布订阅模块

猜你喜欢
