一个很是简单的-发布订阅模式

时间 2020-03-05

标签一个很是简单发布订阅模式繁體版

原文原文链接

使用方法

./index.htmljavascript

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
  <button class="emit">$emit 发布信息</button>
  <button class="off">$off 解绑事件</button>
  <script src="./bus.js"></script>
  <script> let bus = new Bus console.log(bus) // 订阅 console.log('订阅事件test') bus.$on('test', function(arg) { console.log('$on:', arg) }) let emit = document.querySelector('.emit') let off = document.querySelector('.off') // 发布 emit.addEventListener('click', () => { bus.$emit('test', 'emit发布的信息') }) // 解绑 off.addEventListener('click', () => { bus.$off('test') console.log('解绑事件成功') }) </script>
</body>
</html>
复制代码

实现过程

./bus.jshtml

class Bus {
  constructor () {
    this.callbacks = {} // 回调队列
  }
  $on (key, fn) {
    this.callbacks[key] = fn  // 订阅，将对应的事件回调保存到回调队列中
  }
  $emit (name, args = null) {
    if (this.callbacks[name]) {
      this.callbacks[name](args) // 触发回调函数， 并传递参数
    } else {
      throw Error ('事件不存在')
    }
  }
  $off (name) {
    delete this.callbacks[name] // 删除事件队列对应的事件
  }
}
复制代码

用js实现了一个简单的发布订阅者模式；vue

vue中的 EventBus 就是这种原理，实现兄弟组件间进行通讯；java

vue也自带了$on $emit这对方法，提供事件的派发与监听，因此对外暴露一个 new Vue()就能够调用vue自身的$on $emit进行组件间通信了。面试

最后来一道‘面试题’考考各位...函数

if ('看懂了') {
        console.log('点赞')
    } else {
        console.log('收藏慢慢看')
    }
    // 输出什么？
复制代码