当前位置: 澳门新濠3559 > 服务器运维 > 正文

【澳门新濠3559】发送短信通知就是一个典型的发

时间:2019-12-08 19:30来源:服务器运维
/* * 示例: * Event.create.listen{ * console.log; * Event.create.trigger; */var Event = { var global = this, Event, _default = 'default'; Event = function() { var _listen, _trigger, _remove, _slice = Array.prototype.slice, _shift = Array
/* * 示例: * Event.create.listen{ * console.log; * Event.create.trigger; */var Event =  { var global = this, Event, _default = 'default'; Event = function() { var _listen, _trigger, _remove, _slice = Array.prototype.slice, _shift = Array.prototype.shift, _unshift = Array.prototype.unshift, namespaceCache = [], _create, find, each = function { var ret; for(var i = 0, l = ary.length; i < l; i++) { var n = ary[i]; ret = fn.call; } return ret; }; // 订阅 _listen = function { if { cache[key] = []; } cache[key].push; }; // 移除订阅 _remove = function { if { for(var i = cache[key].length; i >=0; i++) { if { cache[key].splice; } } }else { cache[key] = []; } } }; // 发布 _trigger = function() { var cache = _shift.call, key = _shift.call, args = arguments, _self = this, ret, stack = cache[key]; if(!stack || !stack.length) { return; } return each { return this.apply; }; // 创建命名空间 _create = function { var namespace = namespace || _default; var cache = {}, offlineStack = [], // 离线事件 ret = { listen: function  { _listen; if  { return; } if  { offlineStack.length && offlineStack.pop; } else { each(offlineStack, function ; } offlineStack = null; }, one: function  { _remove; this.listen; }, remove: function { _remove; }, trigger: function() { var fn, args, _self = this; _unshift.call; args = arguments; fn = function() { return _trigger.apply; }; if { return offlineStack.push; } return fn; } }; return namespace ? (namespaceCache[namespace] ? namespaceCache[namespace] : namespaceCache[namespace] = ret) : ret; }; return { create: _create, one: function { var event = this.create(); event.one; }, remove: function { var event = this.create(); event.remove; }, listen: function { var event = this.create(); event.listen; }, trigger: function() { var event = this.create(); event.trigger.apply; } }; };

学习JavaScript设计模式之观察者模式,javascript设计模式

一、定义

观察者模式(发布-订阅模式):其定义对象间一种一对多的依赖关系,当一个对象的状态发生改变时,所有依赖于它的对象都将得到通知。
在JavaScript中,一般使用事件模型来替代传统的观察者模式。
好处:

  • 澳门新濠3559,(1)可广泛应用于异步编程中,是一种替代传递回调函数的方案。

  • (2)可取代对象之间硬编码的通知机制,一个对象不用再显示地调用另外一个对象的某个接口。两对象轻松解耦。

二、DOM事件–观察者模式典例

需要监控用户点击document.body的动作,但是我们没有办法预知用户将在什么时间点击。
所以,我们订阅document.body上的click事件,当body节点被点击时,body节点便向订阅者发布这个消息!

document.body.addEventListener("click", function() {
  console.log(1);
}, false);

// 可以多个订阅者
document.body.addEventListener("click", function() {
  console.log(2);
}, false);

doucment.body.click();

某网站有header头部、nav导航、消息列表等模块。这几个模块的渲染都需要获取用户登陆信息。
(1)一般写法:

$.ajax({
  url: './login',
  type: 'post',
  contentType: 'application/json',
  dataType:'json',
  success: function(data) {
    if(data.status === "success") {
      // 登录成功,渲染header、nav
      header.setInfo(data.headerInfo);
      nav.setInfo(data.navInfo);
    }
  }
});

(2)使用观察者模式,很轻松解耦!

$.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 nav = (function() {
  login.listen("loginsuccess", function(data){
    nav.setInfo(data.navInfo);
  });
  return {
    setInfo: function(data) {
      console.log("设置nav信息");
    }
  }
})();

三、通用观察者模式

/*
 * 示例:
 * Event.create("namespace1").listen('click', function(a){
 *   console.log(a);
 * });
 * Event.create("namespace1").trigger("click", 1);
 */
var Event = (function() {
  var global = this,
    Event,
    _default = 'default';

  Event = function() {
    var _listen,
      _trigger,
      _remove,
      _slice = Array.prototype.slice,
      _shift = Array.prototype.shift,
      _unshift = Array.prototype.unshift,
      namespaceCache = [],
      _create,
      find,
      each = function( ary, fn) {
        var ret;
        for(var i = 0, l = ary.length; i < l; i++) {
          var n = ary[i];
          ret = fn.call(n, i, n);
        }
        return ret;
      };
    // 订阅
    _listen = function(key, fn, cache) {
      if(!cache[key]) {
        cache[key] = [];
      }
      cache[key].push(fn);
    };
    // 移除订阅
    _remove = function(key, cache, fn) {
      if(cache[key]) {
        if(fn) {
          for(var i = cache[key].length; i >=0; i++) {
            if(cache[key][i] === fn) {
              cache[key].splice(i, 1);
            }
          }
        }else {
          cache[key] = [];
        }
      }
    };
    // 发布
    _trigger = function() {
     var cache = _shift.call(arguments),
       key = _shift.call(arguments),
       args = arguments,
       _self = this,
       ret,
       stack = cache[key];
      if(!stack || !stack.length) {
        return;
      }
      return each(stack, function() {
        return this.apply(_self, args);
      });
    };
    // 创建命名空间
    _create = function(namespace) {
      var namespace = namespace || _default;
      var cache = {},
        offlineStack = [], // 离线事件
        ret = {
          listen: function (key, fn, last) {
            _listen(key, fn, cache);
            if (offlineStack == null) {
              return;
            }
            if (last === 'last') {
              offlineStack.length && offlineStack.pop()();
            } else {
              each(offlineStack, function () {
                this();
              });
            }
            offlineStack = null;
          },

          one: function (key, fn, last) {
            _remove(key, cache);
            this.listen(key, fn, last);
          },

          remove: function(key, fn, last) {
            _remove(key, cache, fn);
          },

          trigger: function() {
            var fn,
              args,
              _self = this;
            _unshift.call(arguments, cache);
            args = arguments;
            fn = function() {
              return _trigger.apply(_self, args);
            };
            if(offlineStack) {
              return offlineStack.push(fn);
            }
            return fn;
          }
        };

        return namespace ? (namespaceCache[namespace] ? namespaceCache[namespace] : namespaceCache[namespace] = ret) : ret;
      };

    return {
      create: _create,
      one: function(key, fn, last) {
        var event = this.create();
        event.one(key, fn, last);
      },
      remove: function(key, fn) {
        var event = this.create();
        event.remove(key, fn);
      },
      listen: function(key, fn, last) {
        var event = this.create();
        event.listen(key, fn, last);
      },
      trigger: function() {
        var event = this.create();
        event.trigger.apply(this, arguments);
      }
    };
  }();
  return Event;
})();

【澳门新濠3559】发送短信通知就是一个典型的发布—订阅模式,二、DOM事件–观察者模式典例。希望本文所述对大家学习javascript程序设计有所帮助。

 

前面的话

  发布—订阅模式又叫观察者模式,它定义对象间的一对多的依赖关系,当一个对象的状态发生改变时,所有依赖于它的对象都将得到通知。在javascript开发中,一般用事件模型来替代传统的发布—订阅模式。本文将详细介绍发布订阅模式

 

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

您可能感兴趣的文章:

  • Javascript 模式实例 观察者模式
  • JavaScript设计模式之观察者模式(发布者-订阅者模式)
  • ruby、javascript、php中的观察者模式实现代码
  • Javascript设计模式之观察者模式的多个实现版本实例
  • 浅谈Nodejs观察者模式
  • JavaScript观察者模式(经典)

一、定义 观察者模式(发布-订阅模式):其定义对象间一种一对多的依赖关系,当...

现实事例

  不论是在程序世界里还是现实生活中,发布—订阅模式的应用都非常广泛

  比如,小明最近看上了一套房子,到了售楼处之后才被告知,该楼盘的房子早已售罄。好在售楼处工作人员告诉小明,不久后还有一些尾盘推出,开发商正在办理相关手续,手续办好后便可以购买。但到底是什么时候,目前还没有人能够知道。于是小明记下了售楼处的电话,以后每天都会打电话过去询问是不是已经到了购买时间。除了小明,还有小红、小强、小龙也会每天向售楼处咨询这个问题。一个星期过后,该工作人员决定辞职,因为厌倦了每天回答1000个相同内容的电话

  当然现实中没有这么笨的销售公司,实际上故事是这样的:小明离开之前,把电话号码留在了售楼处。售楼处工作人员答应他,新楼盘一推出就马上发信息通知小明。小红、小强和小龙也是一样,他们的电话号码都被记在售楼处的花名册上,新楼盘推出的时候,售楼处工作人员会翻开花名册,遍历上面的电话号码,依次发送一条短信来通知他们

  在上面的例子中,发送短信通知就是一个典型的发布—订阅模式,小明、小红等购买者都是订阅者,他们订阅了房子开售的消息。售楼处作为发布者,会在合适的时候遍历花名册上的电话号码,依次给购房者发布消息

  使用发布—订阅模式有着显而易见的优点:购房者不用再天天给售楼处打电话咨询开售时间,在合适的时间点,售楼处作为发布者会通知这些消息订阅者;购房者和售楼处之间不再强耦合在一起,当有新的购房者出现时,他只需把手机号码留在售楼处,售楼处不关心购房者的任何情况,不管购房者是男是女还是一只猴子。而售楼处的任何变动也不会影响购买者,比如售楼处工作人员离职,售楼处从一楼搬到二楼,这些改变都跟购房者无关,只要售楼处记得发短信这件事情

 

DOM事件

  发布—订阅模式可以广泛应用于异步编程中,这是一种替代传递回调函数的方案。比如,可以订阅ajax请求的error、succ等事件。或者如果想在动画的每一帧完成之后做一些事情,可以订阅一个事件,然后在动画的每一帧完成之后发布这个事件。在异步编程中使用发布—订阅模式,就无需过多关注对象在异步运行期间的内部状态,而只需要订阅感兴趣的事件发生点

  发布—订阅模式可以取代对象之间硬编码的通知机制,一个对象不用再显式地调用另外一个对象的某个接口。发布—订阅模式让两个对象松耦合地联系在一起,虽然不太清楚彼此的细节,但这不影响它们之间相互通信。当有新的订阅者出现时,发布者的代码不需要任何修改;同样发布者需要改变时,也不会影响到之前的订阅者。只要之前约定的事件名没有变化,就可以自由地改变它们

  实际上,只要在DOM节点上面绑定过事件函数,那就使用过发布—订阅模式

document.body.addEventListener('click',function(){
  alert(2);
},false);
document.body.click();    //模拟用户点击

  在这里需要监控用户点击document.body的动作,但是没办法预知用户将在什么时候点击。所以订阅document.body上的click事件,当body节点被点击时,body节点便会向订阅者发布这个消息

  当然还可以随意增加或者删除订阅者,增加任何订阅者都不会影响发布者代码的编写

document.body.addEventListener('click',function(){
  alert(2);
},false);
document.body.addEventListener('click',function(){
  alert(3);
},false);
document.body.addEventListener('click',function(){
  alert(4);
},false);
document.body.click();    //模拟用户点击

  [注意]手动触发事件更好的做法是IE下用fireEvent,标准浏览器下用dispatchEvent实现

 

某网站有header头部、nav导航、消息列表等模块。这几个模块的渲染都需要获取用户登陆信息。 一般写法:

DOM事件

  发布—订阅模式可以广泛应用于异步编程中,这是一种替代传递回调函数的方案。比如,可以订阅ajax请求的error、succ等事件。或者如果想在动画的每一帧完成之后做一些事情,可以订阅一个事件,然后在动画的每一帧完成之后发布这个事件。在异步编程中使用发布—订阅模式,就无需过多关注对象在异步运行期间的内部状态,而只需要订阅感兴趣的事件发生点

  发布—订阅模式可以取代对象之间硬编码的通知机制,一个对象不用再显式地调用另外一个对象的某个接口。发布—订阅模式让两个对象松耦合地联系在一起,虽然不太清楚彼此的细节,但这不影响它们之间相互通信。当有新的订阅者出现时,发布者的代码不需要任何修改;同样发布者需要改变时,也不会影响到之前的订阅者。只要之前约定的事件名没有变化,就可以自由地改变它们

  实际上,只要在DOM节点上面绑定过事件函数,那就使用过发布—订阅模式

document.body.addEventListener('click',function(){
  alert(2);
},false);
document.body.click();    //模拟用户点击

  在这里需要监控用户点击document.body的动作,但是没办法预知用户将在什么时候点击。所以订阅document.body上的click事件,当body节点被点击时,body节点便会向订阅者发布这个消息

  当然还可以随意增加或者删除订阅者,增加任何订阅者都不会影响发布者代码的编写

澳门新濠3559 1

document.body.addEventListener('click',function(){
  alert(2);
},false);
document.body.addEventListener('click',function(){
  alert(3);
},false);
document.body.addEventListener('click',function(){
  alert(4);
},false);
document.body.click();    //模拟用户点击

澳门新濠3559 2

  [注意]手动触发事件更好的做法是IE下用fireEvent,标准浏览器下用dispatchEvent实现

 

现实事例

  不论是在程序世界里还是现实生活中,发布—订阅模式的应用都非常广泛

  比如,小明最近看上了一套房子,到了售楼处之后才被告知,该楼盘的房子早已售罄。好在售楼处工作人员告诉小明,不久后还有一些尾盘推出,开发商正在办理相关手续,手续办好后便可以购买。但到底是什么时候,目前还没有人能够知道。于是小明记下了售楼处的电话,以后每天都会打电话过去询问是不是已经到了购买时间。除了小明,还有小红、小强、小龙也会每天向售楼处咨询这个问题。一个星期过后,该工作人员决定辞职,因为厌倦了每天回答1000个相同内容的电话

  当然现实中没有这么笨的销售公司,实际上故事是这样的:小明离开之前,把电话号码留在了售楼处。售楼处工作人员答应他,新楼盘一推出就马上发信息通知小明。小红、小强和小龙也是一样,他们的电话号码都被记在售楼处的花名册上,新楼盘推出的时候,售楼处工作人员会翻开花名册,遍历上面的电话号码,依次发送一条短信来通知他们

  在上面的例子中,发送短信通知就是一个典型的发布—订阅模式,小明、小红等购买者都是订阅者,他们订阅了房子开售的消息。售楼处作为发布者,会在合适的时候遍历花名册上的电话号码,依次给购房者发布消息

  使用发布—订阅模式有着显而易见的优点:购房者不用再天天给售楼处打电话咨询开售时间,在合适的时间点,售楼处作为发布者会通知这些消息订阅者;购房者和售楼处之间不再强耦合在一起,当有新的购房者出现时,他只需把手机号码留在售楼处,售楼处不关心购房者的任何情况,不管购房者是男是女还是一只猴子。而售楼处的任何变动也不会影响购买者,比如售楼处工作人员离职,售楼处从一楼搬到二楼,这些改变都跟购房者无关,只要售楼处记得发短信这件事情

 

$.ajax({ ..., success: function { if(data.status === "success") { // 登录成功,发布登陆成功消息 login.trigger; } }});var header =  { // 监听消息 login.listen("loginsuccess", function{ header.setInfo; return { setInfo: function { console.log();var nav =  { login.listen("loginsuccess", function{ nav.setInfo; return { setInfo: function { console.log;

说明:本篇文章转载自小火柴的蓝色理想的一篇博文。原文地址:http://www.cnblogs.com/xiaohuochai/p/8031564.html

通用实现

  有没有办法可以让所有对象都拥有发布—订阅功能呢?有的,javascript作为一门解释执行的语言,给对象动态添加职责是理所当然的事情。所以把发布—订阅的功能提取出来,放在一个单独的对象内:

var event = {
    clientList: [],
    listen: function( key, fn ){
        if ( !this.clientList[ key ] ){
            this.clientList[ key ] = [];
        }
            this.clientList[ key ].push( fn ); // 订阅的消息添加进缓存列表
        },
        trigger: function(){
            var key = Array.prototype.shift.call( arguments ), // (1);
            fns = this.clientList[ key ];
            if ( !fns || fns.length === 0 ){ // 如果没有绑定对应的消息
                return false;
            }
            for( var i = 0, fn; fn = fns[ i++ ]; ){
                fn.apply( this, arguments ); // (2) // arguments 是trigger 时带上的参数
            }
        }
    };

  再定义一个installEvent函数,这个函数可以给所有的对象都动态安装发布—订阅功能:

var installEvent = function( obj ){
    for ( var i in event ){
        obj[ i ] = event[ i ];
    }
};

  下面给售楼处对象salesOffices动态增加发布—订阅功能

var salesOffices = {};
installEvent( salesOffices );
salesOffices.listen( 'squareMeter88', function( price ){ // 小明订阅消息
    console.log( '价格= ' + price );
});
salesOffices.listen( 'squareMeter100', function( price ){ // 小红订阅消息
    console.log( '价格= ' + price );
});
salesOffices.trigger( 'squareMeter88', 2000000 ); // 输出:2000000
salesOffices.trigger( 'squareMeter100', 3000000 ); // 输出:3000000

【取消订阅】

  有时候,也许需要取消订阅事件的功能。比如小明突然不想买房子了,为了避免继续接收到售楼处推送过来的短信,小明需要取消之前订阅的事件。现在给event对象增加remove方法

event.remove = function( key, fn ){
    var fns = this.clientList[ key ];
    if ( !fns ){ // 如果key 对应的消息没有被人订阅,则直接返回
        return false;
    }
    if ( !fn ){ // 如果没有传入具体的回调函数,表示需要取消key 对应消息的所有订阅
        fns && ( fns.length = 0 );
    }else{
        for ( var l = fns.length - 1; l >=0; l-- ){ // 反向遍历订阅的回调函数列表
            var _fn = fns[ l ];
            if ( _fn === fn ){
                fns.splice( l, 1 ); // 删除订阅者的回调函数
            }
        }
    }
};
var salesOffices = {};
var installEvent = function( obj ){
    for ( var i in event ){
        obj[ i ] = event[ i ];
    }
}
installEvent( salesOffices );

salesOffices.listen( 'squareMeter88', fn1 = function( price ){ // 小明订阅消息
    console.log( '价格= ' + price );
});

salesOffices.listen( 'squareMeter88', fn2 = function( price ){ // 小红订阅消息
    console.log( '价格= ' + price );
});

salesOffices.remove( 'squareMeter88', fn1 ); // 删除小明的订阅
salesOffices.trigger( 'squareMeter88', 2000000 ); // 输出:2000000

 

使用观察者模式,很轻松解耦!

通用实现

  有没有办法可以让所有对象都拥有发布—订阅功能呢?有的,javascript作为一门解释执行的语言,给对象动态添加职责是理所当然的事情。所以把发布—订阅的功能提取出来,放在一个单独的对象内:

澳门新濠3559 3

var event = {
    clientList: [],
    listen: function( key, fn ){
        if ( !this.clientList[ key ] ){
            this.clientList[ key ] = [];
        }
            this.clientList[ key ].push( fn ); // 订阅的消息添加进缓存列表
        },
        trigger: function(){
            var key = Array.prototype.shift.call( arguments ), // (1);
            fns = this.clientList[ key ];
            if ( !fns || fns.length === 0 ){ // 如果没有绑定对应的消息
                return false;
            }
            for( var i = 0, fn; fn = fns[ i++ ]; ){
                fn.apply( this, arguments ); // (2) // arguments 是trigger 时带上的参数
            }
        }
    };

澳门新濠3559 4

  再定义一个installEvent函数,这个函数可以给所有的对象都动态安装发布—订阅功能:

var installEvent = function( obj ){
    for ( var i in event ){
        obj[ i ] = event[ i ];
    }
};

  下面给售楼处对象salesOffices动态增加发布—订阅功能

澳门新濠3559 5

var salesOffices = {};
installEvent( salesOffices );
salesOffices.listen( 'squareMeter88', function( price ){ // 小明订阅消息
    console.log( '价格= ' + price );
});
salesOffices.listen( 'squareMeter100', function( price ){ // 小红订阅消息
    console.log( '价格= ' + price );
});
salesOffices.trigger( 'squareMeter88', 2000000 ); // 输出:2000000
salesOffices.trigger( 'squareMeter100', 3000000 ); // 输出:3000000

澳门新濠3559 6

【取消订阅】

  有时候,也许需要取消订阅事件的功能。比如小明突然不想买房子了,为了避免继续接收到售楼处推送过来的短信,小明需要取消之前订阅的事件。现在给event对象增加remove方法

澳门新濠3559 7

event.remove = function( key, fn ){
    var fns = this.clientList[ key ];
    if ( !fns ){ // 如果key 对应的消息没有被人订阅,则直接返回
        return false;
    }
    if ( !fn ){ // 如果没有传入具体的回调函数,表示需要取消key 对应消息的所有订阅
        fns && ( fns.length = 0 );
    }else{
        for ( var l = fns.length - 1; l >=0; l-- ){ // 反向遍历订阅的回调函数列表
            var _fn = fns[ l ];
            if ( _fn === fn ){
                fns.splice( l, 1 ); // 删除订阅者的回调函数
            }
        }
    }
};
var salesOffices = {};
var installEvent = function( obj ){
    for ( var i in event ){
        obj[ i ] = event[ i ];
    }
}
installEvent( salesOffices );

salesOffices.listen( 'squareMeter88', fn1 = function( price ){ // 小明订阅消息
    console.log( '价格= ' + price );
});

salesOffices.listen( 'squareMeter88', fn2 = function( price ){ // 小红订阅消息
    console.log( '价格= ' + price );
});

salesOffices.remove( 'squareMeter88', fn1 ); // 删除小明的订阅
salesOffices.trigger( 'squareMeter88', 2000000 ); // 输出:2000000

澳门新濠3559 8

 

网站登录

  假如正在开发一个商城网站,网站里有header头部、nav导航、消息列表、购物车等模块。这几个模块的渲染有一个共同的前提条件,就是必须先用ajax异步请求获取用户的登录信息。这是很正常的,比如用户的名字和头像要显示在header模块里,而这两个字段都来自用户登录后返回的信息。至于ajax请求什么时候能成功返回用户信息,这点没有办法确定

  但现在还不足以说服在此使用发布—订阅模式,因为异步的问题通常也可以用回调函数来解决。更重要的一点是,不知道除了header头部、nav导航、消息列表、购物车之外,将来还有哪些模块需要使用这些用户信息。如果它们和用户信息模块产生了强耦合,比如下面这样的形式:

login.succ(function(data){
    header.setAvatar( data.avatar); // 设置header 模块的头像
    nav.setAvatar( data.avatar ); // 设置导航模块的头像
    message.refresh(); // 刷新消息列表
    cart.refresh(); // 刷新购物车列表
});

  现在必须了解header模块里设置头像的方法叫setAvatar、购物车模块里刷新的方法叫refresh,这种耦合性会使程序变得僵硬,header模块不能随意再改变setAvatar的方法名,它自身的名字也不能被改为header1、header2。这是针对具体实现编程的典型例子,针对具体实现编程是不被赞同的

  等到有一天,项目中又新增了一个收货地址管理的模块,在最后部分加上这行代码:

login.succ(function(data){
    header.setAvatar( data.avatar); // 设置header 模块的头像
    nav.setAvatar( data.avatar ); // 设置导航模块的头像
    message.refresh(); // 刷新消息列表
    cart.refresh(); // 刷新购物车列表
    address.refresh();
});

  用发布—订阅模式重写之后,对用户信息感兴趣的业务模块将自行订阅登录成功的消息事件。当登录成功时,登录模块只需要发布登录成功的消息,而业务方接受到消息之后,就会开始进行各自的业务处理,登录模块并不关心业务方究竟要做什么,也不想去了解它们的内部细节。改进后的代码如下:

$.ajax('http://xx.com?login',function(data){    //登录成功
  login.trigger('loginSucc',data);    //发布登录成功的消息
});

  各模块监听登录成功的消息:

var header = (function(){ // header 模块
    login.listen( 'loginSucc', function( data){
        header.setAvatar( data.avatar );
    });
    return {
        setAvatar: function( data ){
            console.log( '设置header 模块的头像' );
        }
    }
})();

var nav = (function(){ // nav 模块
    login.listen( 'loginSucc', function( data ){
        nav.setAvatar( data.avatar );
    });
    return {
        setAvatar: function( avatar ){
            console.log( '设置nav 模块的头像' );
        }
    }
})();

  如上所述,随时可以把setAvatar的方法名改成setTouxiang。如果有一天在登录完成之后,又增加一个刷新收货地址列表的行为,那么只要在收货地址模块里加上监听消息的方法即可,代码如下:

var address = (function(){ // nav 模块
    login.listen( 'loginSucc', function( obj ){
        address.refresh( obj );
    });
    return {
        refresh: function( avatar ){
            console.log( '刷新收货地址列表' );
        }
    }
})();

 

三、通用观察者模式

  发布—订阅模式又叫观察者模式,它定义对象间的一对多的依赖关系,当一个对象的状态发生改变时,所有依赖于它的对象都将得到通知。在javascript开发中,一般用事件模型来替代传统的发布—订阅模式。本文将详细介绍发布订阅模式

自定义事件

  除了DOM事件,还会经常实现一些自定义的事件,这种依靠自定义事件完成的发布—订阅模式可以用于任何javascript代码中

  下面是实现发布—订阅模式的步骤:

  1、先要指定好谁充当发布者(比如售楼处)

  2、然后给发布者添加一个缓存列表,用于存放回调函数以便通知订阅者(售楼处的花名册)

  3、最后发布消息的时候,发布者会遍历这个缓存列表,依次触发里面存放的订阅者回调函数(遍历花名册,挨个发短信)

  另外,还可以往回调函数里填入一些参数,订阅者可以接收这些参数。这是很有必要的,比如售楼处可以在发给订阅者的短信里加上房子的单价、面积、容积率等信息,订阅者接收到这些信息之后可以进行各自的处理

var salesOffices = {}; // 定义售楼处
salesOffices.clientList = []; // 缓存列表,存放订阅者的回调函数
salesOffices.listen = function( fn ){ // 增加订阅者
    this.clientList.push( fn ); // 订阅的消息添加进缓存列表
};
salesOffices.trigger = function(){ // 发布消息
    for( var i = 0, fn; fn = this.clientList[ i++ ]; ){
        fn.apply( this, arguments ); // (2) // arguments 是发布消息时带上的参数
    }
};
salesOffices.listen( function( price, squareMeter ){ // 小明订阅消息
    console.log( '价格= ' + price );
    console.log( 'squareMeter= ' + squareMeter );
});

salesOffices.listen( function( price, squareMeter ){ // 小红订阅消息
    console.log( '价格= ' + price );
    console.log( 'squareMeter= ' + squareMeter );
});

salesOffices.trigger( 2000000, 88 ); // 输出:200 万,88 平方米
salesOffices.trigger( 3000000, 110 ); // 输出:300 万,110 平方米

  至此,已经实现了一个最简单的发布—订阅模式,但这里还存在一些问题。看到订阅者接收到了发布者发布的每个消息,虽然小明只想买88平方米的房子,但是发布者把110平方米的信息也推送给了小明,这对小明来说是不必要的困扰。所以有必要增加一个标示key,让订阅者只订阅自己感兴趣的消息。改写后的代码如下:

var salesOffices = {}; // 定义售楼处
salesOffices.clientList = []; // 缓存列表,存放订阅者的回调函数

salesOffices.listen = function( key, fn ){
    if ( !this.clientList[ key ] ){ // 如果还没有订阅过此类消息,给该类消息创建一个缓存列表
        this.clientList[ key ] = [];
    }
    this.clientList[ key ].push( fn ); // 订阅的消息添加进消息缓存列表
};

salesOffices.trigger = function(){ // 发布消息
    var key = Array.prototype.shift.call( arguments ), // 取出消息类型
    fns = this.clientList[ key ]; // 取出该消息对应的回调函数集合
    if ( !fns || fns.length === 0 ){ // 如果没有订阅该消息,则返回
        return false;
    }
    for( var i = 0, fn; fn = fns[ i++ ]; ){
        fn.apply( this, arguments ); // (2) // arguments 是发布消息时附送的参数
    }
};

salesOffices.listen( 'squareMeter88', function( price ){ // 小明订阅88 平方米房子的消息
    console.log( '价格= ' + price ); // 输出: 2000000
});

salesOffices.listen( 'squareMeter110', function( price ){ // 小红订阅110 平方米房子的消息
    console.log( '价格= ' + price ); // 输出: 3000000
});

salesOffices.trigger( 'squareMeter88', 2000000 ); // 发布88 平方米房子的价格
salesOffices.trigger( 'squareMeter110', 3000000 ); // 发布110 平方米房子的价格

  很明显,现在订阅者可以只订阅自己感兴趣的事件了

 

document.body.addEventListener { console.log;// 可以多个订阅者document.body.addEventListener { console.log;doucment.body.click();

网站登录

  假如正在开发一个商城网站,网站里有header头部、nav导航、消息列表、购物车等模块。这几个模块的渲染有一个共同的前提条件,就是必须先用ajax异步请求获取用户的登录信息。这是很正常的,比如用户的名字和头像要显示在header模块里,而这两个字段都来自用户登录后返回的信息。至于ajax请求什么时候能成功返回用户信息,这点没有办法确定

  但现在还不足以说服在此使用发布—订阅模式,因为异步的问题通常也可以用回调函数来解决。更重要的一点是,不知道除了header头部、nav导航、消息列表、购物车之外,将来还有哪些模块需要使用这些用户信息。如果它们和用户信息模块产生了强耦合,比如下面这样的形式:

澳门新濠3559 9

login.succ(function(data){
    header.setAvatar( data.avatar); // 设置header 模块的头像
    nav.setAvatar( data.avatar ); // 设置导航模块的头像
    message.refresh(); // 刷新消息列表
    cart.refresh(); // 刷新购物车列表
});

澳门新濠3559 10

  现在必须了解header模块里设置头像的方法叫setAvatar、购物车模块里刷新的方法叫refresh,这种耦合性会使程序变得僵硬,header模块不能随意再改变setAvatar的方法名,它自身的名字也不能被改为header1、header2。这是针对具体实现编程的典型例子,针对具体实现编程是不被赞同的

  等到有一天,项目中又新增了一个收货地址管理的模块,在最后部分加上这行代码:

澳门新濠3559 11

login.succ(function(data){
    header.setAvatar( data.avatar); // 设置header 模块的头像
    nav.setAvatar( data.avatar ); // 设置导航模块的头像
    message.refresh(); // 刷新消息列表
    cart.refresh(); // 刷新购物车列表
    address.refresh();
});

澳门新濠3559 12

  用发布—订阅模式重写之后,对用户信息感兴趣的业务模块将自行订阅登录成功的消息事件。当登录成功时,登录模块只需要发布登录成功的消息,而业务方接受到消息之后,就会开始进行各自的业务处理,登录模块并不关心业务方究竟要做什么,也不想去了解它们的内部细节。改进后的代码如下:

$.ajax('http://xx.com?login',function(data){    //登录成功
  login.trigger('loginSucc',data);    //发布登录成功的消息
});

  各模块监听登录成功的消息:

澳门新濠3559 13

var header = (function(){ // header 模块
    login.listen( 'loginSucc', function( data){
        header.setAvatar( data.avatar );
    });
    return {
        setAvatar: function( data ){
            console.log( '设置header 模块的头像' );
        }
    }
})();

var nav = (function(){ // nav 模块
    login.listen( 'loginSucc', function( data ){
        nav.setAvatar( data.avatar );
    });
    return {
        setAvatar: function( avatar ){
            console.log( '设置nav 模块的头像' );
        }
    }
})();

澳门新濠3559 14

  如上所述,随时可以把setAvatar的方法名改成setTouxiang。如果有一天在登录完成之后,又增加一个刷新收货地址列表的行为,那么只要在收货地址模块里加上监听消息的方法即可,代码如下:

澳门新濠3559 15

var address = (function(){ // nav 模块
    login.listen( 'loginSucc', function( obj ){
        address.refresh( obj );
    });
    return {
        refresh: function( avatar ){
            console.log( '刷新收货地址列表' );
        }
    }
})();

澳门新濠3559 16

 

全局发布订阅对象

  刚刚实现的发布—订阅模式,给售楼处对象和登录对象都添加了订阅和发布的功能,这里还存在两个小问题:1、给每个发布者对象都添加了listen和trigger方法,以及一个缓存列表clientList,这其实是一种资源浪费;2、小明跟售楼处对象还是存在一定的耦合性,小明至少要知道售楼处对象的名字是salesOffices,才能顺利的订阅到事件

salesOffices.listen('squareMeter100',function(price){    //小明订阅消息
  console.log('价格='+price);
});

  如果小明还关心300平方米的房子,而这套房子的卖家是salesOffices2,这意味着小明要开始订阅salesOffices2对象。见如下代码:

salesOffices2.listen('squareMeter300',function(price){    //小明订阅消息
  console.log('价格='+price);
});

  其实在现实中,买房子未必要亲自去售楼处,只要把订阅的请求交给中介公司,而各大房产公司也只需要通过中介公司来发布房子信息。这样一来,不用关心消息是来自哪个房产公司,在意的是能否顺利收到消息。当然,为了保证订阅者和发布者能顺利通信,订阅者和发布者都必须知道这个中介公司

  同样在程序中,发布—订阅模式可以用一个全局的Event对象来实现,订阅者不需要了解消息来自哪个发布者,发布者也不知道消息会推送给哪些订阅者,Event作为一个类似“中介者”的角色,把订阅者和发布者联系起来。见如下代码:

var Event = (function(){
    var clientList = {},
    listen,
    trigger,
    remove;
    listen = function( key, fn ){
        if ( !clientList[ key ] ){
            clientList[ key ] = [];
        }
        clientList[ key ].push( fn );
    };
    trigger = function(){
        var key = Array.prototype.shift.call( arguments ),
        fns = clientList[ key ];
        if ( !fns || fns.length === 0 ){
            return false;
        }
        for( var i = 0, fn; fn = fns[ i++ ]; ){
            fn.apply( this, arguments );
        }
    };
    remove = function( key, fn ){
        var fns = clientList[ key ];
        if ( !fns ){
            return false;
        }
        if ( !fn ){
            fns && ( fns.length = 0 );
        }else{
            for ( var l = fns.length - 1; l >=0; l-- ){
                var _fn = fns[ l ];
                if ( _fn === fn ){
                    fns.splice( l, 1 );
                }
            }
        }
    };
    return {
        listen: listen,
        trigger: trigger,
        remove: remove
    }
})();

Event.listen( 'squareMeter88', function( price ){ // 小红订阅消息
    console.log( '价格= ' + price ); // 输出:'价格=2000000'
});

Event.trigger( 'squareMeter88', 2000000 ); // 售楼处发布消息

【模块间通信】

  上面实现的发布—订阅模式的实现,是基于一个全局的Event对象,利用它可以在两个封装良好的模块中进行通信,这两个模块可以完全不知道对方的存在

  比如现在有两个模块,a模块里面有一个按钮,每次点击按钮之后,b模块里的div中会显示按钮的总点击次数,用全局发布—订阅模式完成下面的代码,使得a模块和b模块可以在保持封装性的前提下进行通信

<button id="count">点我</button>
<div id="show"></div>
<script type="text/JavaScript">
    var a = (function(){
        var count = 0;
        var button = document.getElementById( 'count' );
        button.onclick = function(){
            Event.trigger( 'add', count++ );
        }
    })();
    var b = (function(){
        var div = document.getElementById( 'show' );
        Event.listen( 'add', function( count ){
            div.innerHTML = count;
        });
    })();
</script>

  但要留意一个问题,模块之间如果用了太多的全局发布—订阅模式来通信,那么模块与模块之间的联系就被隐藏到了背后。最终会搞不清楚消息来自哪个模块,或者消息会流向哪些模块,这又会给维护带来一些麻烦,也许某个模块的作用就是暴露一些接口给其他模块调用

【先发布后订阅】

  常见的发布—订阅模式,都是订阅者必须先订阅一个消息,随后才能接收到发布者发布的消息。在某些情况下,需要先将这条消息保存下来,等到有对象来订阅它的时候,再重新把消息发布给订阅者。就如同QQ中的离线消息一样,离线消息被保存在服务器中,接收人下次登录上线之后,可以重新收到这条消息

/**************先发布后订阅********************/
Event.trigger('click',1);
Event.listen('click',function(a){
  console.log(a);    //输出:1
});

  这种需求在实际项目中是存在的,比如在商城网站中,获取到用户信息之后才能渲染用户导航模块,而获取用户信息的操作是一个ajax异步请求。当ajax请求成功返回之后会发布一个事件,在此之前订阅了此事件的用户导航模块可以接收到这些用户信息

  但是这只是理想的状况,因为异步的原因,不能保证ajax请求返回的时间,有时候它返回得比较快,而此时用户导航模块的代码还没有加载好(还没有订阅相应事件),特别是在用了一些模块化惰性加载的技术后,这是很可能发生的事情。也许还需要一个方案,使得的发布—订阅对象拥有先发布后订阅的能力

  为了满足这个需求,要建立一个存放离线事件的堆栈,当事件发布的时候,如果此时还没有订阅者来订阅这个事件,暂时把发布事件的动作包裹在一个函数里,这些包装函数将被存入堆栈中,等到终于有对象来订阅此事件的时候,将遍历堆栈并且依次执行这些包装函数,也就是重新发布里面的事件。当然离线事件的生命周期只有一次,就像QQ的未读消息只会被重新阅读一次,所以刚才的操作只能进行一次

【全局事件的命名冲突】

  全局的发布—订阅对象里只有一个clinetList来存放消息名和回调函数,大家都通过它来订阅和发布各种消息,久而久之,难免会出现事件名冲突的情况,所以还可以给Event对象提供创建命名空间的功能

/**************使用命名空间********************/
Event.create('namespace1').listen('click',function(a){
  console.log(a);    //输出:1
});
Event.create('namespace1').trigger('click',1);
Event.create('namespace2').listen('click',function(a){
  console.log(a);    //输出:2
});
Event.create('namespace2').trigger('click',2);

  下面是完整代码

var Event = (function(){
    var global = this,
    Event,
    _default = 'default';
    Event = function(){
        var _listen,
        _trigger,
        _remove,
        _slice = Array.prototype.slice,
        _shift = Array.prototype.shift,
        _unshift = Array.prototype.unshift,
        namespaceCache = {},
        _create,
        find,
        each = function( ary, fn ){
            var ret;
            for ( var i = 0, l = ary.length; i < l; i++ ){
                var n = ary[i];
                ret = fn.call( n, i, n);
            }
            return ret;
        };
        _listen = function( key, fn, cache ){
            if ( !cache[ key ] ){
                cache[ key ] = [];
            }
            cache[key].push( fn );
        };
        _remove = function( key, cache ,fn){
            if ( cache[ key ] ){
                if( fn ){
                    for( var i = cache[ key ].length; i >= 0; i-- ){
                        if( cache[ key ] === fn ){
                            cache[ key ].splice( i, 1 );
                        }
                    }
                }else{
                    cache[ key ] = [];
                }
            }
        };
        _trigger = function(){
            var cache = _shift.call(arguments),
            key = _shift.call(arguments),
            args = arguments,
            _self = this,
            ret,
            stack = cache[ key ];
            if ( !stack || !stack.length ){
                return;
            }
            return each( stack, function(){
                return this.apply( _self, args );
            });
        };
        _create = function( namespace ){
            var namespace = namespace || _default;
            var cache = {},
            offlineStack = [], // 离线事件
            ret = {
                listen: function( key, fn, last ){
                    _listen( key, fn, cache );
                    if ( offlineStack === null ){
                        return;
                    }
                    if ( last === 'last' ){
                    }else{
                        each( offlineStack, function(){
                            this();
                        });
                    }
                    offlineStack = null;
                },
                one: function( key, fn, last ){
                    _remove( key, cache );
                    this.listen( key, fn ,last );
                },
                remove: function( key, fn ){
                    _remove( key, cache ,fn);
                },
                trigger: function(){
                    var fn,
                    args,
                    _self = this;
                    _unshift.call( arguments, cache );
                    args = arguments;
                    fn = function(){
                        return _trigger.apply( _self, args );
                    };
                    if ( offlineStack ){
                        return offlineStack.push( fn );
                    }
                    return fn();
                }
            };
            return namespace ?
            ( namespaceCache[ namespace ] ? namespaceCache[ namespace ] :
                namespaceCache[ namespace ] = ret )
            : ret;
        };
        return {
            create: _create,
            one: function( key,fn, last ){
                var event = this.create( );
                event.one( key,fn,last );
            },
            remove: function( key,fn ){
                var event = this.create( );
                event.remove( key,fn );
            },
            listen: function( key, fn, last ){
                var event = this.create( );
                event.listen( key, fn, last );
            },
            trigger: function(){
                var event = this.create( );
                event.trigger.apply( this, arguments );
            }
        };
    }();
    return Event;
})();

  发布—订阅模式,也就是常说的观察者模式,它的优点非常明显,一为时间上的解耦,二为对象之间的解耦。应用也非常广泛,既可以用在异步编程中,也可以帮助完成更松耦合的代码编写。发布—订阅模式还可以用来帮助实现一些别的设计模式,比如中介者模式。从架构上来看,无论是MVC还是MVVM,都少不了发布—订阅模式的参与,而且javascript本身也是一门基于事件驱动的语言

  当然,发布—订阅模式也不是完全没有缺点。创建订阅者本身要消耗一定的时间和内存,而且订阅一个消息后,也许此消息最后都未发生,但这个订阅者会始终存在于内存中。另外,发布—订阅模式虽然可以弱化对象之间的联系,但如果过度使用的话,对象和对象之间的必要联系也将被深埋在背后,会导致程序难以跟踪维护和理解。特别是有多个发布者和订阅者嵌套到一起的时候,要跟踪一个bug不是件轻松的事情

 

可广泛应用于异步编程中,是一种替代传递回调函数的方案。 可取代对象之间硬编码的通知机制,一个对象不用再显示地调用另外一个对象的某个接口。两对象轻松解耦。

全局发布订阅对象

  刚刚实现的发布—订阅模式,给售楼处对象和登录对象都添加了订阅和发布的功能,这里还存在两个小问题:1、给每个发布者对象都添加了listen和trigger方法,以及一个缓存列表clientList,这其实是一种资源浪费;2、小明跟售楼处对象还是存在一定的耦合性,小明至少要知道售楼处对象的名字是salesOffices,才能顺利的订阅到事件

salesOffices.listen('squareMeter100',function(price){    //小明订阅消息
  console.log('价格='+price);
});

  如果小明还关心300平方米的房子,而这套房子的卖家是salesOffices2,这意味着小明要开始订阅salesOffices2对象。见如下代码:

salesOffices2.listen('squareMeter300',function(price){    //小明订阅消息
  console.log('价格='+price);
});

  其实在现实中,买房子未必要亲自去售楼处,只要把订阅的请求交给中介公司,而各大房产公司也只需要通过中介公司来发布房子信息。这样一来,不用关心消息是来自哪个房产公司,在意的是能否顺利收到消息。当然,为了保证订阅者和发布者能顺利通信,订阅者和发布者都必须知道这个中介公司

  同样在程序中,发布—订阅模式可以用一个全局的Event对象来实现,订阅者不需要了解消息来自哪个发布者,发布者也不知道消息会推送给哪些订阅者,Event作为一个类似“中介者”的角色,把订阅者和发布者联系起来。见如下代码:

澳门新濠3559 17

var Event = (function(){
    var clientList = {},
    listen,
    trigger,
    remove;
    listen = function( key, fn ){
        if ( !clientList[ key ] ){
            clientList[ key ] = [];
        }
        clientList[ key ].push( fn );
    };
    trigger = function(){
        var key = Array.prototype.shift.call( arguments ),
        fns = clientList[ key ];
        if ( !fns || fns.length === 0 ){
            return false;
        }
        for( var i = 0, fn; fn = fns[ i++ ]; ){
            fn.apply( this, arguments );
        }
    };
    remove = function( key, fn ){
        var fns = clientList[ key ];
        if ( !fns ){
            return false;
        }
        if ( !fn ){
            fns && ( fns.length = 0 );
        }else{
            for ( var l = fns.length - 1; l >=0; l-- ){
                var _fn = fns[ l ];
                if ( _fn === fn ){
                    fns.splice( l, 1 );
                }
            }
        }
    };
    return {
        listen: listen,
        trigger: trigger,
        remove: remove
    }
})();

Event.listen( 'squareMeter88', function( price ){ // 小红订阅消息
    console.log( '价格= ' + price ); // 输出:'价格=2000000'
});

Event.trigger( 'squareMeter88', 2000000 ); // 售楼处发布消息

澳门新濠3559 18

【模块间通信】

  上面实现的发布—订阅模式的实现,是基于一个全局的Event对象,利用它可以在两个封装良好的模块中进行通信,这两个模块可以完全不知道对方的存在

  比如现在有两个模块,a模块里面有一个按钮,每次点击按钮之后,b模块里的div中会显示按钮的总点击次数,用全局发布—订阅模式完成下面的代码,使得a模块和b模块可以在保持封装性的前提下进行通信

澳门新濠3559 19

<button id="count">点我</button>
<div id="show"></div>
<script type="text/JavaScript">
    var a = (function(){
        var count = 0;
        var button = document.getElementById( 'count' );
        button.onclick = function(){
            Event.trigger( 'add', count++ );
        }
    })();
    var b = (function(){
        var div = document.getElementById( 'show' );
        Event.listen( 'add', function( count ){
            div.innerHTML = count;
        });
    })();
</script>

澳门新濠3559 20

  但要留意一个问题,模块之间如果用了太多的全局发布—订阅模式来通信,那么模块与模块之间的联系就被隐藏到了背后。最终会搞不清楚消息来自哪个模块,或者消息会流向哪些模块,这又会给维护带来一些麻烦,也许某个模块的作用就是暴露一些接口给其他模块调用

【先发布后订阅】

  常见的发布—订阅模式,都是订阅者必须先订阅一个消息,随后才能接收到发布者发布的消息。在某些情况下,需要先将这条消息保存下来,等到有对象来订阅它的时候,再重新把消息发布给订阅者。就如同QQ中的离线消息一样,离线消息被保存在服务器中,接收人下次登录上线之后,可以重新收到这条消息

/**************先发布后订阅********************/
Event.trigger('click',1);
Event.listen('click',function(a){
  console.log(a);    //输出:1
});

  这种需求在实际项目中是存在的,比如在商城网站中,获取到用户信息之后才能渲染用户导航模块,而获取用户信息的操作是一个ajax异步请求。当ajax请求成功返回之后会发布一个事件,在此之前订阅了此事件的用户导航模块可以接收到这些用户信息

  但是这只是理想的状况,因为异步的原因,不能保证ajax请求返回的时间,有时候它返回得比较快,而此时用户导航模块的代码还没有加载好(还没有订阅相应事件),特别是在用了一些模块化惰性加载的技术后,这是很可能发生的事情。也许还需要一个方案,使得的发布—订阅对象拥有先发布后订阅的能力

  为了满足这个需求,要建立一个存放离线事件的堆栈,当事件发布的时候,如果此时还没有订阅者来订阅这个事件,暂时把发布事件的动作包裹在一个函数里,这些包装函数将被存入堆栈中,等到终于有对象来订阅此事件的时候,将遍历堆栈并且依次执行这些包装函数,也就是重新发布里面的事件。当然离线事件的生命周期只有一次,就像QQ的未读消息只会被重新阅读一次,所以刚才的操作只能进行一次

【全局事件的命名冲突】

  全局的发布—订阅对象里只有一个clinetList来存放消息名和回调函数,大家都通过它来订阅和发布各种消息,久而久之,难免会出现事件名冲突的情况,所以还可以给Event对象提供创建命名空间的功能

澳门新濠3559 21

/**************使用命名空间********************/
Event.create('namespace1').listen('click',function(a){
  console.log(a);    //输出:1
});
Event.create('namespace1').trigger('click',1);
Event.create('namespace2').listen('click',function(a){
  console.log(a);    //输出:2
});
Event.create('namespace2').trigger('click',2);

澳门新濠3559 22

  下面是完整代码

澳门新濠3559 23

var Event = (function(){
    var global = this,
    Event,
    _default = 'default';
    Event = function(){
        var _listen,
        _trigger,
        _remove,
        _slice = Array.prototype.slice,
        _shift = Array.prototype.shift,
        _unshift = Array.prototype.unshift,
        namespaceCache = {},
        _create,
        find,
        each = function( ary, fn ){
            var ret;
            for ( var i = 0, l = ary.length; i < l; i++ ){
                var n = ary[i];
                ret = fn.call( n, i, n);
            }
            return ret;
        };
        _listen = function( key, fn, cache ){
            if ( !cache[ key ] ){
                cache[ key ] = [];
            }
            cache[key].push( fn );
        };
        _remove = function( key, cache ,fn){
            if ( cache[ key ] ){
                if( fn ){
                    for( var i = cache[ key ].length; i >= 0; i-- ){
                        if( cache[ key ] === fn ){
                            cache[ key ].splice( i, 1 );
                        }
                    }
                }else{
                    cache[ key ] = [];
                }
            }
        };
        _trigger = function(){
            var cache = _shift.call(arguments),
            key = _shift.call(arguments),
            args = arguments,
            _self = this,
            ret,
            stack = cache[ key ];
            if ( !stack || !stack.length ){
                return;
            }
            return each( stack, function(){
                return this.apply( _self, args );
            });
        };
        _create = function( namespace ){
            var namespace = namespace || _default;
            var cache = {},
            offlineStack = [], // 离线事件
            ret = {
                listen: function( key, fn, last ){
                    _listen( key, fn, cache );
                    if ( offlineStack === null ){
                        return;
                    }
                    if ( last === 'last' ){
                    }else{
                        each( offlineStack, function(){
                            this();
                        });
                    }
                    offlineStack = null;
                },
                one: function( key, fn, last ){
                    _remove( key, cache );
                    this.listen( key, fn ,last );
                },
                remove: function( key, fn ){
                    _remove( key, cache ,fn);
                },
                trigger: function(){
                    var fn,
                    args,
                    _self = this;
                    _unshift.call( arguments, cache );
                    args = arguments;
                    fn = function(){
                        return _trigger.apply( _self, args );
                    };
                    if ( offlineStack ){
                        return offlineStack.push( fn );
                    }
                    return fn();
                }
            };
            return namespace ?
            ( namespaceCache[ namespace ] ? namespaceCache[ namespace ] :
                namespaceCache[ namespace ] = ret )
            : ret;
        };
        return {
            create: _create,
            one: function( key,fn, last ){
                var event = this.create( );
                event.one( key,fn,last );
            },
            remove: function( key,fn ){
                var event = this.create( );
                event.remove( key,fn );
            },
            listen: function( key, fn, last ){
                var event = this.create( );
                event.listen( key, fn, last );
            },
            trigger: function(){
                var event = this.create( );
                event.trigger.apply( this, arguments );
            }
        };
    }();
    return Event;
})();

澳门新濠3559 24

  发布—订阅模式,也就是常说的观察者模式,它的优点非常明显,一为时间上的解耦,二为对象之间的解耦。应用也非常广泛,既可以用在异步编程中,也可以帮助完成更松耦合的代码编写。发布—订阅模式还可以用来帮助实现一些别的设计模式,比如中介者模式。从架构上来看,无论是MVC还是MVVM,都少不了发布—订阅模式的参与,而且javascript本身也是一门基于事件驱动的语言

  当然,发布—订阅模式也不是完全没有缺点。创建订阅者本身要消耗一定的时间和内存,而且订阅一个消息后,也许此消息最后都未发生,但这个订阅者会始终存在于内存中。另外,发布—订阅模式虽然可以弱化对象之间的联系,但如果过度使用的话,对象和对象之间的必要联系也将被深埋在背后,会导致程序难以跟踪维护和理解。特别是有多个发布者和订阅者嵌套到一起的时候,要跟踪一个bug不是件轻松的事情

一、定义

自定义事件

  除了DOM事件,还会经常实现一些自定义的事件,这种依靠自定义事件完成的发布—订阅模式可以用于任何javascript代码中

  下面是实现发布—订阅模式的步骤:

  1、先要指定好谁充当发布者(比如售楼处)

  2、然后给发布者添加一个缓存列表,用于存放回调函数以便通知订阅者(售楼处的花名册)

  3、最后发布消息的时候,发布者会遍历这个缓存列表,依次触发里面存放的订阅者回调函数(遍历花名册,挨个发短信)

  另外,还可以往回调函数里填入一些参数,订阅者可以接收这些参数。这是很有必要的,比如售楼处可以在发给订阅者的短信里加上房子的单价、面积、容积率等信息,订阅者接收到这些信息之后可以进行各自的处理

澳门新濠3559 25

var salesOffices = {}; // 定义售楼处
salesOffices.clientList = []; // 缓存列表,存放订阅者的回调函数
salesOffices.listen = function( fn ){ // 增加订阅者
    this.clientList.push( fn ); // 订阅的消息添加进缓存列表
};
salesOffices.trigger = function(){ // 发布消息
    for( var i = 0, fn; fn = this.clientList[ i++ ]; ){
        fn.apply( this, arguments ); // (2) // arguments 是发布消息时带上的参数
    }
};
salesOffices.listen( function( price, squareMeter ){ // 小明订阅消息
    console.log( '价格= ' + price );
    console.log( 'squareMeter= ' + squareMeter );
});

salesOffices.listen( function( price, squareMeter ){ // 小红订阅消息
    console.log( '价格= ' + price );
    console.log( 'squareMeter= ' + squareMeter );
});

salesOffices.trigger( 2000000, 88 ); // 输出:200 万,88 平方米
salesOffices.trigger( 3000000, 110 ); // 输出:300 万,110 平方米

澳门新濠3559 26

  至此,已经实现了一个最简单的发布—订阅模式,但这里还存在一些问题。看到订阅者接收到了发布者发布的每个消息,虽然小明只想买88平方米的房子,但是发布者把110平方米的信息也推送给了小明,这对小明来说是不必要的困扰。所以有必要增加一个标示key,让订阅者只订阅自己感兴趣的消息。改写后的代码如下:

澳门新濠3559 27

var salesOffices = {}; // 定义售楼处
salesOffices.clientList = []; // 缓存列表,存放订阅者的回调函数

salesOffices.listen = function( key, fn ){
    if ( !this.clientList[ key ] ){ // 如果还没有订阅过此类消息,给该类消息创建一个缓存列表
        this.clientList[ key ] = [];
    }
    this.clientList[ key ].push( fn ); // 订阅的消息添加进消息缓存列表
};

salesOffices.trigger = function(){ // 发布消息
    var key = Array.prototype.shift.call( arguments ), // 取出消息类型
    fns = this.clientList[ key ]; // 取出该消息对应的回调函数集合
    if ( !fns || fns.length === 0 ){ // 如果没有订阅该消息,则返回
        return false;
    }
    for( var i = 0, fn; fn = fns[ i++ ]; ){
        fn.apply( this, arguments ); // (2) // arguments 是发布消息时附送的参数
    }
};

salesOffices.listen( 'squareMeter88', function( price ){ // 小明订阅88 平方米房子的消息
    console.log( '价格= ' + price ); // 输出: 2000000
});

salesOffices.listen( 'squareMeter110', function( price ){ // 小红订阅110 平方米房子的消息
    console.log( '价格= ' + price ); // 输出: 3000000
});

salesOffices.trigger( 'squareMeter88', 2000000 ); // 发布88 平方米房子的价格
salesOffices.trigger( 'squareMeter110', 3000000 ); // 发布110 平方米房子的价格

澳门新濠3559 28

  很明显,现在订阅者可以只订阅自己感兴趣的事件了

 

需要监控用户点击document.body的动作,但是我们没有办法预知用户将在什么时间点击。 所以,我们订阅document.body上的click事件,当body节点被点击时,body节点便向订阅者发布这个消息!

观察者模式:其定义对象间一种一对多的依赖关系,当一个对象的状态发生改变时,所有依赖于它的对象都将得到通知。 在JavaScript中,一般使用事件模型来替代传统的观察者模式。 好处:

二、DOM事件–观察者模式典例

$.ajax({ url: './login', type: 'post', contentType: 'application/json', dataType:'json', success: function { if(data.status === "success") { // 登录成功,渲染header、nav header.setInfo; nav.setInfo;

编辑:服务器运维 本文来源:【澳门新濠3559】发送短信通知就是一个典型的发

关键词: