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


Posted in Javascript onJuly 27, 2018

本文实例讲述了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 相关文章推荐
Add Formatted Text to a Word Document
Jun 15 Javascript
js获取图片长和宽度的代码
Nov 24 Javascript
jBox 2.3基于jquery的最新多功能对话框插件 常见使用问题解答
Nov 10 Javascript
js设置cookie过期当前时间减去一秒相当于立即过期
Sep 04 Javascript
AngularJS基础 ng-show 指令简单示例
Aug 03 Javascript
Javascript发送AJAX请求实例代码
Aug 21 Javascript
纯JS代码实现隔行变色鼠标移入高亮
Nov 23 Javascript
微信小程序实战之自定义模态弹窗(8)
Apr 18 Javascript
jQuery序列化form表单数据为JSON对象的实现方法
Sep 20 jQuery
详解从0开始搭建微信小程序(前后端)的全过程
Apr 15 Javascript
Layui数据表格判断编辑输入的值,是否为我需要的类型详解
Oct 26 Javascript
js实现div色块拖动录制
Jan 16 Javascript
Vue+Mock.js模拟登录和表格的增删改查功能
Jul 26 #Javascript
Vue头像处理方案小结
Jul 26 #Javascript
解决vue this.$forceUpdate() 处理页面刷新问题(v-for循环值刷新等)
Jul 26 #Javascript
vue router 配置路由的方法
Jul 26 #Javascript
vue+webpack模拟后台数据的示例代码
Jul 26 #Javascript
JavaScript设计模式之工厂模式和抽象工厂模式定义与用法分析
Jul 26 #Javascript
vue父组件异步获取数据传给子组件的方法
Jul 26 #Javascript
You might like
php header()函数使用说明
2008/07/10 PHP
php中获取远程客户端的真实ip地址的方法
2011/08/03 PHP
laravel 出现command not found问题的解决方案
2019/10/23 PHP
Aster vs KG BO3 第一场2.19
2021/03/10 DOTA
javascript各种复制代码收集
2008/09/20 Javascript
JQuery 网站换肤功能实现代码
2009/11/02 Javascript
jquery中获取select选中值的代码
2011/06/27 Javascript
javascript实现一个数值加法函数
2015/06/26 Javascript
AngularJS初始化静态模板详解
2016/01/14 Javascript
基于javascript bootstrap实现生日日期联动选择
2016/04/07 Javascript
jquery中的常见问题及快速解决方法小结
2016/06/14 Javascript
JS图片放大效果简单实现代码
2016/09/08 Javascript
jquery 动态增加删除行的简单实例(推荐)
2016/10/12 Javascript
JavaScript微信定位功能实现方法
2016/11/29 Javascript
Node.js 使用命令行工具检查更新
2017/06/08 Javascript
json对象及数组键值的深度大小写转换问题详解
2018/03/30 Javascript
vue指令之表单控件绑定v-model v-model与v-bind结合使用
2019/04/17 Javascript
仿iPhone通讯录制作小程序自定义选择组件的实现
2019/05/23 Javascript
Webpack中loader打包各种文件的方法实例
2019/09/03 Javascript
js实现时间日期校验
2020/05/26 Javascript
在Python中使用matplotlib模块绘制数据图的示例
2015/05/04 Python
基于使用paramiko执行远程linux主机命令(详解)
2017/10/16 Python
对python打乱数据集中X,y标签对的方法详解
2018/12/14 Python
python广度优先搜索得到两点间最短路径
2019/01/17 Python
Python @property及getter setter原理详解
2020/03/31 Python
python字符串的index和find的区别详解
2020/06/20 Python
详解HTML5 canvas绘图基本使用方法
2018/01/29 HTML / CSS
html5配合css3实现带提示文字的输入框(摆脱js)
2013/03/08 HTML / CSS
html5 canvas实现给图片添加平铺水印
2019/08/20 HTML / CSS
澳大利亚手表品牌:Time IV Change
2018/10/06 全球购物
英国家居装饰品、户外家具和玻璃器皿购物网站:Rinkit.com
2019/11/04 全球购物
英国在线药房和在线药剂师:Chemist 4 U
2020/01/05 全球购物
市场营销职业生涯规划书范文
2014/01/12 职场文书
机械设计及其自动化求职推荐信
2014/02/17 职场文书
党员反对四风问题思想汇报
2014/09/12 职场文书
2015年社区综治宣传月活动总结
2015/03/25 职场文书