JavaScript观察者模式(publish/subscribe)原理与实现方法
作者:柒青衿 时间:2024-04-10 10:44:15
本文实例讲述了JavaScript观察者模式(publish/subscribe)原理与实现方法。分享给大家供大家参考,具体如下:
观察者模式又叫做发布订阅模式,它定义了一种一对多的关系,让多个观察者对象同时监听某一个主题对象,这个主题对象的状态发生改变时就会通知所有观察着对象。它是由两类对象组成,主题和观察者,主题负责发布事件,同时观察者通过订阅这些事件来观察该主体,发布者和订阅者是完全解耦的,彼此不知道对方的存在,两者仅仅共享一个自定义事件的名称。
在Nodejs中通过EventEmitter实现了原生的对于这一模式的支持。在JavaScript中事件监听机制就可以理解为一种观察者模式。
下面给出一个JS自定义的PubSub,仔细阅读下面这段代码有助于你理解观察者模式。相关代码请查看github。
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', '我是第二次调用的参数');
运行结果。
希望本文所述对大家JavaScript程序设计有所帮助。
标签:JavaScript,观察者模式
![](/images/zang.png)
![](/images/jiucuo.png)
猜你喜欢
ubuntu安装mysql数据库方法
2024-01-13 06:33:53
![](https://img.aspxhome.com/file/2023/9/126279_0s.jpg)
Python中matplotlib如何改变画图的字体
2023-02-19 16:46:38
![](https://img.aspxhome.com/file/2023/9/127589_0s.png)
php flv视频时间获取函数
2023-09-04 13:41:48
简化ADO数据库操作的控件(带分页功能)
2008-05-20 13:15:00
MySQL性能优化之一条SQL在MySQL中执行的过程详解
2024-01-24 13:34:00
![](https://img.aspxhome.com/file/2023/7/105687_0s.jpg)
python基础知识小结之集合
2021-07-14 23:34:54
python每天定时运行某程序代码
2023-11-03 07:03:52
Python+decimal完成精度计算的示例详解
2022-09-18 11:07:35
查看 MySQL 已经运行多长时间的方法
2024-01-14 09:57:05
python3+PyQt5 实现Rich文本的行编辑方法
2023-09-29 14:37:47
python迭代dict的key和value的方法
2021-11-03 16:04:17
Django1.11自带分页器paginator的使用方法
2021-07-04 12:44:23
Python中的枚举函数enumerate()的具体用法
2022-06-03 13:33:31
![](https://img.aspxhome.com/file/2023/3/120603_0s.png)
Django+python服务器部署与环境部署教程详解
2023-01-29 15:16:22
![](https://img.aspxhome.com/file/2023/9/81669_0s.png)
网页设计中HTML常范的五个错误
2008-04-22 18:14:00
Go整合captcha实现验证码功能
2024-04-26 17:29:43
![](https://img.aspxhome.com/file/2023/9/134029_0s.png)
用注解编写创建表的SQL语句
2024-01-14 01:51:11
![](https://img.aspxhome.com/file/2023/3/88273_0s.jpg)
Gradio机器学习模型快速部署工具接口状态
2023-08-11 13:36:27
![](https://img.aspxhome.com/file/2023/7/62847_0s.png)
Python中的Decorator装饰器的使用示例
2023-07-02 10:37:44
Golang CSP并发机制及使用模型
2023-09-15 16:13:27
![](https://img.aspxhome.com/file/2023/4/101674_0s.jpg)