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 cachevar 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;}