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 ...
随机推荐
- solr拼写检查代码逻辑
自定义的solr搜索系统作为web应用发布到tomcat后,运行过程中其搜索代码逻辑如下: 用户solr搜索应用发送搜索请求URL,solr应用的org.apache.solr.servlet.Sol ...
- ExtJS 4 组件详解
ExtJS 4 的应用界面是由很多小部件组合而成的,这些小部件被称作"组件(Component)",所有组件都是Ext.Component的子类,Ext.Component提供了生 ...
- centos7 install jdk
setp1: remove default java [lhs@localhost soft]$ rpm -qa | grep javajava-1.7.0-openjdk-1.7.0.75-2.5. ...
- JAVA简单的UI设计
手写代码,还是痛苦点,但对布局有再深入的流程理解, 全IDE会更快速.. package SwingGui.sky.com; import javax.swing.*; import java.awt ...
- Keil C51中变量和函数的绝对地址定位问题
1.变量绝对地址定位 1) 在定义变量时使用 _at_ 关键字加上地址就可. unsigned char idata myvar _at_ 0x40; 把变量 myvar 定义在 idata 的 0 ...
- COJ 0538 购物问题
购物问题 难度级别:C: 运行时间限制:1000ms: 运行空间限制:51200KB: 代码长度限制:2000000B 试题描述 由于换季,ACM商场推出优惠活动,以超低价格出售若干种商品.但是,商场 ...
- COJ 1008 WZJ的数据结构(八) 树上操作
传送门:http://oj.cnuschool.org.cn/oj/home/problem.htm?problemID=986 WZJ的数据结构(八) 难度级别:E: 运行时间限制:3000ms: ...
- 后缀.aspx.cs是什么软件的生成的
ASP.NET技术 aspx ——ASP.NET文件(网页) aspx.cs ——ASP.NET文件中的代码页(与上面的对应) asp.net是微软公司推出的新一代网站程序开发架构,ASP.NET技术 ...
- Windows 7 中未能从程序集System.ServiceModel
Windows 7 中未能从程序集System.ServiceModel “/”应用程序中的服务器错误. 未能从程序集“System.ServiceModel, Version=3.0.0.0 ...
- Java 中 MongoDB 使用指南
一.引入MongoDB Java Driver包 如果需要操作MongoDB的Java项目是一个Maven项目,可以在依赖中加上以下的配置. <dependencies> <depe ...