• 发布订阅模式又叫观察者模式,它定义一种一对多的依赖关系,
  • 当一个对象的状态发生改变时,所有依赖于它的对象都将得到通知。
document.body.addEventListener('click', function () {
alert(1);
}, false);
document.body.addEventListener('click', function () {
alert(2);
}, false);
document.body.addEventListener('click', function () {
alert(3);
}, false);
document.body.click();

发布--订阅模式的通用实现

var event = {
clientList: [],
listen: function (key,fn) {
if (!this.clientList[key]) {
this.clientList[key] = [];
}
this.clientList[key].push(fn);
},
trigger: function () {
var key = Array.prototype.shift.call(arguments);
fns = this.clientList[key];
if (!fns || fns.length === 0) {
return false;
} for (var i = 0, fn; fn = fns[i++];) {
fn.apply(this,arguments);
}
},
remove: function (key,fn) {
var fns = this.clientList[key];
if (!fns) {
return false;
}
if (!fn) {
fns && (fns.length = 0);
} else {
for (var i = fns.length-1; i >= 0; i--) {
var _fn = fns[i];
if (_fn === fn) { fns.splice(i, 1);
console.log("删除成功!");
}
}
}
}
};
//给所有对象设置发布-订阅功能
var installEvent = function (obj) {
for (var i in event) {
obj[i] = event[i];
}
}; var salesOffices = {};
installEvent(salesOffices);
//订阅
salesOffices.listen("89cm3",f1= function (price) {
console.log("价格:"+price);
});
salesOffices.listen("120cm3",f2= function (price) {
console.log("价格:" + price);
});
//发布
salesOffices.trigger("89cm3", 1200000);
salesOffices.trigger("120cm3", 2200000); salesOffices.remove("89cm3", f1);
salesOffices.trigger("89cm3", 1200000);

  • 防止全局命名冲突再重构。
var Event = (function () {
var global = this,
Event,
_default = 'default'; Event = function () {
var _listen,
_trigger,
_remove,
_slice = Array.prototype.slice,
_shift = Array.prototype.shift,
_unshift = Array.prototype.unshift,
namespaceCache = {},
_create,
find,
each = function (ary, fn) {
var ret;
for (var i = 0; i < ary.length; i++) {
var n = ary[i];
ret = fn.call(n, i, n);
}
return ret;
}; _listen = function (key,cache,fn) {
if (!cache[key]) {
cache[key] = [];
}
cache[key].push(fn);
}; _remove = function (key,cache,fn) {
if (cache[key]) {
if (fn) {
for (var i = cache[key].length; i >= 0; i--) {
if (cache[key][i] === fn) {
cache[key].splice(i, 1);
}
}
} else {
cache[key] = [];
}
}
}; _trigger = function () {
var cache = _shift.call(arguments),
key = _shift.call(arguments),
args = arguments,
_self = this,
ret,
stack = cache[key]; if (!stack || !stack.length) {
return;
}
return each(stack, function () {
return this.apply(_self, args);
}); }; _create = function (namespace) {
var namespace = namespace || _default;
var cache = {},
offlineStack = [],
ret = {
listen: function (key, fn, last) {
_listen(key, fn, cache);
if (offlineStack === null) {
return;
}
if (last === 'last') {
offlineStack.length && offlineStack.pop()();
} else {
each(offlineStack, function () {
this();
});
}
offlineStack = null;
},
one: function (key, fn, last) {
_remove(key, cache);
this.listen(key, fn, last);
},
remove: function (key, fn) {
_remove(key, cache, fn)
},
trigger: function () {
var fn,
args,
_self = this;
_unshift.call(arguments, cache);
args = arguments;
fn = function () {
return _trigger.apply(_self, args);
};
if (offlineStack) {
return offlineStack.push(fn);
}
return fn();
}
};
return namespace ? (namespaceCache[namespace] ? namespaceCache[namespace] : namespaceCache[namespace] = ret) : ret;
}; return {
create: _create,
one: function (key, fn, last) {
var event = this.create();
event.one(key,fn,last);
},
remove: function (key,fn) {
var event = this.create();
event.remove(key,fn);
},
listen: function (key,fn,last) {
var event = this.create();
event.listen(key,fn,last);
},
trigger: function () {
var event = this.create();
event.trigger.apply(this,arguments);
}
}; }();
return Event;
})();

JS模式---发布、订阅模式的更多相关文章

  1. JS的发布订阅模式

    JS的发布订阅模式 这里要说明一下什么是发布-订阅模式 发布-订阅模式里面包含了三个模块,发布者,订阅者和处理中心.这里处理中心相当于报刊办事大厅.发布者相当与某个杂志负责人,他来中心这注册一个的杂志 ...

  2. 阶段5 3.微服务项目【学成在线】_day05 消息中间件RabbitMQ_8.RabbitMQ研究-工作模式-发布订阅模式-生产者

    Publish/subscribe:发布订阅模式 发布订阅模式: 1.每个消费者监听自己的队列. 2.生产者将消息发给broker,由交换机将消息转发到绑定此交换机的每个队列,每个绑定交换机的队列都将 ...

  3. js设计模式-发布/订阅模式

    一.前言 发布订阅模式,基于一个主题/事件通道,希望接收通知的对象(称为subscriber)通过自定义事件订阅主题,被激活事件的对象(称为publisher)通过发布主题事件的方式被通知. 就和用户 ...

  4. 4.js模式-发布-订阅模式

    1. 发布-订阅模式 var observe = (function(){ var events = {}, listen, trigger, remmove; listen = function(k ...

  5. js设计模式--发布订阅模式

    前言 本系列文章主要根据<JavaScript设计模式与开发实践>整理而来,其中会加入了一些自己的思考.希望对大家有所帮助. 概念 发布-订阅模式又叫观察者模式,它定义对象间的一种一对多的 ...

  6. [转]js设计模式—发布订阅模式

    发布—订阅模式又叫观察者模式,它定义对象间的一对多的依赖关系,当一个对象的状态发生改变时,所有依赖于它的对象都将得到通知.在javascript开发中,一般用事件模型来替代传统的发布—订阅模式.本文将 ...

  7. RabbitMQ六种队列模式-发布订阅模式

    前言 RabbitMQ六种队列模式-简单队列RabbitMQ六种队列模式-工作队列RabbitMQ六种队列模式-发布订阅 [本文]RabbitMQ六种队列模式-路由模式RabbitMQ六种队列模式-主 ...

  8. 阶段5 3.微服务项目【学成在线】_day05 消息中间件RabbitMQ_9.RabbitMQ研究-工作模式-发布订阅模式-消费者

    消费者需要写两个消费者 定义邮件的类 复制以前的代码到邮件类里面进行修改 最上面 声明队列的名称和交换机的名称 监听修改为email 的队列的名称 手机短信接收端 复制一份email的接收端的代码 改 ...

  9. js 实现发布订阅模式

    /* Pubsub */ function Pubsub(){ //存放事件和对应的处理方法 this.handles = {}; } Pubsub.prototype = { //传入事件类型typ ...

  10. java 观察这模式(发布订阅模式)

    观察者设计模式定义了对象间的一种一对多的组合关系,以便一个对象的状态发生变化时,所有依赖于它的对象都得到通知并自动刷新. 发布者发布信息,订阅者获取信息,订阅了就能收到信息,没订阅就收不到信息. 抽象 ...

随机推荐

  1. 深度剖析Spark分布式执行原理

    让代码分布式运行是所有分布式计算框架需要解决的最基本的问题. Spark是大数据领域中相当火热的计算框架,在大数据分析领域有一统江湖的趋势,网上对于Spark源码分析的文章有很多,但是介绍Spark如 ...

  2. iPhone 上显示桌面版页面

    在用智能电话的浏览器打开页面时,很多网站会根据浏览器的屏幕大小自动调整显示布局,或跳转到移动设备使用的专用面上来优化显示.一些情况下,这种优化可能不是用户希望的,比如优化后的页面缺少桌面版的功能. 这 ...

  3. 'utf8' codec can't decode byte 0xd1 in position 931: invalid continuation byte解决方法

    有时候,我得到这样的字符œ导致的UnicodeDecodeError错误. 我需要能够使串的UTF-8有或没有这些字符. 在工作中,经常遇到,读取一个文件,或者是从网页获取一个问题,明明看着是gb23 ...

  4. 前端资讯周报 3.13 - 3.19: WebVR来了!以及如何优化scroll事件性能

    每周一我都会分享上一周我订阅的技术站点中,和解决问题的过程中阅读到的值得分享的文章.这是迫使我学习的一个动力 本周推荐 Minecraft in WebVR with HTML Using A-Fra ...

  5. Struts2之OGNL表达式

    OGNL(Object-Graph Navigation Language的简称),对象图导航语言,它是一门表达式语言,除了用来设置和获取Java对象的属性之外,另外提供诸如集合的投影和过滤以及lam ...

  6. 纯Jquery前端分页

    ---恢复内容开始--- 由于之前自己做过jquery分页,就是调用jni接口时,只能用前台分页解决显示问题.最近看到有人提这样的问题:一个请求传过来上万个数据怎么办?于是萌生了写这篇博客的想法. 效 ...

  7. C++移位运算符详解

    移位运算符包括左移"<<"和右移">>" 左移运算符<<: 1.无符号 语法格式:需要移位的数字<<移位的次数n ...

  8. 初见 ThreadLocal 类

    这个类能够将一个对象和一个线程绑定起来. 之所以写这个类是因为 DBUtils 工具类,在 JavaEE 经典三层结构中对于事务的操作,不方便放在 DAO 层,因为具有侵入性,只适合放在 Servic ...

  9. Entity Framework 新手入门友好实例

    起因 因为实习的原因,程序之中用到了较多的数据库操作逻辑.如果每一处数据库操作都手写的话,工作量较大且后期不易于维护,所以希望能通过 ORM 框架来解决这两个问题. 在昨天之前,对于 ORM 这个词汇 ...

  10. (Facebook开源项目)Fresco:一个新的Android图像处理类库

    在Facebook的Android客户端上快速高效的显示图片是非常重要的.然而多年来,我们遇到了很多如何高效存储图片的问题.图片太大,而设备太小.一个像素点就占据了4个字节数据(分别代表R G B和a ...