1.  <!DOCTYPE html>
  2.  <html>
  3.      <head>
  4.          <meta charset="UTF-8">
  5.          <title>javascript高级语法22-观察者模式</title>
  6.      </head>
  7.      <body onload="init()">
  8.          <div id="box"></div>
  9.          <script>
  10.              //扩展函数  forEach和filter
  11.  
  12.              Function.prototype.method = function(name, fn) {
  13.                this.prototype[name] = fn;
  14.                return this;
  15.              };
  16.              if (!Array.prototype.forEach) {
  17.                Array.method('forEach', function(fn, thisObj) {
  18.                  var scope = thisObj || window;
  19.                  for ( var i = 0;len < this.length; ++i ) {
  20.                     //这样写不是简单的函数调用,是在函数调用的同事把this重新定位
  21.                     fn.call(scope, this[i], i, this);
  22.                  }
  23.                });
  24.              }
  25.              //Array过滤器
  26.              if (!Array.prototype.filter ) {
  27.                Array.method('filter', function(fn, thisObj) {
  28.                  var scope = thisObj || window;
  29.                  var a = [];
  30.                  for ( var i = 0;len < this.length; ++i ) {
  31.                        //看看过滤函数,真留下来,假的删除
  32.                        if ( !fn.call(scope, this[i], i, this) ) {
  33.                             continue;
  34.                        }
  35.                        a.push(this[i]);
  36.                  }
  37.                  //返回新的数组
  38.                  return a;
  39.                });
  40.              }
  41.  
  42.              /*观察者模式：
  43.               * 分为两个角色:观察者和被观察者
  44.               * 观察者模式的目的在于对程序的内在变化进行观察，当其有变化的时候可以得知，并作出相应反应
  45.               */
  46.  
  47.              /*模拟订阅者和报社之间的关系
  48.               *实际操作分为（推模式，拿模式）
  49.               * 推送->长链接技术
  50.               * 拿模式->定时去后台取得
  51.              */
  52.  
  53.              function BusinessOne(name){
  54.                  this.name = name;
  55.                  //订阅者集合
  56.                  this.subscribers = new Array();
  57.              }
  58.              //订阅者的发送消息的方法（推模式）
  59.              BusinessOne.prototype.delive = function(news){
  60.                  var self = this;
  61.                  //给每一个订阅者发送消息
  62.                  this.subscribers.forEach(function(fn){
  63.                      //调用接收者处理信息的函数
  64.                      fn(news,self);
  65.                  })
  66.              }
  67.              //扩展公共订阅的函数和取消订阅的函数
  68.              Function.prototype.subscribe = function(publisher){
  69.                  var that = this;
  70.                  //some访问数组对象，并且以参数的形式传回回调函数
  71.                  //至少有一次返回是true的  那么some就是真
  72.                  var alreadyExist = publisher.subscribers.some(
  73.                      function(el){
  74.                          //处理不能重复订阅的功能
  75.                          if(el == that){
  76.                              return;
  77.                          }
  78.                      }
  79.                  );
  80.                  //没有订阅就可以订阅
  81.                  if(!alreadyExist){
  82.                      publisher.subscribers.push(that);
  83.                  }
  84.                  return this;
  85.              }
  86.              //取消
  87.              Function.prototype.unsubscribe = function(publisher){
  88.                  var that = this;
  89.                  publisher.subscribers = publisher.subscribers.filter(
  90.                      function(el){
  91.                          if(el !== that){
  92.                              return el;
  93.                          }
  94.                      }
  95.                  );
  96.                  return this;
  97.              }
  98.  
  99.              //创建发布者的实例
  100.              var b1 = new BusinessOne("CCTV");
  101.              var b2 = new BusinessOne("中国国防部");
  102.  
  103.              //发布（门面模式）
  104.              function addEventFacada(el,type,fn){
  105.                  if(window.addEventListener){
  106.                      //firefox
  107.                      el.addEventListener(type,fn,false);
  108.                  }else if(window.attachEvent){
  109.                      //IE
  110.                      el.attachEvent("on"+type,fn);
  111.                  }else{
  112.                      el["on"+type] = fn;
  113.                  }
  114.              }
  115.              //主应用函数
  116.              var init = function(){
  117.                  //创建观察者
  118.                  var pageOne = function(news){
  119.                      document.getElementById("info").value =
  120.                          "我发现了： "+"["+arguments[1].name +"] 发来的信息 --->"+news;
  121.                  }
  122.                  //订阅
  123.                  pageOne.subscribe(b1).subscribe(b2);
  124.                  //增加绑定事件
  125.                  addEventFacada(document.getElementById("cctv"),"click",function(){
  126.                      b1.delive(document.getElementById("cctvText").value);
  127.                  });
  128.                  addEventFacada(document.getElementById("gfb"),"click",function(){
  129.                      b2.delive(document.getElementById("gfbText").value);
  130.                  });
  131.              }
  132.          </script>
  133.  
  134.          <input type="text"  id="cctvText"/>
  135.          <input type="button" value='cctv发送' id="cctv"/>
  136.          <br />
  137.          <input type="text"  id="gfbText"/>
  138.          <input type="button" value='国防部发送' id="gfb"/>
  139.          <br />
  140.          <textarea id="info" cols="60" rows="20"></textarea>
  141.  
  142.      </body>
  143.  </html>

JavaScript设计模式-22.观察者模式的更多相关文章

  1. JavaScript设计模式之观察者模式（学习笔记）

    设计模式(Design Pattern)对于软件开发来说其重要性不言而喻,代码可复用.可维护.可扩展一直都是软件工程中的追求!对于我一个学javascript的人来说,理解设计模式似乎有些困难,对仅切 ...

  2. 再起航，我的学习笔记之JavaScript设计模式18(观察者模式)

    观察者模式 观察者模式(Observer): 又被称为发布-订阅者模式或消息机制,定义了一种依赖关系,解决了主体对象与观察者之间功能的耦合. 创建一个观察者对象 首先我们创建一个闭包对象,让其在页面加 ...

  3. 再起航，我的学习笔记之JavaScript设计模式22(访问者模式)

    访问者模式 概念介绍 访问者模式(Visitor): 针对于对象结构中的元素,定义在不改变该对象的前提下访问结构中元素的新方法 解决低版本IE兼容性 我们来看下面这段代码,这段代码,我们封装了一个绑定 ...

  4. javascript设计模式之观察者模式

    观察者模式又称发布/订阅模式   publish/subscribe 它是一种一对多的关系,让多个观察者对象同时监听某一主题对象,这个主题对象的状态发生变化时就会通知所有的观察者对象,使得他们能够自动 ...

  5. javascript 设计模式之观察者模式

    观察者模式又叫发布——订阅模式,顾名思义pub——sub就是被动触发的,:不要给我......,我会给你.......就是一个发布订阅的解释,实质就是对程序中的某个对象状态进行监听观察,并且在该对象发 ...

  6. JavaScript设计模式(10)-观察者模式

    观察者模式 1. 介绍 发布者与订阅者是多对多的方式 通过推与拉获取数据:发布者推送到订阅者或订阅者到发布者那边拉 使并行开发的多个实现能彼此独立地进行修改 其实我们在前端开发中使用到的时间监听就是浏 ...

  7. JavaScript设计模式与开发实践 - 观察者模式

    概述 观察者模式又叫发布 - 订阅模式(Publish/Subscribe),它定义了一种一对多的关系,让多个观察者对象同时监听某一个目标对象(为了方便理解,以下将观察者对象叫做订阅者,将目标对象叫做 ...

  8. javaScript 设计模式系列之一：观察者模式

    介绍 观察者模式又叫发布订阅模式(Publish/Subscribe),一个目标对象管理所有相依于它的观察者对象.该模式中存在两个角色:观察者和被观察者.目标对象与观察者之间的抽象耦合关系能够单独扩展 ...

  9. Javascript设计模式之我见：观察者模式

    大家好!本文介绍观察者模式及其在Javascript中的应用. 模式介绍 定义 定义对象间一种一对多的依赖关系,使得每当一个对象改变状态,则所有依赖于它的对象都会得到通知并被自动更新. 类图及说明 S ...

随机推荐

  1. OpenGl中的Nurbs B样条曲面的封装的GLU的NURBS的接口

    OpenGl中的Nurbs B样条曲面的封装的GLU的NURBS的接口 创建一个NURBS对象: GLUnurbs* gluNewNurbsRenderer (void); //创建一个NURBS对象 ...

  2. 2.自己的Github试用过程

    打开我个人的Github,我试着做些简单的试用.首先,经过简短描述,我成功创建了一个新的存储库

  3. Hadoop 集群配置记录小结

    Hadoop集群配置往往按照网上教程就可以"配置成功",但是你自己在操作的时候会有很多奇奇怪怪的问题出现, 我在这里整理了一下常见的问题与处理方法: 1.配置/etc/hosts ...

  4. 目前主流的四大浏览器内核Trident、Gecko、WebKit以及Presto

    “浏览器内核”主要指渲染引擎(Rendering Engine),负责解析网页语法(如HTML.JavaScript)并渲染.展示网页.因此,所谓的浏览器内核通常也就是指浏览器所采用的渲染引擎,渲染引 ...

  5. 记在WEBAPI中AutoMapper的初使用方法

    很早就听说AutoMapper了.这些天一直在写api接口,发现之前的类型转换有点问题,就想到了用AutoMapper.用作DTO转换工具.  废话不多说,直接开些代码 首先 在Vs中找到 工具--- ...

  6. PostgreSQL递归查询

    原料 --创建组织架构表 create table "Org"( "OrgId" ) primary key, "ParentId" ), ...

  7. C++ windows进程间通信

    最近一直在找共享内存同步的操作,恰好这篇文章有讲解.本文转载:https://blog.csdn.net/bing_bing_bing_/article/details/82875302 方便记录,c ...

  8. update sharepoint 2013 cu error

    1. 安装过程合理: A. 可以同时在管理中心.两台前端.搜索服务器上安装重新发布的SP1补丁包(所提供的链接) B. 等待所有SP1补丁包安装完成,依次在管理中心.两台前端.搜索服务器上运行配置向导 ...

  9. sql trace script

    CREATE EVENT SESSION [sql_query_tracing] ON SERVER ADD EVENT sqlos.wait_info(    ACTION(sqlos.schedu ...

  10. php中mvc框架总结1（7）

    1．代码结构的划分: 目前的目录结构: /站点根目录 /application/应用程序目录 Model/模型目录 View/视图目录 Back/后台 front/ test/测试平台 Control ...