ES6&ES5实现观察者模式(发布订阅者模式)

本文链接：https://blog.youkuaiyun.com/HCJS_Zee/article/details/83419803

本文探讨如何在JavaScript中利用ES6和ES5实现观察者模式，特别是通过Node.js中的事件监听机制来理解这一设计模式的应用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

ES6

class Observer{
	constructor(){
		this.handle = [];
	}
	addSubscribe(topic, fn) {
		this.handle.push({topic: topic, fn: fn});
		console.log(this.handle);
	}
	removeSubscribe(topic, fn) {
		let index;
		this.handle.forEach(function(data, i) {
			if(data.topic == topic && data.fn == fn){
				index = i;
			}
		});
		delete this.handle[index];
		console.log(this.handle);
	}
	publish(topic, message) {
		this.handle.forEach(function(data) {
			if(data.topic == topic) {
				data.fn(message);
			}
		})
	}
}

ES5

在nodejs中通过EventEmitter实现了原生的对于这一模式的支持。在JavaScript中事件监听机制就可以理解为一种观察者模式

function PubSub() {
	this.handlers = {};
}
PubSub.prototype = {
	//订阅事件
	on: function(eventType, handler) {
		var self = this;
		if(!(eventType in self.handlers)) {
			self.handlers[eventType] = [];
		}
		self.handlers[eventType].push(handler);
		return this;
	},
	//触发事件（发布事件）
	emit: function(eventType) {
		var self = this;
		var handlerArgs = Array.prototype.slice.call(arguments, 1);
		for(var i = 0; i < self.handlers[eventType].length; i++) {
			self.handlers[eventType][i].apply(self,handlerArgs);
		}
		return self;
	},
	//删除订阅事件
	off: function(eventType, handler){
		var currentEvent = this.handlers[eventType];
		var len = 0;
		if(currentEvent) {
			len = currentEvent.length;
			for(var i = len - 1; i >= 0; i--){
				if(currentEvent[i] === handler) {
					currentEvent.splice(i,1);
				}
			}
		}
		return this;
	}
};

var pubsub = new PubSub();
var callback = function(data) {
	console.log(data);
};

//订阅事件A
pubsub.on('A', function(data){
    console.log(1 + data);
});
pubsub.on('A', function(data){
    console.log(2 + data);
});
pubsub.on('A', callback);
//触发事件A
pubsub.emit('A', '我是参数');
//删除事件A的订阅源callback
pubsub.off('A', callback);
pubsub.emit('A', '我是第二次调用的参数');