Vue.js响应式原理(三)——发布订阅模式和观察者模式

发布/订阅模式

  • 订阅者
  • 发布者
  • 信号中心

我们假定,存在一个“信号中心”,某个任务执行完成,就向信号中心发布(publish)一个信号,其他任务可以向信号中心订阅(subscribe)这个信号,从而知道什么时候自己可以开始执行。这就叫做“发布/订阅模式”(publish-subscribe pattern)

常见的发布/订阅模式:Vue
的自定义事件、node的事件处理机制。


let vm = new Vue()
vm.$on('dataChange', () => { console.log('dataChange')
})
vm.$on('dataChange', () => { console.log('dataChange1')
}) vm.$emit('dataChange')

在vue中vue实例既是发布者,也是订阅者,又是消息中心。

  • 兄弟组件通信过程:

// eventBus.js
// 事件中心
let eventHub = new Vue()
// ComponentA.vue
// 发布者
addTodo: function () {
// 发布消息(事件)
eventHub.$emit('add-todo', { text: this.newTodoText }) this.newTodoText = ''
}
// ComponentB.vue
// 订阅者
created: function () {
// 订阅消息(事件)
eventHub.$on('add-todo', this.addTodo) }

模拟vue中的事件发布机制(发布定义模式)

  • 分析:
  1. 定义一个事件发布机制类
  2. 具有$emit方法用于发布事件,会执行。
  3. 具有$on方法用于订阅事件,可以多次订阅相同事件,订阅时不会执行方法
  • 实现:

<!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>
    <script>
      
      class EventEmitter {
        constructor() {
					// 用于存储所有的注册事件
          this.subs = Object.create(null);
        }
        // 注册事件
        $emit(eventType) {
					// 为了简便,不考虑参数的情况
          if (this.subs[eventType]) {
            this.subs[eventType].forEach((item) => {
              item();
            });
          }
        }
        // 触发事件
        $on(eventType, handler) {
          this.subs[eventType] = this.subs[eventType] || [];
          this.subs[eventType].push(handler);
        }
      }

      // 测试
      let em = new EventEmitter();
      em.$on("click", () => {
        console.log("click1");
      });
      em.$on("click", () => {
        console.log("click2");
      });

      em.$emit("click");
    </script>
  </body>
</html>

观察者模式

  • 观察者(订阅者)-watcher

    • update():当事件发生时,具体要做的事情
  • 目标(发布者) – Dep

    • subs 数组:存储所有的观察者
    • addSub():添加观察者 notify():当事件发生,调用所有观察者的 update() 方法
  • 没有事件中心

  • 常用场景:Vue.js的响应机制中使用了观察者模式。

模拟vue的响应机制(观察者模式)

  • 分析:

1.定义一个发布者响应类和一个观察者订阅类
2.具有addSub方法用于新增订阅后将方法添加到subs数组中
3.具有notify方法用于发布后通知所有订阅者调用他们的update方法

  • 实现:

<!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>
	<script>
		
		// 发布者-目标
    class Dep {
      constructor () {
        // 记录所有的订阅者
        this.subs = []
      }
      // 添加订阅者
      addSub (sub) {
        if (sub && sub.update) {
          this.subs.push(sub)
        }
      }
      // 发布通知
      notify () {
        this.subs.forEach(sub => {
          sub.update()
        })
      }
    }
    // 订阅者-观察者
    class Watcher {
      update () {
        console.log('update')
      }
    }

    // 测试
    let dep = new Dep()
    let watcher = new Watcher()

    dep.addSub(watcher)

    dep.notify()

	</script>
</body>
</html>

发布订阅模式与观察者模式对比

  • 观察者模式是由具体目标调度,比如当事件触发,Dep 就会去调用观察者的方法,所以观察者模
    式的订阅者与发布者之间是存在依赖的。

  • 发布/订阅模式由统一调度中心调用,因此发布者和订阅者不需要知道对方的存在。事件中心隔离了发布者与订阅者,减少了互相依赖的关系。
    Vue.js响应式原理(三)——发布订阅模式和观察者模式_第1张图片

你可能感兴趣的:(vue,vue.js,javascript,前端)