zoukankan      html  css  js  c++  java
  • javascript 设计模式之观察者模式

    观察者模式又叫发布——订阅模式,顾名思义pub——sub就是被动触发的,:不要给我......,我会给你.......就是一个发布订阅的解释,实质就是对程序中的某个对象状态进行监听观察,并且在该对象发生改变时能得到通知,下面我通过一个通用的Observer来方便对象实现发布订阅,

    var Observer = {
      addSub: function(callback){
        this._subList.push(callback);
      },
      removeSub: function(callback){
        for(var i=0; i<this._subList.length; i++){
          if(this._subList[i] === callback){
            delete this._subList[i];
          }
        }
      },
      publish: function(what){
          for(var i=0; i<this._subList.length; i++){
            if(typeof this._subList[i] === "function"){
              this._subList[i](what);
            }
          }
      },

          //使object是发布订阅对象
      makeObserver: function(obj){
          for(var key in this){
            obj[key] = this[key];
            obj._subList = [];
          }
        }
      };
    //-----------------------------------------------------------------发布对象

    var person1 = {
      recommend: function(str){
        var msg = "person1 发布的数据 " + str;
        this.publish(msg);
      }
    };
    var person2 = {
      recommend: function(str){
        var msg = "person2 发布的数据 " + str;
        this.publish(msg);
      }
    };

    Observer.makeObserver(person1);//实现person1对象的发布
    Observer.makeObserver(person2);//实现person2对象的发布
    //-----------------------------------------------------------------订阅对象

    var tom = {
      read: function(what){//订阅方法
        console.log("Tom看到了如下信息:" + what);
      }
    };
    var jack = {
      show: function(what){
        console.log('jack看到了如下信息:' + what)
      }
    }

    person1.addSub(tom.read);
    person1.addSub(jack.show);
    person1.recommend("123");

    console.log("........移除jack的订阅..............");
    person1.removeSub(jack.show);
    person1.recommend("678");
    console.log(".............................");

    person2.addSub(jack.show);
    person2.recommend("456");

  • 相关阅读:
    SpringBoot 系列教程 web 篇之自定义请求匹配条件 RequestCondition
    SpringBoot 系列教程 JPA 错误姿势之环境配置问题
    react中constructor()和super()的具体含义以及如何使用
    原生js之canvas时钟组件
    js求和运算在可变参数的情况下ES3、ES5和ES6的写法区别
    好用的jquery.animateNumber.js数字动画插件
    sublime text3中设置Emmet输入标签自动闭合
    原生js移动端列表无缝间歇向上滚动
    原生js实现preAll和nextAll方法
    基于SwiperJs的H5/移动端下拉刷新上拉加载更多
  • 原文地址:https://www.cnblogs.com/ajun/p/4361371.html
Copyright © 2011-2022 走看看