当前位置: 首页 > 编程笔记 >

JavaScript设计模式之观察者模式(发布订阅模式)原理与实现方法示例

尹冠宇
2023-03-14
本文向大家介绍JavaScript设计模式之观察者模式(发布订阅模式)原理与实现方法示例,包括了JavaScript设计模式之观察者模式(发布订阅模式)原理与实现方法示例的使用技巧和注意事项,需要的朋友参考一下

本文实例讲述了JavaScript设计模式之观察者模式(发布订阅模式)原理与实现方法。分享给大家供大家参考,具体如下:

观察者模式,又称为发布订阅模式,它定义了一种一对多的关系,让多个观察者对象同时监听某一个主题对象,这个主题对象的状态发生变化时就会通知所有的观察者对象,使得它们能够自动更新自己的状态。

在观察者模式中,并不是一个对象调用另一个对象的方法,而是一个对象订阅另一个对象的特定活动并在状态改变后获得通知。订阅者也称为观察者,而被观察的对象称为发布者或主题。当发生了一个重要的事件时,发布者将会通知(调用)所有订阅者并且可能经常以事件对象的形式传递消息。

思路:

① 发布者需要一个数组类型的属性subscribers,以存储所有的订阅者;

② 订阅subscribe():将新的订阅者加入到这个数组中去;

③ 退订unsubscribe():从订阅者数组中删除某个订阅者;

④ 发布publish():循环遍历subscribers数组中的每一个元素,并通知他们,即发送消息,意味着调用订阅者的某个方法。因此,当用户订阅信息时,该订阅者需要向subscribe()提供它的其中一个方法。

subscribe()、unsubscribe()、publish()三种方法都需要一个type参数,因为发布者可能触发多个事件,而用户可能仅选择订阅其中一种,而不是另外一种。

使用观察者模式的好处:

① 支持简单的广播通信,自动通知所有已经订阅过的对象。

② 页面载入后目标对象很容易与观察者存在一种动态关联,增加了灵活性。

③ 目标对象与观察者之间的抽象耦合关系能够单独扩展以及重用。

在JavaScript中,一般使用事件模型来替代传统的观察者模式。 DOM事件,也是JavaScript和DOM之间实现的一种观察者模式。

Eg1:

监听用户单击按钮的动作,但没有办法预知用户将在什么时候点击。因此,订阅按钮上的click事件,当按钮被点击时,便向订阅者发布此消息。

btn.addEventListener("click", function() {
    console.log("First click");
}, false);
// 可以有多个订阅者
btn.addEventListener("click", function() {
    console.log("Second click");
}, false);
btn.click();

Eg2:

非观察者模式:

$.ajax({
  url: './login',
  type: 'post',
  contentType: 'application/json',
  dataType:'json',
  success: function(data) {
    if(data.status === "success") { // 登录成功,渲染header、footer
      header.setInfo(data.headerInfo);
      footer.setInfo(data.footerInfo);
    }
  }
});

观察者模式:

$.ajax({
  ...,
  success: function(data) {
    if(data.status === "success") {
      // 登录成功,发布登陆成功消息
      login.trigger("loginsuccess", data);
    }
  }
});
var header = (function() { // 监听消息
  login.listen("loginsuccess", function(data){
    header.setInfo(data.headerInfo);
  });
  return {
    setInfo: function(data) {
      console.log("渲染header");
    }
  };
})();
var footer = (function() {
  login.listen("loginsuccess", function(data){
    footer.setInfo(data.navInfo);
  });
  return {
    setInfo: function(data) {
      console.log("渲染nav");
    }
  };
})();

更多关于JavaScript相关内容可查看本站专题:《javascript面向对象入门教程》、《JavaScript切换特效与技巧总结》、《JavaScript查找算法技巧总结》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结》

希望本文所述对大家JavaScript程序设计有所帮助。

 类似资料:
  • 本文向大家介绍JavaScript设计模式之观察者模式(发布者-订阅者模式),包括了JavaScript设计模式之观察者模式(发布者-订阅者模式)的使用技巧和注意事项,需要的朋友参考一下 观察者模式( 又叫发布者-订阅者模式 )应该是最常用的模式之一. 在很多语言里都得到大量应用. 包括我们平时接触的dom事件. 也是js和dom之间实现的一种观察者模式. 只要订阅了div的click事件. 当点

  • 本文向大家介绍JavaScript设计模式之观察者模式与发布订阅模式详解,包括了JavaScript设计模式之观察者模式与发布订阅模式详解的使用技巧和注意事项,需要的朋友参考一下 本文实例讲述了JavaScript设计模式之观察者模式与发布订阅模式。分享给大家供大家参考,具体如下: 学习了一段时间设计模式,当学到观察者模式和发布订阅模式的时候遇到了很大的问题,这两个模式有点类似,有点傻傻分不清楚,

  • 本文向大家介绍javascript设计模式 – 观察者模式原理与用法实例分析,包括了javascript设计模式 – 观察者模式原理与用法实例分析的使用技巧和注意事项,需要的朋友参考一下 本文实例讲述了javascript设计模式 – 观察者模式原理与用法。分享给大家供大家参考,具体如下: 介绍:前面我们针对系统内一对多,多对多的情况做了解决方案,是使用中介者模式,将所有关联关系交由中介者处理。这

  • 介绍 观察者模式又叫发布订阅模式(Publish/Subscribe),它定义了一种一对多的关系,让多个观察者对象同时监听某一个主题对象,这个主题对象的状态发生变化时就会通知所有的观察者对象,使得它们能够自动更新自己。 使用观察者模式的好处: 支持简单的广播通信,自动通知所有已经订阅过的对象。 页面载入后目标对象很容易与观察者存在一种动态关联,增加了灵活性。 目标对象与观察者之间的抽象耦合关系能够

  • 本文向大家介绍Java设计模式之观察者模式原理与用法详解,包括了Java设计模式之观察者模式原理与用法详解的使用技巧和注意事项,需要的朋友参考一下 本文实例讲述了Java设计模式之观察者模式原理与用法。分享给大家供大家参考,具体如下: 什么是观察者模式       可以这么理解:                   观察者模式定义了一种一对多的依赖关系,让多个观察者对象同时监听某一个主题对象。  

  • 本文向大家介绍JavaScript设计模式之观察者模式实例详解,包括了JavaScript设计模式之观察者模式实例详解的使用技巧和注意事项,需要的朋友参考一下 本文实例讲述了JavaScript设计模式之观察者模式。分享给大家供大家参考,具体如下: 观察者模式 观察者模式又叫发布订阅模式(Publish/Subscribe),它定义了一种一对多的关系,让多个观察者对象同时监听某一个主题对象,这个主