jQuery回调模块结构
jQuery.callbacks(flags)
概述:
一个多用途的回调列表对象,提供了强大的的方式来管理回调函数列表。
$.Callbacks()的内部提供了jQuery的$.ajax() 和 $.Deferred() 基本功能组件。它可以用来作为类似基础定义的新组件的功能。
示例:
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;
}