$.Callbacks()与观察者模式

$.Callbacks()是jquery1.7版本中增加的api,可以很轻松的进行事件回调的管理。比如可以实现一个事件触发发个回调的效果。
其实这就是基本的观察者模式。

创建回调管理器

回调的使用方式如下:

var cb = $.Callbacks([flags]);

参数

这里有一些flags,有如下:onceuniquememorystopOnFalse

  • once :回调列表只能fire()一次

  • unique :回调列表中的回调是都是唯一的,不能重复添加(默认是能重复添加的,添加的都能触发)

  • memory :在执行add()的时候,自动执行fire(),传入的值是上次fire()之后返回的值

  • stopOnFalse :如果函数中有return false,则会停止,回调列表中的其他回调不在触发。
flags可以单独设置一个,也可以设置多个,具有叠加的效果,比如:$.Callbacks(“once unique”),表示添加的回调不能重复且回调列表只能fire()一次。


方法

add(): 向回调队列中添加回调函数
remove():从回调队列中删除回调
fire():[传入参数]执行回调
fired():回调是否执行过
fireWidth(context,args):在执行回调时指定上下文与参数
lock():锁定回调列表
locked():回调列表是否锁定
disable():禁用回调列表
disabled():是否禁用了回调列表

lock()与disable()

问题:lock和disable,一个是锁定,一个是禁用,都不能用fire(),有什么区别?


执行disable()方法后,回调列表被清空,所以不能fire()与fireWith()

list = stack = memory = undefined;


而lock()是锁定了当前的回调列表,并没有清空,如果有memory,则会清空。


stack = undefined; 
if ( !memory ) {
    self.disable(); 
}


同样,lock()之后,也不能执行fire()与fireWith()

观察者模式

观察者模式又被称为发布-订阅模式或者消息机制,它定义了一种依赖关系,解决了主体对象与观察者之间功能的耦合。

比如:我发布一条评论信息,会有如下依赖:在评论列表中会增加一条评论、用户的消息列表信息增加,删除一个评论的时候正好相反,而消息机制和评论模块由两个人开发,而在开发评论模块的时候又不能将消息模块合并在一起,此时需要一个机制将两个模块结合在一起,此时观察者便是一个比较好的选择。消息与评论是订阅者,增加评论时通知订阅者,订阅者执行相应的事件。

而jquery就提供了类似的功能模块:$.Callbacks(),回调列表,并且有add()、remove()、fire()方法,所以可以通过jquery来实现一个简单的观察者对象。

从上面的情景中可以简单得看出观察者模式的几个方法以及属性:订阅(subscribe)发布(publish)取消订阅( unsubscribe)以及一个消息容器:_message = {}

下面是通过jquery实现的,jquery的$.Callbacks本身就是一个观察者模型,这里只是进行了简单的再包装。添加消息的类型,因为在一个项目中,观察者模型只有一个,而需要观察的对象又很多,动画需要、消息需要等,那么就要将这些对象进行划分,增加一个type,订阅与发布的时候只在自己的类型下执行,不干扰其他观察者。

// topics用于分离不同的观察对象
var topics = {};
var Observer = function ( id ) {
  var cb = $.Callbacks();
  // 观察对象是否存在
  // 不存在便创建
  var topic = id && topics[id];
  if ( !topic ) {
    topic = {
      subscribe: cb.add,
      unsubscribe: cb.remove,
      publish: cb.fire
    };
    // 相当于给观察对象开辟命名空间
    if ( id ) {
      topics[id] = topic;
    }
  }
  return topic;
};

使用方式如下:

// 个功能模块
var sub = function () {
  alert("a");
}
var send = function () {
  alert("b");
}

// 分别订阅 
Observer("comment").subscribe(sub);
Observer("message").subscribe(send);

// 发布消息
Observer("comment").publish();

参考资料

jQuery.Callbacks 一个函数管理器
回调对象
读jQuery之十九(多用途回调函数列表对象)

发表评论

电子邮件地址不会被公开。 必填项已用*标注