小昱个人博客
欢迎来到小昱的世界

勤学如春起之苗,不见其增,日有所长;辍学如磨刀之石,不见其损,日有所亏
JS设计模式: 观察者模式
  • 首页 > 前端 > JavaScript
  • 作者:小昱
  • 2017年9月12日 9:50 星期二
  • 浏览:117
  • 字号:
  • 评论:2
  • 一、观察者模式

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

    使用观察者模式的好处:

    1. 支持简单的广播通信,自动通知所有已经订阅过的对象。
    2. 页面载入后目标对象很容易与观察者存在一种动态关联,增加了灵活性。
    3. 目标对象与观察者之间的抽象耦合关系能够单独扩展以及重用。

    实际上,观察者模式跟事件监听原理一样。

     

    二、JS实现

    (引用汤姆大叔的例子进行说明)

    1. 使用闭包

    var pubsub = {};
    (function (q) {
      var topics = {}, // 回调函数存放的数组
        subUid = -1;
      // 发布方法
      q.publish = function (topic, args) {
        console.log(topics)
        console.log(topics[topic])
        if (!topics[topic]) {
          return false;
        }
        setTimeout(function () {
          var subscribers = topics[topic],
            len = subscribers ? subscribers.length : 0;
          while (len--) {
            subscribers[len].func(topic, args);
          }
        }, 0);
        return true;
      };
      //订阅方法
      q.subscribe = function (topic, func) {
        if (!topics[topic]) {
          topics[topic] = [];
        }
        var token = (++subUid).toString();
        topics[topic].push({
          token: token,
          func: func
        });
        return token;
      };
      //退订方法
      q.unsubscribe = function (token) {
        for (var m in topics) {
          if (topics[m]) {
            for (var i = 0, j = topics[m].length; i < j; i++) {
              if (topics[m][i].token === token) {
                topics[m].splice(i, 1);
                return token;
              }
            }
          }
        }
        return false;
      };
    } (pubsub));
    
    console.log(pubsub)
    
    //订阅一个
    pubsub.subscribe('example1', function (topics, data) {
      console.log('【' + topics + ": " + data + '】');
    });
    pubsub.subscribe('example1', function (topics, data) {
      console.log('topic: ' + topics, ', type: ', typeof data + ': ', typeof data === 'object' ? eval(data) : data);
    });
    
    //发布通知
    pubsub.publish('example1', 'hello world!');
    pubsub.publish('example1', ['test', 'a', 'b', 'c']);
    pubsub.publish('example1', [{ 'color': 'blue' }, { 'text': 'hello'}]);
    console.log(pubsub)

    从上面的例子可以看出,有一个发布中心pubsub,包括三个方法: 订阅(subscribe)、发布(publish)、退订(unsubscribe)

    订阅相当于事件注册,向发布中心添加一个主题,并绑定发布主题时执行的方法

    发布相当于事件监听,当对应的主题发生改变的时候回调对应的方法

    退订相当于时间注销,不解释了

     

    2. 使用原型

    function Observer() {
      this.fns = [];
    }
    Observer.prototype = {
      subscribe: function (fn) {
        this.fns.push(fn);
      },
      unsubscribe: function (fn) {
        this.fns = this.fns.filter(
          function (el) {
            if (el !== fn) {
              return el;
            }
          }
        );
      },
      update: function (o, thisObj) {
        var scope = thisObj || window;
        this.fns.forEach(
          function (el) {
            el.call(scope, o);
          }
        );
      }
    };
    
    var o = new Observer;
    var f1 = function (data) {
      console.log('Robbin: ' + data + ', 赶紧干活了!');
    };
    
    var f2 = function (data) {
      console.log('Randall: ' + data + ', 找他加点工资去!');
    };
    
    o.subscribe(f1);
    o.subscribe(f2);
    
    o.update("Tom回来了!")
    
    //退订f1
    o.unsubscribe(f1);
    //再来验证
    o.update("Tom回来了!");

    与例1不同的是,观察者需要new,而不是加入到发布中心。针对特定的订阅者可以发布不同的内容。

    如果浏览器不支持forEach或filter,可以自定义实现:

    if (!Array.prototype.forEach) {
    	Array.prototype.forEach = function (fn, thisObj) {
    		var scope = thisObj || window;
    		for (var i = 0, j = this.length; i < j; ++i) {
    			fn.call(scope, this[i], i, this);
    		}
    	};
    }
    if (!Array.prototype.filter) {
    	Array.prototype.filter = function (fn, thisObj) {
    		var scope = thisObj || window;
    		var a = [];
    		for (var i = 0, j = this.length; i < j; ++i) {
    			if (!fn.call(scope, this[i], i, this)) {
    				continue;
    			}
    			a.push(this[i]);
    		}
    		return a;
    	};
    }

     

    3. 使用对象

    //通用代码
    var observer = {
      //订阅
      addSubscriber: function (callback) {
        this.subscribers[this.subscribers.length] = callback;
      },
      //退订
      removeSubscriber: function (callback) {
        for (var i = 0; i < this.subscribers.length; i++) {
          if (this.subscribers[i] === callback) {
            delete (this.subscribers[i]);
          }
        }
      },
      //发布
      publish: function (what) {
        for (var i = 0; i < this.subscribers.length; i++) {
          if (typeof this.subscribers[i] === 'function') {
            this.subscribers[i](what);
          }
        }
      },
      // 将对象o具有观察者功能
      make: function (o) {
        for (var i in this) {
          o[i] = this[i];
          o.subscribers = [];
        }
      }
    };
    
    var blogger = {
      recommend: function (id) {
        var msg = 'dudu 推荐了的帖子:' + id;
        this.publish(msg);
      }
    };
    
    var user = {
      vote: function (id) {
        var msg = '有人投票了!ID=' + id;
        this.publish(msg);
      }
    };
    
    observer.make(blogger);
    observer.make(user);
    
    console.log(blogger)
    console.log(user)
    
    var tom = {
      read: function (what) {
        console.log('Tom看到了如下信息:' + what)
      }
    };
    
    var mm = {
      show: function (what) {
        console.log('mm看到了如下信息:' + what)
      }
    };
    // 订阅
    blogger.addSubscriber(tom.read);
    blogger.addSubscriber(mm.show);
    blogger.recommend(123); //调用发布
    
    //退订
    blogger.removeSubscriber(mm.show);
    blogger.recommend(456); //调用发布
    
    //另外一个对象的订阅
    user.addSubscriber(mm.show);
    user.vote(789); //调用发布

    可以看到,观察者对象observer的make方法相当于继承功能的实现,可以用此方法扩展子对象。

    每个通过make方法添加的对象都是一个观察者对象,拥有订阅、发布、退订功能,当然也可以通过make方法扩展自己的子类。

     

    4. jQuery版本

    (function ($) {
      var o = $({});
      $.subscribe = function () {
        o.on.apply(o, arguments);
      };
      $.unsubscribe = function () {
        o.off.apply(o, arguments);
      };
      $.publish = function () {
        o.trigger.apply(o, arguments);
      };
    } (jQuery));
    
    //回调函数
    function handle(e, a, b, c) {
      // `e`是事件对象,不需要关注
      console.log(a + b + c);
    };
    
    //订阅
    $.subscribe("/some/topic", handle);
    //发布
    $.publish("/some/topic", ["a", "b", "c"]); // 输出abc
    $.unsubscribe("/some/topic", handle); // 退订
    
    //订阅
    $.subscribe("/some/topic", function (e, a, b, c) {
      console.log(a + b + c);
    });
    $.publish("/some/topic", ["a", "b", "c"]); // 输出abc
    //退订(退订使用的是/some/topic名称,而不是回调函数哦,和版本一的例子不一样
    $.unsubscribe("/some/topic");

    通过jQuery的on、off、trigger方法就可以实现订阅-发布。

    可以看到,jQuery的订阅和退订使用的是字符串名称,而不是回调函数名称,所以即便传入的是匿名函数,也是可以退订的。

     

      您阅读这篇文章共花了:  
    二维码加载中...
    本文作者:小昱      文章标题: JS设计模式: 观察者模式
    本文地址:http://www.xiaoyulive.top/?post=137
    版权声明:若无注明,本文皆为“小昱个人博客”原创,转载请保留文章出处。
    Blago93lat2018-02-22 19:19
    Оказываем услуги от ямочного ремонта небольших дворовых территорий до строительства городского паркинга и дорог муниципального и федерального значения.

    Асфальтирование в ЮФО

    Зонирование, повышение комфорта, экологии. Проведение комплексного озеленения, установка вспомогательных архитектурных сооружений и других элементов по индивидуальному проекту.

    Восстановление первоначальных характеристик эксплуатации дорожного полотна, оперативное устранение небольших дефектов и повреждений покрытия, улучшение ровности и сцепных качеств дороги. Разметка дорог.

    Асфальтирование для легкового транспорта
    Асфальтирование ангаров/складов
    Высокая конкурентоспособность, выполнение работ "день в день", а так же репутация надежного и качественного подрядчика.
    Ответственные специалисты, парк спецтехники, ВЫЕЗД СПЕЦИАЛИСТА В ДЕНЬ ОБРАЩЕНИЯ Бесплатно!
    Асфальтирование, Установка бордюров, Топографическая съемка, Разбивка любой сложности осей зданий, сооружений, линейных объектов

    ____________________________________
    мку управление коммунального хозяйства и благоустройства муниципального образования город краснодар
    героев разведчиков краснодар благоустройство
    управление по благоустройству города краснодара

    ----------------------
    http://благоустройство-краснодар.рф/
    Asfalt93Hami2018-02-06 20:40
    благоустройство района ивановское
    муниципальное унитарное предприятие благоустройство вольск
    заявка на асфальтирование территории в администрацию
    о благоустройство в рк
    устав бюджетного учреждения благоустройство
    返回顶部| 首页| 碰碰手气| 捐赠支持| 手机版本|后花园

    Copyright © 2016-2017 小昱个人博客 滇ICP备16006294号