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 ...
随机推荐
- 水仙花 AC 杭电
水仙花数 Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others) Total Submi ...
- javasript生成 uuid的几种算法分享
方式一 function uuid() { var s = []; var hexDigits = "0123456789abcdef"; for (var i = 0; i &l ...
- JQ——选择器
选择器 实例 选取 * $("*") 所有元素 #id $("#lastname") id="lastname" 的元素 .class $( ...
- Andoird 监听开机广播和关机广播
需求:有时候,我们需要自己的程序在开机后自动运行;在关机时,记录一些信息到文件中. 一.开机广播监听Android系统启动完成后会自动发出启动完成广播(android.intent.action.BO ...
- 【Java】环境变量的配置
注意点 1.环境变量不能有空格,比如C:\Program Files 2.JAVA_HOME:D:\Java\jdk1.7.0_67------------->注意不能加;分号
- 7816的报文结构APDU
命令APDU 包括头和主体(这可以在上面的图中看到).头包括CLA,INS,P1 和P2 域.同T0 协议一样,CLA 和INS 说明了应用的分类和指令.P1 和P2 用来详细说明具体指令,并由每一条 ...
- SIM卡读卡器的研究与设计
SIM卡(Subscriber Identity Module).即用户识别模块,是一张符合GSM规范的"智慧卡".SIM卡可以插入任何一部符合GSM规范的移动电话中," ...
- mybatis insertUseGeneratedKeys
mybatis中的一个坑:预期:传入的Record中会生动填入在db中生成的id值. 使用 insertUseGeneratedKeys插入数据时,如果id字段不是AUTO_INCREMENT,则不 ...
- java签名证书
import java.io.FileInputStream; import java.security.KeyStore; import java.security.PrivateKey; impo ...
- bzoj3028食物
http://www.lydsy.com/JudgeOnline/problem.php?id=3028 好吧,这是我第一道生成函数的题目. 先搞出各种食物的生成函数: 汉堡:$1+x^2+x^4+. ...