观察者模式:定义一对多的关系,让多个观察对象同时监听某一个主题对象,主题对象状态发生变化就通知所有观察者对象。所以它是由两类对像组成:Subject主题+Observer观察者。主题发布事件,观察者通过订阅事件观察主题。

Observer模式提供给关联对象一种同步通信的手段,使得主题和观察者之间保持同步通信

function observar(oldVal,newVal){
console.log(`name属性值从${oldVal}改变为${newVal}`);
}
class TargetObj{
constructor(age,name){
this.name = name;
this.age = age;
}
set name(val){
observar(name,val);
name
= val;
}

}
let targetObj = new TargetObj(22,'miya');
targetObj.name = 'Lily';
console.log(targetObj)
//name属性值从改变为miya
//name属性值从miya改变为Lily 

阮一峰大神在介绍Reflect时候,使用Proxy写了一个观察者模式的代码:

//观察者队列
const queuedObservers = new Set();
const observe = fn => queuedObservers.add(fn);
function print(){
console.log(`${person.name},${person.age}`);
}
//将观察者放入队列中
observe(print);
const person = new Proxy({name:'张三',age:22},{
set(target,key,value,receiver){
const result = Reflect.set(target,key,value,receiver);
queuedObservers.forEach(observer => observer());
return result;
}
})
person.name = '李四';
//李四,22

上面代码可以看出,观察者模式是:Observer在Subject主题对象特定活动状态改变时候获取通知。主题Subject需要一个数组类型来存储所有的订阅者。Subject和Observer之间存在依赖关系,存在耦合。

JavaScript中的事件监听机制可以理解为观察者模式,通过onclick事件绑定,然后事件主动触发。

发布—订阅模式:完全解耦,发布者和订阅者彼此不知道对方的存在,二者共享一个自定义事件的名称。它的优点非常明显,一为时间上的解耦,二为对象之间的解耦。

观察者模式中,目标对象也就是Subject管理观察者,发布-订阅模式中多了一个中间层通道。

//发布-订阅
var Event = (function(){
var clientList = {},
listen,
trigger,
remove;
listen = function(key,fn){
if(!clientList[key]){
clientList[key] = [];
}
clientList[key].push(fn);
}
trigger = function(){
var key = Array.prototype.shift.call(arguments),
fns = 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 = clientList[key];
if(!fns) return false;
if(!fn){
fns && (fns.length = 0);
}else{
for(var i = 0,_fn;_fn = fns[i++];){
if(fn === _fn){
fns.splice(i,1);
}
}
}
}
return {
listen:listen,
trigger:trigger,
remove:remove
}
})()
Event.listen('LondonAirPlay',function(price){
console.log(`the price is ${price}`)
})
Event.trigger('LondonAirPlay',3000)
//the price is 3000 

订阅者想要订阅伦敦的机票,通过Event对象来实现了,Event对象具有listen订阅,trigger发布,remove取消等功能,订阅者和发布者之间完全是不认识的,Event类似于一个“中介者”,将订阅者和发布者联系起来。

总结:

1,Observer模式,观察者是知道Subject主题的,目标主题一直保持对观察者的记录,而publish-subscribe模式中,订阅者和发布者互相不知道对方,通过消息代理进行通信。

2,Observer模式中,观察者和主题之间存在依赖耦合关系,而发布订阅者模式则完全松耦合的。

3,多数情况下,Observer模式是同步,例如事件触发,而发布-订阅者使用的消息队列模式,大多数处理异步事件。

【完】

如来者,无所从来,亦无所去,故名如来。
                                                                 ——鸠摩罗什 《金刚经》

观察者模式(Observer)和发布-订阅者模式(Publish/Subscribe)区别的更多相关文章

  1. [JS设计模式]:观察者模式(即发布-订阅者模式)(4)

    简介 观察者模式又叫发布---订阅模式,它定义了对象间的一种一对多的关系,让多个观察者对象同时监听某一个主题对象,当一个对象发生改变时,所有依赖于它的对象都将得到通知. 举一个现实生活中的例子,例如小 ...

  2. “一切都是消息”--MSF(消息服务框架)之【发布-订阅】模式

    在上一篇,“一切都是消息”--MSF(消息服务框架)之[请求-响应]模式 ,我们演示了MSF实现简单的请求-响应模式的示例,今天来看看如何实现[发布-订阅]模式.简单来说,该模式的工作过程是: 客户端 ...

  3. “一切都是消息”--iMSF(即时消息服务框架)之【发布-订阅】模式

    MSF的名字是 Message Service Framework 的简称,由于目前框架主要功能在于处理即时(immediately)消息,所以iMSF就是 immediately Message S ...

  4. ActiveMQ发布-订阅消息模式

    一.订阅杂志我们很多人都订过杂志,其过程很简单.只要告诉邮局我们所要订的杂志名.投递的地址,付了钱就OK.出版社定期会将出版的杂志交给邮局,邮局会根据订阅的列表,将杂志送达消费者手中.这样我们就可以看 ...

  5. (三)ActiveMQ之发布- 订阅消息模式实现

    一.概念 发布者/订阅者模型支持向一个特定的消息主题发布消息.0或多个订阅者可能对接收来自特定消息主题的消息感兴趣.在这种模型下,发布者和订阅者彼此不知道对方.这种模式好比是匿名公告板.这种模式被概括 ...

  6. JS 设计模式八 -- 发布订阅者模式

    概念 发布---订阅模式又叫观察者模式,它定义了对象间的一种一对多(一个发布,多个观察)的关系,让多个观察者对象同时监听某一个主题对象,当一个对象发生改变时,所有依赖于它的对象都将得到通知. 优点 1 ...

  7. 学习javascript设计模式之发布-订阅(观察者)模式

    1.发布-订阅模式又叫观察者模式,它定义对象之间一种一对多的依赖关系. 2.如何实现发布-订阅模式 2-1.首先指定好发布者 2-2.给发布者添加一个缓冲列表,用户存放回调函数以便通知订阅者 2-3. ...

  8. ionic3 发布订阅者模式实现

    在ionic3 中实现订阅发布模式,需要用到Events. Events下面有三个方法 events.subscribe()  订阅 events.publish()  发布 events.unsub ...

  9. 把酒言欢话聊天,基于Vue3.0+Tornado6.1+Redis发布订阅(pubsub)模式打造异步非阻塞(aioredis)实时(websocket)通信聊天系统

    原文转载自「刘悦的技术博客」https://v3u.cn/a_id_202 "表达欲"是人类成长史上的强大"源动力",恩格斯早就直截了当地指出,处在蒙昧时代即低 ...

随机推荐

  1. vue2.XX 提示[Vue warn]: Error in render: "TypeError: Cannot read property 'img' of undefined"

    item 是向后台请求的一条数据,里面包含img,但是却提示img未定义 父组件向子组件传递数据时, 子组件 具体代码: <img :src="item.img" /> ...

  2. Ribbon XML Editor 2019.01.23-Setup.zip(支持64位)

    RibbonXMLEditor是一款用于书写和测试customUI XML代码的国产工具,具有XML验证.Office文档压入.回调函数查询等多种功能. 可作为定制Office自定义界面有关程序开发的 ...

  3. js使用心得——避免全局变量冲突的小技巧

    在写js代码的时候,经常会因为这样或者那样的原因用到全局变量,如果全局变量只在一个js里使用,那就没问题,但如果变量在不同的js文件里出现,这时隐藏的问题就会开始暴露,也许你能很快修复出现的BUG,又 ...

  4. 吴裕雄--天生自然python学习笔记:python用OpenCV 读取和显示图形

    Open CV 是一个开源.跨平台的计算机视觉库,它可 以在商业和研究领域中免费使用,目前已广泛应用于人机 互动.人脸识别.动作识别.运动跟踪等领域. 要识别特定的图像,最重要的是要有识别对象的特征 ...

  5. TPO1-1 Groundwater

    If the pores are large,the water in them will exist as drops too heavy for surface tension to hold,a ...

  6. Python opencv PIL numpy base64互相转化

    PIL2numpy and numpy2PIL from PIL import Image import numpy image = Image.open('timg.jpeg')# image is ...

  7. python3多线程应用详解(第一卷:线程的本质概念)

    之前我用过多线程的方式执行了爬虫程序,爬取了糗事百科的数据可以看到速率非常之快,就像正常一个人他要完一个汉堡,再吃喝一瓶水才能走,结果他边吃汉堡边喝水,速率一下加快了一样.首先我们看看什么是线程: 图 ...

  8. ip获取到城市

    <?phpfunction GetIP() {    if ($_SERVER["HTTP_X_FORWARDED_FOR"])        $ip = $_SERVER[ ...

  9. Nunit说明及简单DEMO

    using System; using System.Collections.Generic; using System.Text; using NUnit.Framework; //安装好NUnit ...

  10. caffe之android移植

    获取Android手机CPU类型 ARM.ARMV7.NEON:http://blog.csdn.net/mengweiqi33/article/details/22796619 android nd ...