一個很是簡單的-發佈訂閱模式

時間 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('收藏慢慢看')
    }
    // 輸出什麼？
複製代碼

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。