设计模式 -- 发布订阅模式

发布订阅模式：
订阅者把自己想订阅的事件注册到调度中心，当发布者发布该事件到调度中心，也就是该事件触发时，由调度者统一调度订阅者注册到调度中心的处理代码。
在javaScript 中我们一般使用事件模型来代替传统的发布订阅模式。
在这里插入图片描述

结构：在发布订阅模式中，有一个中介者来管理发布者和订阅者之间的关系。
关系：发布者和订阅者不直接耦合，他们通过中间进行通信。发布者将消息发布给中介者，然后中介者将消息传递给所有的订阅者。
通知方式：订阅者通过向中介者注册感兴趣的事件或主题，中介者在收到消息后负责将消息分发给所有的订阅者。

可以广泛应用于异步编程中，这是一种替代传递回调函数的方案。
可以取代对象之间硬编码的通知机制，一个对象不能再显示地调用另外一个对象的某个接口。

从建构上看，无论是MVC还是MVVM.都少不了发布订阅模式的参与，而且javaScript本身也是一门基于事件驱动的语言。

简单理解：
DOM 事件， js简单的发布订阅模式

document.getElementById('myBtn').addEventListener('click', function() {
	alert('hellow word!')
})

简单的发布订阅模式

中介者
let e = {
	_callback: [],
	on(callback) {
		// 订阅一件事，当这件事发生时，触发相应的函数
		// 订阅就是将函数放到数组中
		this._callback.push(callback)
	},
	emit(value) {
		this._callback.forEach(method => {
			method(value)
		})
	}
}
// 订阅
e.on(function(value) {
	console.log(value + 'aa的订阅')
})
// 订阅
e.on(function(value) {
	console.log(value + 'bb的订阅')
})
// 发布
e.emit('发布')

自定义事件

let salesOffices = {
	clientList: {}
	listen(key, fn) {
		if (!this.clientList[key]) {
			this.clientList[key] = []
		}
		this.clientList[key].push(fn)
	},
	tigger() { // 发布消息
		let key = Array.prototype.shift.call(arguments) // 取出消息类型 取出实参
		let fns = this.clientList[key]

		if (!fns || fns.length === 0) {
			return false
		}
		
		for(let fn of fns) {
			fn.apply(this, arguments)  
		}
	}
}

// 例子
salesOffices.listen('squareMeter88', price => console.log(`价格 = ${price}`))
salesOffices.listen('squareMether110', price => console.log(`价格 = ${price}`))

salesOffices.trigger('squareMether88', 2000000)
salesOffices.trigger('squareMether110', 3000000)

通用的实现
通用的一种封装，实现了订阅、发布、取消

const event = {
	clientList: [],
	listen: function(key, fn) {
		if (!this.clientList[key]) {
			this.clientList[key] = []
		}
		this.clientList[key].push(fn)
	}
	trigger: function() {
		const key = Array.prototype.shift.call(arguments)
		const fns = this.clientList(key)
		
		if (!fns || fns.length === 0) {
			return false
		}
		for(let i = 0， fn; fn = fns[i++];) {
			fn.apply(this, arguments)
		}
	}
	remove: function(key, fn) {
		let fns = this.clientList[key];
		if (!fns) {
			return false
		}
		if (!fn) {
			fns && (fns.length = 0)
		} else {
			for(let i = fns.length -i; 1 >= 0; i-- ) {
				let _fn = fns[i]
				if (_fn === fn) {
					fns.splice(1,1)
				}
			}
		}
	} 
}
const installEvent = function( obj ){
    obj = { ...obj, ...event }
};

let salesOffices = {};
installEvent(salesOffices);

salesOffices.listen( 'squareMeter88', fn1 = function(price){    // 小明订阅消息
    console.log('价格= ' + price);
});

salesOffices.listen( 'squareMeter100', fn2 = function(price){     // 小红订阅消息
    console.log('价格= ' + price );
});

salesOffices.remove('squareMeter88', fn1);    // 删除小明的订阅

salesOffices.trigger('squareMeter88', 2000000);    // 输出：2000000
salesOffices.trigger('squareMeter100', 3000000);    // 输出：3000000

Veu中使用发布订阅
vue 提供了一个简单的事件系统，通过 vm.$emit 发布事件，vm.$on 订阅事件。这种机制类似于发布-订阅模式，允许组件之间进行松散耦合的通信。
在vue 中使用发布订阅模式的例子：
使用EventBus: 你可以创建一个简单的EventBus，用于在不同组件之间进行通信。

// EventBus.js
import Vue from 'vue'
export const EventBus = new Vue()

// componentsA.vue
import { EventBus } from  './EventBus'
export default {
	methods: {
		sendMessage() {
			EventBus.$emit('message', 'hello from ComponentA!')
		}
	}
}

// componentsB.vue
import { EventBus } from './EventBus'
export default {
	methods: {
		sendMessage() {
			EventBus.$on('message', message => {
				console.log('Reveived message in ComponentB:', message)
			})
		}
	}
}