发布订阅模式

发布订阅者模式

体现在Vue中典型的发布订阅模式就是兄弟间传参。
发布订阅例子：

<script>
  	//创建一个事件类
    class Event {
      //这个字面量对象（clientlist）用来储存【事件】和【事件对应的执行函数】
      clientlist = {}
      //$on就相当于是订阅者，它的作用就是往clientlist对象里面追加事件和该事件对应的执行函数
      $on = function (eventName, callback) {
        if (!this.clientlist[eventName]) {
          this.clientlist[eventName] = [callback]
        } else {
          this.clientlist[eventName].push(callback)
        }
      }
 	  //$emit就相当于发布者（执行者），它的作用就是触发订阅者追加的事件和对应的函数
      $emit = function (eventName, val) {
        if (!this.clientlist[eventName]) {
          return false
        }
        this.clientlist[eventName].forEach((callback) => {
          callback(val)
        })
      }
    }
 
    const event = new Event()
 
    // 订阅事件
    event.$on('onGetMsg', function (msg) {
      console.log(msg)
    })
 	//订阅事件
    event.$on('onGetMsg', function (msg) {
      console.log(msg)
    })
    //触发已经订阅的事件
    event.$emit('onGetMsg', { color: 'red' })
</script>

观察者模式

当事件触发，Dep就会去调用观察者的方法，所以观察者模式的订阅者与发布者之间是存在 依赖的。

<script>
	//目标（发布者）
	class Dep{
		constructor(){
			this.subs = [];
		}
		addSub(sub){
			(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>

【观察者模式】和【发布订阅者模式】的区别

设计模式	观察者模式	发布订阅模式
主体	Object观察者、Subject目标对象	Publisher发布者、Event Channel事件中心、Subscribe订阅者
主体关系	Subject中通过observerList记录ObServer	Publisher和Subscribe不想不知道对方，通过中介联系
优点	角色明确，Subject和Object要遵循约定的成员方法	松散耦合，灵活度高，通常应用在异步编程中
缺点	紧耦合	当事件类型变多时，会增加维护成本
使用案例	双向数据绑定	事件总线EventBus