js设计模式-发布/订阅模式
一、前言
发布订阅模式,基于一个主题/事件通道,希望接收通知的对象(称为subscriber)通过自定义事件订阅主题,被激活事件的对象(称为publisher)通过发布主题事件的方式被通知。
就和用户订阅微信公众号道理一样,一个公众号可以被多个用户同时订阅,当公众号有新增内容时候,只要发布就好了,用户就能接收到最新的内容。
js中的事件监听机制就是一种观察者模式。
二、和观察者模式的区别
观察者模式:一个对象(称为subject)维持一系列依赖于它的对象(称为observer),将有关状态的任何变更自动通知给它们(观察者)。
1、Observer模式要求观察者必须订阅内容改变的事件,定义了一个一对多的依赖关系;
2、Publish/Subscribe模式使用了一个主题/事件通道,这个通道介于订阅着与发布者之间;
3、观察者模式里面观察者「被迫」执行内容改变事件(subject内容事件);发布/订阅模式中,订阅着可以自定义事件处理程序;
4、观察者模式两个对象之间有很强的依赖关系;发布/订阅模式两个对象之间的耦合读底
这是一个简单的实现,主要是创建一个对象,有三个属性(容器,订阅方法,发布方法)。将订阅者放入容器,发布,触发容器内的函数。
(function(){ //
function Public(){
//存放订阅者的容器
this.subscribers=[];
//添加订阅者
this.addSubscribers=function(fn){
let isExit = this.subscribers.some(function(sub){
return fn == sub;
})
if(!isExit){
this.subscribers.push(fn);
}
return this;
} //发布消息
this.deliver = function(data){
this.subscribers.forEach(function(fn){
fn(data);
})
return this;
}
} let a = function(data){
console.log("a:"+data);
}
let b = function(data){
console.log("b:"+data);
} let c = function(data){
console.log("c:"+data);
} var pub = new Public();
pub.addSubscribers(a).addSubscribers(b).addSubscribers(c);
pub.deliver("消息");
})()
2、可以看到观察者模式有如下优点
a、每一个订阅者都是相互独立的只和发布者有关系,与发布者是一对多的关系,也可以是一对一的关系。
b、每一个订阅者可以根据自己的需求来调用,而不影响其它订阅者
c、与第一种方式相比,第二种方式的代码可读性、可维护性强;
这是一个完整的实现
(function(win){
function Public(){
this.handlers={};
}
Public.prototype = {
//订阅事件
on:function(eventType,eventHandle){
var self = this;
if(!(eventType in self.handlers)){
self.handlers[eventType] = [];
}
self.handlers[eventType].push(eventHandle);
return this;
},
emit:function(eventType){
//如果调用函数传了多个参数,eventType指第一个参数,arguments是一个对象,参数序号是key指,同时也给他length
//看起来像数组,其实不是数组。
var self = this;
//去除第一个事件类型的参数,使用call改变this指向
//使用slice的对象需要由length属性,所以arguments才能使用成功。
var handleArgs = Array.prototype.slice.call(arguments,1);
console.log(handleArgs);
for (var i =0; i<self.handlers[eventType].length;i++) {
//使用apply,订阅者的调用对象就是Public,不适用就是数组对象。
self.handlers[eventType][i].apply(self,handleArgs);
}
return this;
},
off:function(eventType,eventHandle){
var currentEvent = this.handlers[eventType];
var len = 0;
if(currentEvent){
len = currentEvent.length;
if(eventHandle == undefined){
currentEvent[eventType] = [];
}else{
for (var i = len-1;i >= 0;i--) {
if(currentEvent[i] == eventHandle){
currentEvent.splice(i,1);
}
}
} }
}
}
var a = function(data){
console.log(this);
console.log("a"+data);
}
var b =function(data){
console.log("b"+data); }
var pub = new Public();
pub.on("click",a).on("click",b);
pub.emit("click","xiaoxi"); })(window)
参考博主的文章:https://www.cnblogs.com/leaf930814/p/9014200.html
js设计模式-发布/订阅模式的更多相关文章
- js设计模式--发布订阅模式
前言 本系列文章主要根据<JavaScript设计模式与开发实践>整理而来,其中会加入了一些自己的思考.希望对大家有所帮助. 概念 发布-订阅模式又叫观察者模式,它定义对象间的一种一对多的 ...
- [转]js设计模式—发布订阅模式
发布—订阅模式又叫观察者模式,它定义对象间的一对多的依赖关系,当一个对象的状态发生改变时,所有依赖于它的对象都将得到通知.在javascript开发中,一般用事件模型来替代传统的发布—订阅模式.本文将 ...
- JS的发布订阅模式
JS的发布订阅模式 这里要说明一下什么是发布-订阅模式 发布-订阅模式里面包含了三个模块,发布者,订阅者和处理中心.这里处理中心相当于报刊办事大厅.发布者相当与某个杂志负责人,他来中心这注册一个的杂志 ...
- javascript设计模式——发布订阅模式
前面的话 发布—订阅模式又叫观察者模式,它定义对象间的一对多的依赖关系,当一个对象的状态发生改变时,所有依赖于它的对象都将得到通知.在javascript开发中,一般用事件模型来替代传统的发布—订阅模 ...
- 设计模式-发布订阅模式(javaScript)
1. 前言 2. 什么是发布订阅模式 3. 发布订阅优缺点 4. 举例 4. 总结 1. 前言 发布订阅者模式是为了发布者和订阅者之间避免产生依赖关系,发布订阅者之间的订阅关系由一个中介列表来维护.发 ...
- javascript 设计模式 -- 发布/订阅模式
直接上代码: index.html : <!DOCTYPE html> <html lang="en"> <head> <meta cha ...
- js 实现发布订阅模式
/* Pubsub */ function Pubsub(){ //存放事件和对应的处理方法 this.handles = {}; } Pubsub.prototype = { //传入事件类型typ ...
- js 设计模式:观察者和发布订阅模式
总是把这两个当作同一个模式,但其实是不太一样的,现在重温一下. 观察者模式 观察者直接订阅目标,当目标触发事件时,通知观察者进行更新 简单实现 class Observer { constructor ...
- JS设计模式(5)发布订阅模式
什么是发布订阅模式(观察者模式)? 定义:定义对象间的一种一对多的依赖关系,当一个对象的状态发生改变时,所有依赖于它的对象都得到通知并被自动更新. 主要解决:一个对象状态改变给其他对象通知的问题,而且 ...
随机推荐
- java 使用xom对象数据序列化为xml、反序列化、Preferences相关操作小案例
package org.rui.io.xml; import java.io.BufferedOutputStream; import java.io.FileOutputStream; import ...
- V4L学习
http://blog.csdn.net/wangrunmin/article/details/7764768# http://blog.sina.com.cn/s/blog_a44175a90101 ...
- FMDB数据库队列
一.代码示例 1.需要先导入FMDB框架和头文件,由于该框架依赖于libsqlite库,所以还应该导入该库. 2.代码如下: 1 // 2 // YYViewController.m 3 // 05- ...
- 我的第一篇博文,Python+scrapy框架安装。
自己用Python脚本写爬虫有一段时日了,也抓了不少网页,有的网页信息两多,一个脚本用exe跑了两个多月,数据还在进行中.但是总觉得这样抓效率有点低,问题也是多多的,很早就知道了这个框架好用,今天终于 ...
- 【HDU 2196】 Computer
[题目链接] 点击打开链接 [算法] 我们知道,一棵树上离某个节点最远的节点,可能是经过它的祖先,再到那个祖先的某个孩子,或者,是它的那颗子树中,离它最远的一个节点,就不难想到以下算法 : 第一遍DF ...
- 聊聊Shiro
Shiro是项目中用的比较多Java安全框架,能满足大多数项目的安全认证.授权流程.相比SpringSecurity的复杂重量级,它更简单易用. Shiro中最关键的两个概念是认证和授权,前者解决确认 ...
- filter() 函数
描述 filter() 函数用于过滤序列,过滤掉不符合条件的元素,返回由符合条件元素组成的新列表. 该接收两个参数,第一个为函数,第二个为序列,序列的每个元素作为参数传递给函数进行判,然后返回 Tru ...
- 数组方法 Array.prototype
Object.prototype 数组的值是有序的集合,每一个值叫做元素,每一个元素在数组中都有数字位置编号,也就是索引,js中数组是弱类型的,数组中可以含有不同类型的元素.数组元素甚至可以是对象或者 ...
- node 中mongoose使用validate和密码加密的问题
在今天一直被一个问题困扰,就算是使用mongoose的alidate的时候想要限制密码的位数,比如不能少于几位,但是一直出错. 最后发现原来使用validate的时候,是在数据将要存入数据库的时候,因 ...
- ubuntu 12.04上安装QQ2013(转载)
转自:http://www.cnblogs.com/wocn/p/linux_ubuntu_QQ_install.html 环境介绍: OS:Ubuntu12.04 64bit QQ:WineQQ20 ...