js手写一个最简单的发布订阅订阅发布模式（Publish-Subscribe Pattern）是一种行之有效的解耦框架与

订阅发布模式（Publish-Subscribe Pattern）是一种行之有效的解耦框架与业务逻辑的方式，也是一种常见的观察者设计模式，它被广泛应用于事件驱动架构中。

在这个模式中，发布者（或者说是主题）并不直接发送消息给订阅者，而是通过调度中心（或者叫消息代理）来传递消息。发布者（或者说是主题）并不知道订阅者的存在，而订阅者也不知道发布者的存在。他们彼此唯一的关系就是在调度中心注册成为订阅者或者发布者。

当一个发布者有新消息时，就将这个消息发布到调度中心。调度中心就会将这个消息通知给所有订阅者。这就实现了发布者和订阅者之间的解耦，发布者和订阅者不再直接依赖于彼此，他们可以独立地扩展自己。

发布订阅模式首先需要三个核心： 1.发布订阅中心：是所有发布订阅的记录 2.订阅：注册方法在中心 3.发布：执行所有订阅的方法

最后还需要一个取消订阅的方法可以在订阅的方法中返回回去

<body style="position: relative; height: 100vh;">
  <button onclick="a1()">
    1.订阅事件myEvent，打印 1+ 接收到的数据
  </button>
  <br>
  <button onclick="a2()">
    2.发布事件myEvent，发送数: frst
  </button>
  <br>
  <button onclick="a3()">
    3.再次订阅事件myEvent，打印2+接收到的数据
  </button>
  <br>
  <button onclick="a4()">
    4.再次发布事件myEvent，发送数据: second
  </button>
  <br>
  <button onclick="a5()">
    5移除事件myEvent
  </button>
  <br>
  <button onclick="a6()">
    6.发布事件myEvent，发送数据: third验
  </button>
  <br>

  <div id="response" style="height: 500px;width:500px; background-color: aliceblue;">
  </div>

</body>

<script>

  // 发布订阅中心
  var events = {}
  // 订阅
  function subscribe(fucName, fuc) {
    events[fucName] = fuc
  }

  // 发布
  function publish(arg) {
    for (var key in events) {
      if (Object.hasOwnProperty.call(events, key)) {
        var func = events[key];
        func(arg)
      }
    }
  }

  // 移除事件
  function remove(fucName) {
    if (Object.hasOwnProperty.call(events, fucName)) {
      delete events[fucName]
    }
  }

  function a1() {
    subscribe('myEvent', function (data) {
      document.getElementById('response').innerText+=1 + data
    })
  }
  function a2() {
    publish('frst')
  }

  function a3() {
    subscribe('myEvent', function (data) {
      document.getElementById('response').innerText+=2 + data
    })
  }

  function a4() {
    publish('second')
  }

  function a5() {
    remove('myEvent')
  }

  function a6() {
    publish('third')
  }

</script>