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 ...
随机推荐
- CentOS 7 安装tomcat
1.下载Linux版的tomcat 2.上传下载tomcat文件到/usr/local中执行以下操作 [root@admin local]# cd /usr/local [root@admin loc ...
- Mifare 1卡的存储结构
存取控制指符合什么条件才能对卡片进行操作. S50和S70的块分为数据块和控制块,对数据块的操作有“读”.“写”.“加值”.“减值(含传输和存储)”四种,对控制块的操作只有“读”和“写”两种. S50 ...
- 转:如何创建.htaccess文件
方法1.开始-运行-键入cmd,打开cmd窗口 此时的cmd窗口路径是C:\Documents and Settings\username> 键入以下(不包括括号内信息): copy con . ...
- IOS笔记 1
< ![CDATA[ 笔记 UIWindows 与UIView的关系iOS的坐标系统视图层次结构视图坐标(Frame和Bounds区别)UIView的常用属性和方法坐标系统的变换UIView内容 ...
- 【HDOJ】1310 Team Rankings
STL的应用,基本就是模拟题. /* 1410 */ #include <iostream> #include <string> #include <algorithm& ...
- 【HDOJ】1109 Run Away
基础模拟退火. /* poj 1379 */ #include <iostream> #include <cstdio> #include <cstdlib> #i ...
- Delphi实现AnsiString与WideString的转换函数 转
Delphi实现AnsiString与WideString的转换函数 分类: Delphi2013-01-26 16:23 460人阅读 评论(0) 收藏 举报 [delphi] view plain ...
- 基于Minifilter框架的文件过滤驱动理解
概述 Minifilter即File System Minifilter Drivers,是Windows为了简化第三方开发人员开发文件过滤驱动而提供的一套框架,这个框架依赖于一个称之为Filter ...
- Java web App 部署静态文件
以 Tomcat 为例子,静态文件,如 html, css, js ,无需编译,所以只需要把文件复制到 Tomcat/webapps 目录下面某个子目录,便可以了. 例子: 1. 在 Tomcat/w ...
- 学习微信小程序之css16常见布局
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...