JavaScript设计模式之观察者模式实例详解


Posted in Javascript onJanuary 16, 2019

本文实例讲述了JavaScript设计模式之观察者模式。分享给大家供大家参考,具体如下:

观察者模式

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

* 它分为2个角色:(1)观察者  (2)被观察者
* 观察者模式的目的:对程序的内在变化进行观察,当其有变化的时候,你可以得知,并且可以做出相应的反应。

现在我们通过一个需求来学习该模式:模拟订阅者和报社之间的关系

在这个过程中:实际的操作分为(推模式,拿模式)

(1)推送-->长连接技术
(2)拿模式-->定时去后台去取得

使用代码实现如下:

(1)发布类

//发布类
function BusinessOne(name){
  this.name=name;
  //订阅者集合
  this.subscribers=new Array();
}

(2)扩展一个发布者的发布消息的方法(推模式)

//发布者的发送消息的方法(推模式)
BusinessOne.prototype.delive=function (news) {
  var self=this;
  //给每一个订阅者发布消息
  this.subscribers.forEach(function (fn) {
    //调用接受者处理信息的函数
         fn(news,self);
  })
}

(3)扩展公共订阅的函数,和取消订阅的函数

订阅的函数:

Function.prototype.subscribe=function (publisher) {
  var that=this;
  //some 访问数组度i型并且以参数的形式传回回调函数中
  //只要至少有一次返回是true那么some就是true
  var alreadyExists=publisher.subscribers.some(function (el) {
    if(el==that){
      //处理不能重复订阅的功能
      return ;
    }
  });
  //没用订阅你就可以订阅
  if(!alreadyExists){
    publisher.subscribers.push(that);
  }
  return this;
}

取消的函数:

Function.prototype.unsubscribe =function (publisher) {
  var that = this;
  publisher.subscribers=publisher.subscribers.filter(function (el) {//过滤的实质是返回除开与当前对象相等的其余所用的对象集合
    if(el!==that){
      return el;
    }
  });
  return this;
}

(4)创建发布的实例

//创建发布者的实例
var b1 = new BusinessOne("CCTV");
var b2 = new BusinessOne("中国国防部报社");

(5)发布部分

(5.1)使用门面模式--针对各浏览器的事件绑定兼容问题

function addEventFacade(el,type,fn) {
  if(window.addEventListener){
    //firefox
    el.addEventListener(type,fn);
  }else if(window.attachEvent){
    //使用是IE
    el.attachEvent("on"+type,fn);
  }else {
    el["on"+type] = fn;
  }
}

(5.2)创建主应用函数

var inint=function () {
  //创建观察者
  var pageOne=function (news) {
    document.getElementById("info").value="我发现了: "+"["+arguments[1].name+"]发来的信息--->"+news
  };
  //订阅1
  pageOne.subscribe(b1).subscribe(b2);
  addEventFacade(document.getElementById("cctv"),"click",function () {
    b1.delive(document.getElementById("cctvText").value);
  })
  //订阅2
  addEventFacade(document.getElementById("gfb"),"click",function () {
    b2.delive(document.getElementById("gfbText").value);
  })
}

最后,订阅者界面

<body onload="inint()">
<div id="div01"></div>
<script type="text/javascript" src="observer.js"></script>
<input type="button" value="CCTV发送" id="cctv">
<input type="text" id="cctvText">
<br><br><br>
<input type="button" value="国防部报社发送" id="gfb">
<input type="text" id="gfbText">
<br><br><br>
<textarea id="info" cols="60" rows="20"></textarea>
<script src="Js/设计模式第三部分/观察者模式/lib.js"></script>
<script src="Js/设计模式第三部分/观察者模式/观察者模式.js"></script>
</body>

效果为:

(1)cctv模块的

JavaScript设计模式之观察者模式实例详解

(2)gfb的效果为:

JavaScript设计模式之观察者模式实例详解

补充:上述用到的forEach方法和filter方法代码为:

Function.prototype.method = function(name, fn) {
   this.prototype[name] = fn;
   return this;
  };
  if (!Array.prototype.forEach) {
   Array.method('forEach', function(fn, thisObj) {
    var scope = thisObj || window;
    for ( var i = 0;len < this.length; ++i ) {
      //这样写不是简单的函数调用,是在函数调用的同事把this重新定位
      fn.call(scope, this[i], i, this);
    }
   });
  }
  //Array过滤器
  if (!Array.prototype.filter ) {
   Array.method('filter', function(fn, thisObj) {
    var scope = thisObj || window;
    var a = [];
    for ( var i = 0;i < this.length; ++i ) {
       //看看过滤函数,真留下来,假的删除
       if ( !fn.call(scope, this[i], i, this) ) {//过滤的实质是返回除开与当前对象相等的其余所用的对象集合
          continue;
       }
       a.push(this[i]);
    }
    //返回新的数组
    return a;
   });
  }

总结:

JavaScript设计模式之观察者模式实例详解

1.支持简单的广播通信,自动通知所有的监听者。

2.当页面载入后,被观察对象很容易与观察者有一种动态关联的关系,来增加灵活性。

3.被观察对象,与观察者之间的抽象耦合关系能够单独的扩展和重用。

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

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

Javascript 相关文章推荐
javascript实现面向对象类的功能书写技巧
Mar 07 Javascript
javascript常用方法总结
May 14 Javascript
基于JS实现的随机数字抽签实例
Dec 08 Javascript
jQuery 全选 全不选 事件绑定的实现代码
Jan 23 Javascript
js return返回多个值,通过对象的属性访问方法
Feb 21 Javascript
JavaScript拖动层Div代码
Mar 01 Javascript
vue时间格式化实例代码
Jun 13 Javascript
Vue组件和Route的生命周期实例详解
Feb 10 Javascript
JavaScript创建防篡改对象的方法分析
Dec 30 Javascript
利用es6 new.target来对模拟抽象类的方法
May 10 Javascript
js实现淘宝首页的banner栏效果
Nov 26 Javascript
部署vue+Springboot前后端分离项目的步骤实现
May 31 Javascript
JavaScript设计模式之命令模式实例分析
Jan 16 #Javascript
js删除数组中某几项的方法总结
Jan 16 #Javascript
JavaScript设计模式之责任链模式实例分析
Jan 16 #Javascript
JavaScript设计模式之代理模式实例分析
Jan 16 #Javascript
vue-cli中vue本地实现跨域调试接口
Jan 16 #Javascript
vue element动态渲染、移除表单并添加验证的实现
Jan 16 #Javascript
深入koa-bodyparser原理解析
Jan 16 #Javascript
You might like
德生BCL3000的电路分析和打磨
2021/03/02 无线电
分享一则PHP定义函数代码
2015/02/26 PHP
PHP实现可自定义样式的分页类
2016/03/29 PHP
javascript+dom树型菜单类,希望朋友们一起进步
2007/05/03 Javascript
各种常用浏览器getBoundingClientRect的解析
2009/05/21 Javascript
JavaScript 学习笔记(十六) js事件
2010/02/01 Javascript
firefox下input type=&quot;file&quot;的size是多大
2011/10/24 Javascript
js随机颜色代码的多种实现方式
2013/04/23 Javascript
Javascript排序算法之计数排序的实例
2014/04/05 Javascript
Ajax分页插件Pagination从前台jQuery到后端java总结
2016/07/22 Javascript
Vuejs第一篇之入门教程详解(单向绑定、双向绑定、列表渲染、响应函数)
2016/09/09 Javascript
canvas实现动态小球重叠效果
2017/02/06 Javascript
vuejs2.0实现分页组件使用$emit进行事件监听数据传递的方法
2017/02/22 Javascript
js数字舍入误差以及解决方法(必看篇)
2017/02/28 Javascript
vue项目中用cdn优化的方法
2018/01/03 Javascript
关于ES6箭头函数中的this问题
2018/02/27 Javascript
基于vue,vue-router, vuex及addRoutes进行权限控制问题
2018/05/02 Javascript
Vue Element UI + OSS实现上传文件功能
2019/07/31 Javascript
NUXT SSR初级入门笔记(小结)
2019/12/16 Javascript
[44:40]Serenity vs Pain 2018国际邀请赛小组赛BO2 第一场 8.19
2018/08/21 DOTA
python遍历一个目录,输出所有的文件名的实例
2018/04/23 Python
Python多继承顺序实例分析
2018/05/26 Python
Python 获取主机ip与hostname的方法
2018/12/17 Python
python实现剪切功能
2019/01/23 Python
Pytorch maxpool的ceil_mode用法
2020/02/18 Python
使用Python内置模块与函数进行不同进制的数的转换
2020/04/26 Python
如何将json数据转换为python数据
2020/09/04 Python
利用Python函数实现一个万历表完整示例
2021/01/23 Python
CSS3中:nth-child和:nth-of-type的区别深入理解
2014/03/10 HTML / CSS
html5+css3之动画在webapp中的应用
2014/11/21 HTML / CSS
马德里运动鞋商店:Nigra Mercato
2020/02/16 全球购物
金融系毕业生自荐书
2014/07/08 职场文书
重阳节活动总结
2014/08/27 职场文书
大学生旷课检讨书1000字
2015/02/19 职场文书
项目经理助理岗位职责
2015/04/13 职场文书
HTML+css盒子模型案例(圆,半圆等)“border-radius” 简单易上手
2021/05/10 HTML / CSS