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 相关文章推荐
jQuery动态添加的元素绑定事件处理函数代码
Aug 02 Javascript
JavaScript限定复选框的选择个数示例代码
Aug 25 Javascript
原生js实现复制对象、扩展对象 类似jquery中的extend()方法
Aug 30 Javascript
javascript初学者常用技巧
Sep 02 Javascript
JavaScript语言精粹经典实例(整理篇)
Jun 07 Javascript
vue时间格式化实例代码
Jun 13 Javascript
AngularJS通过ng-Img-Crop实现头像截取的示例
Aug 17 Javascript
VUE中v-on:click事件中获取当前dom元素的代码
Aug 22 Javascript
layui表单验证select下拉框实现验证的方法
Sep 05 Javascript
js判断复选框是否选中的方法示例【基于jQuery】
Oct 10 jQuery
JS实现音量控制拖动
Jan 15 Javascript
element el-table表格的二次封装实现(附表格高度自适应)
Jan 19 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 获取mysql数据库信息代码
2009/03/12 PHP
php定界符
2014/06/19 PHP
php支付宝在线支付接口开发教程
2016/09/19 PHP
PHP实现一个限制实例化次数的类示例
2019/09/16 PHP
另类调用flash无须激活的方法
2006/12/27 Javascript
jquery创建一个ajax关键词数据搜索实现思路
2013/02/26 Javascript
jQuery ajax dataType值为text json探索分享
2013/09/23 Javascript
原生JS操作网页给p元素添加onclick事件及表格隔行变色
2013/12/01 Javascript
JS、CSS以及img对DOMContentLoaded事件的影响
2014/08/12 Javascript
jQuery层动画定位滑动效果的方法
2015/04/30 Javascript
js获取字符串字节数方法小结
2015/06/09 Javascript
JS实现横向拉伸动感伸缩菜单效果代码
2015/09/04 Javascript
javascript日期验证之输入日期大于等于当前日期
2015/12/13 Javascript
以JavaScript来实现WordPress中的二级导航菜单的方法
2015/12/14 Javascript
JS实现的在线调色板实例(附demo源码下载)
2016/03/01 Javascript
深入理解jquery自定义动画animate()
2016/05/24 Javascript
jQuery继承extend用法详解
2016/10/10 Javascript
JS中用try catch对代码运行的性能影响分析
2016/12/26 Javascript
使用vue构建移动应用实战代码
2017/08/02 Javascript
基于ES6 Array.of的用法(实例讲解)
2017/09/05 Javascript
详解用函数式编程对JavaScript进行断舍离
2017/09/18 Javascript
JS实现为动态创建的元素添加事件操作示例
2018/03/17 Javascript
详解vue.js根据不同环境(正式、测试)打包到不同目录
2018/07/13 Javascript
Angular 中使用 FineReport不显示报表直接打印预览
2019/08/21 Javascript
js+canvas绘制图形验证码
2020/09/21 Javascript
python输入错误密码用户锁定实现方法
2017/11/27 Python
详解用TensorFlow实现逻辑回归算法
2018/05/02 Python
GitHub 热门:Python 算法大全,Star 超过 2 万
2019/04/29 Python
python实现logistic分类算法代码
2020/02/28 Python
我们是伦敦女孩:WalG
2018/01/08 全球购物
反腐倡廉警示教育活动总结
2014/05/05 职场文书
企业安全生产承诺书
2014/05/22 职场文书
公司财务会计主管应聘求职信
2014/09/26 职场文书
长城英文导游词
2015/01/30 职场文书
工程资料员岗位职责
2015/04/13 职场文书
对公司的意见和建议
2015/06/04 职场文书