观察者模式与发布订阅模式

最新推荐文章于 2024-06-12 12:02:32 发布
最新推荐文章于 2024-06-12 12:02:32 发布
阅读量1k 收藏 19
点赞数 8
文章标签： 观察者模式
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u012761510/article/details/136248627
版权

观察者模式

定义：

观察者模式是一种行为型设计模式，定义对象间的一种一对多的依赖关系，当一个对象的状态发生改变时，所有依赖于它的对象都得到通知并被自动更新。

结构图：

https://zh.wikipedia.org/zh-cn/%E8%A7%82%E5%AF%9F%E8%80%85%E6%A8%A1%E5%BC%8F

ES6简易代码实现： 

//ts环境下的es6类模拟，已去掉ts下的类型检查和定义
/**
 * 观察者（Observer）：观察者是接收主题通知的对象。观察者需要实现一个更新方法，当收到主题的通知时，调用该方法进行更新操作。
 */
class Observe {
  constructor(name) {
    this.name = name;
  }
  update(payload) {
    console.log(`${this.name}观察的数据发生了变化：${payload}`);
  }
}
class Subject {
  constructor() {
    this.observeList = [];
  }
  addObserve(observe) {
    this.observeList.push(observe);
  }
  removeObserve(observe) {
    this.observeList = this.observeList.filter((item) => item != observe);
  }
  notify(payload) {
    this.observeList.forEach((item) => item.update(payload));
  }
}

ES简易代码实现： 

var Observe = /** @class */ (function () {
    function Observe(name) {
        this.name = name;
    }
    Observe.prototype.update = function (payload) {
        console.log("".concat(this.name, "\u89C2\u5BDF\u7684\u6570\u636E\u53D1\u751F\u4E86\u53D8\u5316\uFF1A").concat(payload));
    };
    return Observe;
}());
var Subject = /** @class */ (function () {
    function Subject() {
        this.observeList = [];
    }
    Subject.prototype.addObserve = function (observe) {
        this.observeList.push(observe);
    };
    Subject.prototype.removeObserve = function (observe) {
        this.observeList = this.observeList.filter(function (item) { return item != observe; });
    };
    Subject.prototype.notify = function (payload) {
        this.observeList.forEach(function (item) { return item.update(payload); });
    };
    return Subject;
}());
var subject = new Subject();
var observe = new Observe("xx");
var observe1 = new Observe("yy");
subject.addObserve(observe);
subject.addObserve(observe1);
subject.notify("zzz");

输出：

观察者模式通过将主题和观察者解耦，实现了对象之间的松耦合。当主题的状态发生改变时，所有依赖于它的观察者都会收到通知并进行相应的更新。 

发布订阅模式

定义：

发布-订阅模式其实是一种对象间一对多的依赖关系，当一个对象的状态发送改变时，所有依赖于它的对象都将得到状态改变的通知。与观察者模式的定义相似，其最大的特点是：发布方与订阅方互不相知，双方都发送自己的消息内容到第三方，由第三方来处理。

订阅者（Subscriber）把自己想订阅的事件注册（Subscribe）到调度中心（Event Channel），当发布者（Publisher）发布该事件（Publish Event）到调度中心，也就是该事件触发时，由调度中心统一调度（Fire Event）订阅者注册到调度中心的处理代码。

结构图：

观察者模式与发布订阅模式差异

  • 在观察者模式中，观察者是知道 Subject 的，Subject 一直保持对观察者进行记录。然而，在发布订阅模式中，发布者和订阅者不知道对方的存在。它们只有通过消息代理进行通信。

  • 在发布订阅模式中，组件是松散耦合的，正好和观察者模式相反。

  • 观察者模式大多数时候是同步的，比如当事件触发，Subject 就会去调用观察者的方法。而发布-订阅模式大多数时候是异步的（使用消息队列）。

  • 观察者模式需要在单个应用程序地址空间中实现，而发布-订阅更像交叉应用模式。

图示：

ES6简易代码实现

//ts环境下的es6类模拟，已去掉ts下的类型检查和定义
class EventEmitter {
  constructor() {
    //事件列表对象
    this.eventList = {};
  }
  //订阅
  on(eventName, fn) {
    //如果对象eventName不存在，先创建一个空数组
    if (!this.eventList[eventName]) {
      this.eventList[eventName] = [];
    }
    //如果事件存在，把fn添加到对应eventList[eventName]列表里面
    this.eventList[eventName].push(fn);
  }
  //取消订阅
  off(eventName, fn) {
    let callbacks = this.eventList[eventName];
    if (!callbacks) return false;
    if (!fn) return callbacks && (callbacks.length = 0);
    //遍历this.eventList[eventName]事件
    for (let i = 0; i < callbacks.length; i++) {
      console.log(callbacks[i].fn, "off------>callbacks[i].fn");
      console.log(callbacks[i], "off-callbacks[i]");
      //判断那个事件==fn，相同则删除
      if (callbacks[i] == fn || callbacks[i].fn == fn) {
        callbacks.splice(i, 1);
        break;
      }
    }
  }

  //监听一次
  once(eventName, fn) {
    // this箭头函数表达式是正则函数表达式的语法紧凑替代方案
    // 它没有自己的this、arguments、super或new.target关键字绑定。
    let on = (...args) => {
      this.off(eventName, on);
      //args代替arguments
      fn.apply(this, args);
    };
    //存储fn,确保单独使用off删除传入的fn时可以被删除掉
    on.fn = fn;
    console.log(on.fn, "once--->on.fn");
    console.log(on, "once-on");
    this.on(eventName, on);
  }
  //发布
  emit(eventName, data) {
    const callbacks = this.eventList[eventName];
    if (!callbacks) return;
    callbacks.forEach((element) => {
      element(data);
    });
  }
}

let events = new EventEmitter();
function test(data) {
  console.log("test is on:" + data);
}
function test1(data) {
  console.log("test1:" + data);
}
function test2(data) {
  console.log("test2:" + data);
}

源码once方法里面的on.fn =fn的作用

once订阅注册的订阅事件名均为on

考虑以下场景：还未发布时订阅者需要取消订阅某个once事件，由于once注册事件函数名均为on，off中cb是无法判断的，因此需要添加on.fn用来标识区分，所以才有off中判断条件为cb||cb.fn

上面的解释不仅说明了once方法里面 on.fn =fn的作用也说明了off方法里面for循环中if判断的后半句callbacks[i].fn == fn。

下面从代码打印中，我们来看没有经过发布，订阅者就取消订阅的once事件

输出语句如下：

events.once("example", test2);
events.off("example", test2);

输出内容：

ES5简易代码实现

//tsc编译js文件
var EventEmitter = /** @class */ (function () {
  function EventEmitter() {
    //事件列表对象
    this.eventList = {};
  }
  //订阅
  EventEmitter.prototype.on = function (eventName, fn) {
    //如果对象eventName不存在，先创建一个空数组
    if (!this.eventList[eventName]) {
      this.eventList[eventName] = [];
    }
    //如果事件存在，把fn添加到对应eventList[eventName]列表里面
    this.eventList[eventName].push(fn);
  };
  //取消订阅
  EventEmitter.prototype.off = function (eventName, fn) {
    var callbacks = this.eventList[eventName];
    if (!callbacks) return false;
    if (!fn) return callbacks && (callbacks.length = 0);
    //遍历this.eventList[eventName]事件
    for (var i = 0; i < callbacks.length; i++) {
      //判断那个事件==fn，相同则删除
      if (callbacks[i] == fn || callbacks[i].fn == fn) {
        callbacks.splice(i, 1);
        break;
      }
    }
  };
  //监听一次
  EventEmitter.prototype.once = function (eventName, fn) {
    var _this = this;
    var on = function () {
      var args = [];
      for (var _i = 0; _i < arguments.length; _i++) {
        args[_i] = arguments[_i];
      }
      _this.off(eventName, on);
      //args代替arguments
      fn.apply(_this, args);
    };
    //存储fn,确保单独使用off删除传入的fn时可以被删除掉
    on.fn = fn;
    this.on(eventName, on);
  };
  // 发布
  EventEmitter.prototype.emit = function (eventName, data) {
    var callbacks = this.eventList[eventName];
    if (!callbacks) return;
    callbacks.forEach(function (element) {
      element(data);
    });
  };
  return EventEmitter;
})();
var events = new EventEmitter();
function test(data) {
  console.log("test is on:" + data);
}
function test1(data) {
  console.log("test1:" + data);
}
function test2(data) {
  console.log("test2:" + data);
}
//1
events.on("example", test);
events.emit("example", "dddddd");
//2
events.once("example", test1);
events.emit("example", "true");
//3
events.once("example", test2);
events.emit("example", 123);
//events.off("example", test2);

输出：

参考

JavaScript 发布-订阅模式 - 掘金

明长歌
关注
  • 8
    点赞
  • 踩
  • 19
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
那些年 你需要解决的观察者模式/发布-订阅模式(ES6语法)
qq_42755014的博客
09-23 644
这是参考的地址: https://www.jb51.net/article/137419.htm;(看了很多版本觉得这个很不错) 在笔试和一些面试经验交流的帖子中进程出现订阅者模式,想着自己还不是很清楚,所以得解决,但是我们的目的应该不仅仅是对付笔试和面试,应该了解这个模式的思想:松散耦合代码形式!更多的大家看别的描述吧,会比我更清楚,这里也不累述,只是加入自己更加通俗的理解:我们的_event...
浅析JavaScript设计模式——发布-订阅/观察者模式
热门推荐
尐轩web前端网络日志
11-26 1万+
观察者模式 定义对象间的一种一对多的依赖关系，当一个对象的状态发生改变时，所有依赖于它的对象都将得到通知 前一段时间一直在写CSS3的文章 一直都没写设计模式 今天来写写大名鼎鼎观察者模式 先画张图观察者模式的理解我觉得还是发布-订阅模式的叫法更容易我们理解 这就类似我们在微信平台订阅了公众号 当它有新的文章发表后，就会推送给我们所有订阅的人我们可以看到例子中这种模式的优点 我们作为
add observer的两个用法
Love@YR
01-15 2942
add observer
es6实现发布订阅
sinat_35308384的博客
03-14 620
const _pond = Symbol(); class Subscribe { constructor() { this[_pond] = new Map(); } add(key, fn) { if (typeof key != "string" && typeof fn != "function") { ...
基于ES6的轻量级以广播订阅模式封装的JSBridge
08-10
基于ES6的轻量级，以广播-订阅模式封装的JSBridge，沟通原生端与webview。兼容iOS9 以及安卓4.0 。
ES6发布订阅设计模式实现
目标前端大佬
03-09 496
发布订阅就是将所有事件发到一个池子（数组）中，期间可以增减方法，要使用的时候统一依次执行，参数只能传相同的。期间要解决的问题是数组去重、数组塌陷。 let _subsribe = () => { class sub { constructor() { this.pond = [] } add(func) { ...
JavaScript设计模式之观察者模式与发布订阅模式详解
11-21
本文实例讲述了JavaScript设计模式之观察者模式与发布订阅模式。分享给大家供大家参考，具体如下： 学习了一段时间设计模式，当学到观察者模式和发布订阅模式的时候遇到了很大的问题，这两个模式有点类似，有点傻傻...
JavaScript设计模式之观察者模式(发布订阅模式)原理与实现方法示例
10-18
主要介绍了JavaScript设计模式之观察者模式(发布订阅模式)原理与实现方法,结合实例形式分析了JavaScript观察者模式概念、原理、使用方法及相关操作注意事项,需要的朋友可以参考下
浅谈发布订阅模式与观察者模式
12-01
设计模式并非是软件开发的专业术语，实际上，“模式”最早诞生于建筑学。 设计模式的定义是：在面向对象软件设计过程中针对特定问题的简洁而优雅的解决方案。通俗一点说，设计模式是在某种场合下对某个问题的一种...
用 JavaScript 实现发布/订阅模式
JimmyLuo17的博客
10-03 4276
重要申明：感谢原文作者——杠子，想看原文请戳这里！我转载了原文，修改了一些原文行文不通畅之处，并更改附上了自己的代码段，望请勿怪。挂在自己的博客下面一方面是为了收藏好文，方便自己温顾而知新；另一方面也希望更多人看到这文章。PS：原文撰写于 2016-08-11。一、发布/订阅模式简介发布/订阅模式（即观察者模式）： 设计该模式背后的主要动力是促进形成松散耦合。在这种模式中，并不是一个对象调用另一个对
es6版·观察者模式+发布订阅模式
weixin_33735077的博客
02-22 701
一、原理图 二、观察者模式 1、手动触发的观察者模式 /* * @Author: laifeipeng * @Date: 2019-02-22 15:44:56 * @Last Modified by: laifeipeng * @Last Modified time: 2019-02-22 16:29:36 */ /*************** 观察者模式 **********...
es6:promise想到发布订阅,订阅和发布,promise的底层就是发布订阅原理
weixin_34192993的博客
03-13 805
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <script> const getJSON = function(u...
es6 发布-订阅模式
aihe8259的博客
09-20 532
class Event { constructor() { //保存事件列表 this.eventList = []; } on(key,fn){ if ( !this.eventList[ key ] ){ this.eventList[ key ] = []; ...
ES6高阶2：数据劫持、发布订阅者模式
斜光的博客
05-17 456
什么是数据劫持？ 举一个vue的例子 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script src="http
浅谈JavaScript设计模式——观察者模式（发布订阅模式）
筱葭的博客
04-02 2152
观察者模式，又称为发布订阅模式，它定义了一种一对多的关系，让多个观察者对象同时监听某一个主题对象，这个主题对象的状态发生变化时就会通知所有的观察者对象，使得它们能够自动更新自己的状态。   在观察者模式中，并不是一个对象调用另一个对象的方法，而是一个对象订阅另一个对象的特定活动并在状态改变后获得通知。订阅者也称为观察者，而被观察的对象称为发布者或主题。当发生了一个重要的事件时，发布者将会通知（
设计模式之观察者模式
AOMGyz的博客
06-12 877
观察者模式是一种灵活且强大的设计模式，它通过建立对象之间的一对多依赖关系，实现了状态的自动通知和更新。这种模式不仅提高了代码的可维护性和可扩展性，还有助于实现松耦合和实时更新机制。设计模式中的观察者模式是一种行为型设计模式，它允许对象之间建立一种一对多的依赖关系，以便当一个对象状态改变时，它的所有依赖者（也称为观察者）都会自动收到通知并更新。观察者模式定义了一种一对多的依赖关系，让多个观察者对象同时监听某一个主题对象。当主题对象状态发生改变时，它的所有依赖者（观察者）都会收到通知并自动更新。
观察者模式
xyq2024的博客
06-10 383
观察者模式是一种行为设计模式，它定义了一种一对多的依赖关系，当一个对象的状态发生改变时，所有依赖于它的对象都会得到通知并自动更新。这种模式在软件工程中非常常见，特别是在事件处理系统和分布式系统设计中。本文将深入探讨观察者模式的原理、实现方式以及在各种编程语言中的应用。
minepy-1.2.6-cp310-cp310-win_amd64.zip
最新发布
06-17
使用说明：whl是python离线安装包，使用时候只需要pip install x.whl其中x.whl为自己whl路径名
恒色风格-中医简历模板.zip
06-17
在求职的征途上，一份出色的简历是你通往梦想职位的敲门砖。我们精心准备了一系列面试求职简历模板，旨在帮助你以最佳形象站在潜在雇主面前。这些简历模板不仅设计精美，而且注重内容的清晰呈现，使招聘经理一目了然地看到你的能力和经验。 我们的模板集合了多种风格与布局，无论你是应届毕业生、职场跳槽者还是行业专家，都能在这里找到适合你职业形象的简历设计。每一个模板都经过精心设计，确保你的简历在众多求职者中脱颖而出，同时保持足够的专业度和可读性。 不仅如此，我们的简历模板易于编辑，你可以根据具体职位需求快速调整内容，展现你的个人优势和职业成就。使用这些模板，将大大提高你的面试机会，并帮助你更好地表达自己的价值和潜力。 别让传统且缺乏创意的简历阻碍你迈向成功的道路。立即下载这些精美的简历模板，让你的求职之路更加顺畅，向心仪的工作迈进吧！记住，一个良好的开始是成功的一半，而一份精致的简历，正是你成功的起点。
观察者模式和发布订阅模式区别
05-17
观察者模式和发布订阅模式都是用于处理对象间的一对多关系，但它们有一些不同之处。 观察者模式中，有一个主题和多个观察者。主题维护一个观察者列表，并在状态变化时通知所有观察者。观察者通过注册到主题中来接收通知。观察者模式中，观察者知道主题，并直接从主题中接收通知。 发布订阅模式中，有一个消息代理或者称为消息中心，发布者向消息代理发布消息，订阅者从消息代理订阅消息。发布订阅模式中，发布者和订阅者互不知晓，他们只知道消息代理。发布者向消息代理发布消息，而不必知道哪些订阅者会收到该消息。同样地，订阅者也只需向消息代理订阅消息，而不必知道哪些发布者会发布该消息。 因此，观察者模式和发布订阅模式在实现方式上有所不同，前者更加简单，后者更加灵活。当需要简单的一对多关系时可以使用观察者模式，而当需要更加复杂的场景时可以选择发布订阅模式。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值