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 ...
随机推荐
- BZOJ 1688: Disease Manangement (子集枚举)
Disease Manangement Q - 枚举子集 Time Limit:1000MS Memory Limit:65536KB 64bit IO Format:%I64d &a ...
- Github 上利用github pages 部署站点
一:起始 准备项目,如果你在github上已有项目,则无需新建,如果你要新起一个项目,则需先在github上创建一个项目 本文以已创建好的 github/TestGitPage 为例. 二:设置gi ...
- Spring ApplicationContext的国际化支持
ApplicationContext接口继承MessageSource接口,因此具备国际化功能.下面是MessageSource接口定义的三个国际化方法. >String getMessage( ...
- Hibernate的查询语言之HQL(一)——快速入门
Hibernate提供异常强大的查询体系,使用Hibernat有多种查询方式可以选择:即可以使用Hibernate的HQL查询,也可以使用条件查询,甚至可以使用原生的SQL查询语句.不仅如此, Hib ...
- led驅動芯片對LED燈具的要求
1.LED驅動芯片直流額定輸入電壓范圍應當8 - 40 v,覆蓋廣泛的應用需求.最好的壓縮能力大于45 v.當輸入交流12 v.24 v,簡單的橋式整流器輸出電壓可以遵循電網電壓波動,特別是在高電壓輸 ...
- (2015年郑州轻工业学院ACM校赛题)I 旋转图像
矩阵旋转,写一个转 90° 的函数就行了, 注意每次要将 长和宽的值进行交换就行了. #include<stdio.h> #include<iostream> #include ...
- Path Sum II——LeetCode
Given a binary tree and a sum, find all root-to-leaf paths where each path's sum equals the given su ...
- 关于SQL的Group By
SELECT col1, col2, col3, sum(col3) from T1 GROUP BY col1, col2, col3, col4 ; 对于含有Group By的Sql语句,需要注意 ...
- Spice代码阅读一:Spice Client 与 Spice Server 通道建立过程
文件 方法 描述 Application.cpp init_globals() 初始化Log,ssl库,canvas(或opengl canvas)和quic压缩库 Process_cmd_line( ...
- spring3.1的BeanFactory与Quartz1.8整合
spring的applicationContext.xml配置文件: 加入 <bean id="myJob" class="org.springframework. ...