javaScript 自定义事件、发布订阅设计模式
现在很多应用都允许用户根据自己的喜好订阅一些自己较为关注的信息,当应用更新了这些信息后将针对不同的订阅类型推送此类信息。例如xx招聘网,当你订阅了互联网IT技术相关分类的招聘信息推送后,当企业在该网站发布互联网IT技术相关的招聘信息后,你就能收到该招聘网的推送信息,就可以很轻松的得到你感兴趣的信息,而不会被其他一些乱七八糟的信息浪费时间。
在这里涉及了三个不同类的事物,1,你(消息订阅者);2,企业(消息发布者);3,招聘网(中介,联系发布者与订阅者的桥梁);
定义消息发布平台
function EventTarget() {
this.handlers = {};
}
EventTarget.prototype = {
constructor : EventTarget,
//订阅消息
addHandler : function(type, handler) {
if (typeof this.handlers[type] == "undefined") {
this.handlers[type] = [];
}
this.handlers[type].push(handler);
},
//发布消息
fire : function(event) {
if (!event.target) {
event.target = this;
}
if (this.handlers[event.type] instanceof Array) {
var handlers = this.handlers[event.type];
for (var i = 0, len = handlers.length; i < len; i++) {
handlers[i](event);
}
}
},
//取消订阅
removeHandler : function(type, handler) {
if (this.handlers[type] instanceof Array) {
var handlers = this.handlers[type];
for (var i = 0, len = handlers.length; i < len; i++) {
if (handlers[i] === handler) {
break;
}
}
handlers.splice(i, 1);
}
}
};
订阅与发布
var btn1 = document.getElementById("test1");
var etarget = new EventTarget();
function handler1(event){
alert("handler1:" + JSON.stringify(event));
};
function handler2(event){
alert("handler2:" + JSON.stringify(event));
};
//订阅
etarget.addHandler("msgType", handler1);
etarget.addHandler("msgType", handler2);
//点击按钮触发发布消息(触发事件)
btn1.addEventListener("click", function(){
var event = {};
event.type = "msgType";
event.msg = "this is a custom event's message ."
etarget.fire(event);
}, false);
javaScript 自定义事件、发布订阅设计模式的更多相关文章
- javascript 自定义事件 发布-订阅 模式 Event
* javascript自定义事件 var myEvent = document.createEvent("Event"); myEvent.initEvent("myE ...
- 模块(类)之间解耦利器:EventPublishSubscribeUtils 事件发布订阅工具类
如果熟悉C#语言的小伙伴们一般都会知道委托.事件的好处,只需在某个类中提前定义好公开的委托或事件(委托的特殊表现形式)变量,然后在其它类中就可以很随意的订阅该委托或事件,当委托或事件被触发执行时,会自 ...
- Javascript事件模型系列(四)我所理解的javascript自定义事件
被我拖延了将近一个月的javascript事件模型系列终于迎来了第四篇,也是我计划中的最后一篇,说来太惭愧了,本来计划一到两个星期写完的,谁知中间遇到了很多事情,公司的个人的,搞的自己心烦意乱浮躁了一 ...
- 理解的javascript自定义事件
理解的javascript自定义事件 被我拖延了将近一个月的javascript事件模型系列终于迎来了第四篇,也是我计划中的最后一篇,说来太惭愧了,本来计划一到两个星期写完的,谁知中间遇到了很多事情, ...
- javascript中的发布订阅模式与观察者模式
这里了解一下JavaScript中的发布订阅模式和观察者模式,观察者模式是24种基础设计模式之一. 设计模式的背景 设计模式并非是软件开发的专业术语,实际上设计模式最早诞生于建筑学. 设计模式的定义是 ...
- JavaScript实现的发布/订阅(Pub/Sub)模式
JavaScript实现的发布/订阅(Pub/Sub)模式 时间 2016-05-02 18:47:58 GiantMing's blog 原文 http://giantming.net/java ...
- Javascript中理解发布--订阅模式
Javascript中理解发布--订阅模式 阅读目录 发布订阅模式介绍 如何实现发布--订阅模式? 发布---订阅模式的代码封装 如何取消订阅事件? 全局--发布订阅对象代码封装 理解模块间通信 回到 ...
- [转] Javascript中理解发布--订阅模式
发布订阅模式介绍 发布---订阅模式又叫观察者模式,它定义了对象间的一种一对多的关系,让多个观察者对象同时监听某一个主题对象,当一个对象发生改变时,所有依赖于它的对象都将得到通知. 现实生活中的发布- ...
- 【转】Javascript中理解发布--订阅模式
Javascript中理解发布--订阅模式 阅读目录 发布订阅模式介绍 发布---订阅模式又叫观察者模式,它定义了对象间的一种一对多的关系,让多个观察者对象同时监听某一个主题对象,当一个对象发生改变时 ...
- Blazor+Dapr+K8s微服务之事件发布订阅
我们要实现的是:在blazorweb服务中发布一个事件,并传递事件参数,然后在serviceapi1服务中订阅该事件,接收到blazorweb服务中发布的事件和参数. 1 在blazo ...
随机推荐
- How to create Managed Metadata Column
This article introduce how to create/use managed metadata column from List. First, we need to config ...
- 关于windows service不能访问网络共享盘(NetWork Drive)的解决方案
我映射一个网络驱动器到本机的时候,发现本机的程序直接能访问读取网络驱动器,但是把本机的程序作为本机的windows服务运行的时候就不能访问了. Qt中的QDir::exist(folder)访问失败. ...
- 【HDOJ】1348 Wall
计算几何-凸包模板题目,Graham算法解. /* 1348 */ #include <iostream> #include <cstdio> #include <cst ...
- 【HDOJ】1277 全文检索
AC自动机,静态数组,动态分配TLE. /* 1277 */ #include <iostream> #include <cstdio> #include <cstrin ...
- Delphi 写日志的类
unit uProgLog; interface uses Windows, SysUtils, SyncObjs; const C_LOG_LEVEL_TRACE = $; C_LOG_LEVEL_ ...
- Python中利用xpath解析HTML
在进行网页抓取的时候,分析定位html节点是获取抓取信息的关键,目前我用的是lxml模块(用来分析XML文档结构的,当然也能分析html结构), 利用其lxml.html的xpath对html进行分析 ...
- Hive学习笔记【转载】
本文转载自:http://blog.csdn.net/haojun186/article/details/7977565 1. HIVE结构 Hive 是建立在 Hadoop 上的数据仓库基础构架. ...
- 主持汇 - NEXT
主持汇 - NEXT 一个汇聚婚礼主持人才的平台
- windows快捷键和命令
以管理员方式打开命令行界面:win+X+A 打开服务界面:services.msc 删掉windows系统记住的WIFI密码 cmd下面运行 显示存储的无线连接netsh wlan show prof ...
- Jenkins,Maven及TestNG在自动化测试的应用(转)
转自:http://qa.blog.163.com/blog/static/190147002201581634549893/ 希望实现的场景:Jenkins中的Job可针对不同浏览器,不同环境,运行 ...