jQuery源码解析--回调模块（$.Callbacks()）

jQuery回调模块结构

jQuery.callbacks(flags)

概述：

一个多用途的回调列表对象，提供了强大的的方式来管理回调函数列表。

$.Callbacks()的内部提供了jQuery的$.ajax() 和 $.Deferred() 基本功能组件。它可以用来作为类似基础定义的新组件的功能。

flags:一个用空格标记分隔的标志可选列表,用来改变回调列表中的行为
示例：

function fn1( value ){
    console.log( value );
}

function fn2( value ){
    fn1("fn2 says:" + value);
    return false;
}
<pre><code>var callbacks = $.Callbacks();
callbacks.add( fn1 );
callbacks.fire( "foo!" ); // outputs: foo!

callbacks.add( fn2 );
callbacks.fire( "bar!" ); // outputs: bar!, fn2 says: bar!</code>

源码结构：

jQuery.Callbacks = function(options) {
    options = typeof options === "string" ?
        (optionsCache[options] || createOptions(options)) :
        jQuery.extend({}, options);
    //实现代码
    fire = function() {}
    self = {
        add: function() {},
        remove: function() {},
        has: function(fn) {},
        empty: function() {},
        disable: function() {},
        disabled: function() {},
        lock: function() {},
        locked: function() {},
        fireWith: function(context, args) {},
        fire: function() {},
        fired: function() {}
    };
    return self;
};

整个结构要分三部分：

  ☑   Options参数缓存

  ☑   内部fire触发器的设计

  ☑   外部

参数的缓存设计

设计一个缓存池，用来储存重复的操作：

// String to Object options format cache
var optionsCache = {};
var rnotwhite = (/\S+/g);
// 将字符串形式的参数转化为对象形式并存在缓存中
function createOptions(options) {
  var object = optionsCache[options] = {};
  jQuery.each(options.match(rnotwhite) || [], function(_, flag) {
    object[flag] = true;
  });
  return object;
}

接口的设计：

通过学习了观察者模式的思路，我们知道callback需要在内部维护着一个list的队列数组，用于保存订阅的对象数据。同时也需要提供了add、remove、fire等订阅、发布、删除类似的接口。

实现思路就是: 构建一个存放回调的数组，如var list = []，通过闭包使这条回调数组保持存在。添加回调时，将回调push进list，执行则遍历list执行回调。

简单模拟：

function Callbacks() {
  var list = [];
  var self;
  self = {
    add: function(fn) {
      list.push(fn)
    },
    fire: function(args) {
      list.forEach(function(fn) {
        fn(args);
      })
    }
  }
  return self;
}