读jQuery源码有感2
2024-10-12 22:25:42
那么就来读读jQuery源码的Callbacks部分。
一上来看原版源码
jQuery.Callbacks = function( options ) {
// Convert options from String-formatted to Object-formatted if needed
// (we check in cache first)
options = typeof options === "string" ?
( optionsCache[ options ] || createOptions( options ) ) :
jQuery.extend( {}, options );
var // Flag to know if list is currently firing
firing,
// Last fire value (for non-forgettable lists)
memory,
// Flag to know if list was already fired
fired,
// End of the loop when firing
firingLength,
// Index of currently firing callback (modified by remove if needed)
firingIndex,
// First callback to fire (used internally by add and fireWith)
firingStart,
// Actual callback list
list = [],
// Stack of fire calls for repeatable lists
stack = !options.once && [],
// Fire callbacks
fire = function( data ) {
memory = options.memory && data;
fired = true;
firingIndex = firingStart || 0;
firingStart = 0;
firingLength = list.length;
firing = true;
for ( ; list && firingIndex < firingLength; firingIndex++ ) {
if ( list[ firingIndex ].apply( data[ 0 ], data[ 1 ] ) === false && options.stopOnFalse ) {
memory = false; // To prevent further calls using add
break;
}
}
firing = false;
if ( list ) {
if ( stack ) {
if ( stack.length ) {
fire( stack.shift() );
}
} else if ( memory ) {
list = [];
} else {
self.disable();
}
}
},
// Actual Callbacks object
self = {
// Add a callback or a collection of callbacks to the list
add: function() {
if ( list ) {
// First, we save the current length
var start = list.length;
(function add( args ) {
jQuery.each( args, function( _, arg ) {
var type = jQuery.type( arg );
if ( type === "function" ) {
if ( !options.unique || !self.has( arg ) ) {
list.push( arg );
}
} else if ( arg && arg.length && type !== "string" ) {
// Inspect recursively
add( arg );
}
});
})( arguments );
// Do we need to add the callbacks to the
// current firing batch?
if ( firing ) {
firingLength = list.length;
// With memory, if we're not firing then
// we should call right away
} else if ( memory ) {
firingStart = start;
fire( memory );
}
}
return this;
},
// Remove a callback from the list
remove: function() {
if ( list ) {
jQuery.each( arguments, function( _, arg ) {
var index;
while( ( index = jQuery.inArray( arg, list, index ) ) > -1 ) {
list.splice( index, 1 );
// Handle firing indexes
if ( firing ) {
if ( index <= firingLength ) {
firingLength--;
}
if ( index <= firingIndex ) {
firingIndex--;
}
}
}
});
}
return this;
},
// Check if a given callback is in the list.
// If no argument is given, return whether or not list has callbacks attached.
has: function( fn ) {
return fn ? jQuery.inArray( fn, list ) > -1 : !!( list && list.length );
},
// Remove all callbacks from the list
empty: function() {
list = [];
firingLength = 0;
return this;
},
// Have the list do nothing anymore
disable: function() {
list = stack = memory = undefined;
return this;
},
// Is it disabled?
disabled: function() {
return !list;
},
// Lock the list in its current state
lock: function() {
stack = undefined;
if ( !memory ) {
self.disable();
}
return this;
},
// Is it locked?
locked: function() {
return !stack;
},
// Call all callbacks with the given context and arguments
fireWith: function( context, args ) {
if ( list && ( !fired || stack ) ) {
args = args || [];
args = [ context, args.slice ? args.slice() : args ];
if ( firing ) {
stack.push( args );
} else {
fire( args );
}
}
return this;
},
// Call all the callbacks with the given arguments
fire: function() {
self.fireWith( this, arguments );
return this;
},
// To know if the callbacks have already been called at least once
fired: function() {
return !!fired;
}
};
return self;
};
如你所见，一开始声明了好几个变量，英文注释也说明变量干什么用，但事实上，你还是不知道这些个变量具体作用在哪。
那好，进入http://api.jquery.com/category/callbacks-object/
这里每个api说明，都有个demo，每个demo就相当于一个测试用例。
那么，依据测试用例，给源码设断点，一步步调试，看数据走向。但是一环嵌一环，绕来绕去，都记不住这些个变量变化的意义。
反正，一，句，话。我不知道作者为什么这么写，这个模块的设计思路是怎样。
怎么办，凉拌。
既然有了测试用例，那我就根据它来自己实现。如果实现的过程中，遇到困难，再看看源码，这样就更接近作者的思维，从而知道那些变量，判断的意义所在。
1.首先要实现的就是add和fire功能。
其思路是，引入一个函数管理数组变量，add就是把函数加进数组里，fire就是遍历数组，一个个调用函数。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>add和fire的功能</title>
<script type="text/javascript">
var callbacks = {
callbacks_list: [],
add: function(fn) {
this.callbacks_list.push(fn);
},
fire: function() {
var arg = arguments;
this.callbacks_list.forEach(function(fn) {
fn.apply(this, arg);
})
}
} var foo = function(value) {
console.log("foo: " + value);
}; var bar = function(value) {
console.log("bar: " + value);
}; callbacks.add(foo); callbacks.fire("hello"); callbacks.add(bar); callbacks.fire("world");
</script>
</head>
<body>
现在的callback有add,fire功能
</body>
</html>
2.加入remove功能。
思路是，遍历函数管理数组，判断其成员和传进来的参数是否一致，一致则移除。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>加入remove功能</title>
<script type="text/javascript">
var callbacks = {
callbacks_list: [],
add: function(fn) {
this.callbacks_list.push(fn);
},
fire: function() {
var arg = arguments;
this.callbacks_list.forEach(function(fn) {
fn.apply(this, arg);
})
},
remove: function(fn){
for(var i=0, l = this.callbacks_list.length; i < l; i++){
if(this.callbacks_list[i] == fn){
this.callbacks_list.splice(i,1);
}
}
}
} var foo = function(value) {
console.log("foo: " + value);
}; var bar = function(value) {
console.log("bar: " + value);
}; callbacks.add( foo ); callbacks.fire( "hello" );
callbacks.remove( foo ); callbacks.fire( "world" );
</script>
</head>
<body>
现在的callback有add,fire,remove功能
</body>
</html>
3.加入disable功能。
disable在测试用例中所展示的意思就是，一旦disable了，再怎么fire，也不执行。
内部实现就是，把函数管理数组设置为undefined，然后在fire那边判断undefined，则跳出函数。
我这里忘了在add函数里，判断函数管理数组callbacks_list的undefined。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>3.加入disabled功能</title>
<script type="text/javascript">
var callbacks = {
callbacks_list: [],
add: function(fn) {
this.callbacks_list.push(fn);
},
fire: function() {
if(this.callbacks_list == undefined || this.callbacks_list == null){
return;
}
var arg = arguments;
this.callbacks_list.forEach(function(fn) {
fn.apply(this, arg);
})
},
remove: function(fn) {
for (var i = 0, l = this.callbacks_list.length; i < l; i++) {
if (this.callbacks_list[i] == fn) {
this.callbacks_list.splice(i, 1);
}
}
},
disable: function() {
this.callbacks_list = undefined;
return this;
},
disabled: function() {
return !callbacks_list;
}
}
var foo = function(value) {
console.log(value);
};
callbacks.add(foo); callbacks.fire("foo"); callbacks.disable(); callbacks.fire("foobar");
// foobar isn't output
</script>
</head>
<body>
现在的callback有add,fire,remove,disable功能
</body>
</html>
4.加入has功能
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>4.加入has功能</title>
<script type="text/javascript">
var callbacks = {
callbacks_list: [],
add: function(fn) {
this.callbacks_list.push(fn);
},
fire: function() {
if (this.callbacks_list == undefined || this.callbacks_list == null) {
return;
}
var arg = arguments;
this.callbacks_list.forEach(function(fn) {
fn.apply(this, arg);
})
},
remove: function(fn) {
for (var i = 0, l = this.callbacks_list.length; i < l; i++) {
if (this.callbacks_list[i] == fn) {
this.callbacks_list.splice(i, 1);
}
}
},
disable: function() {
this.callbacks_list = undefined;
return this;
},
disabled: function() {
return !callbacks_list;
},
has: function(fn) {
for (var i = 0, l = this.callbacks_list.length; i < l; i++) {
if (this.callbacks_list[i] == fn) {
return true;
}
}
return false;
}
}
var foo = function(value1, value2) {
console.log("Received: " + value1 + "," + value2);
}; // A second function which will not be added to the list
var bar = function(value1, value2) {
console.log("foobar");
}; // Add the log method to the callbacks list
callbacks.add(foo); // Determine which callbacks are in the list
console.log(callbacks.has(foo));
// true
console.log(callbacks.has(bar));
// false </script>
</head>
<body>
现在的callback有add,fire,remove,disable,has功能
</body>
</html>
5.加入empty功能
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>5.加入empty功能</title>
<script type="text/javascript">
var callbacks = {
callbacks_list: [],
add: function(fn) {
this.callbacks_list.push(fn);
},
fire: function() {
if (this.callbacks_list == undefined || this.callbacks_list == null) {
return;
}
var arg = arguments;
this.callbacks_list.forEach(function(fn) {
fn.apply(this, arg);
})
},
remove: function(fn) {
for (var i = 0, l = this.callbacks_list.length; i < l; i++) {
if (this.callbacks_list[i] == fn) {
this.callbacks_list.splice(i, 1);
}
}
},
disable: function() {
this.callbacks_list = undefined;
return this;
},
disabled: function() {
return !callbacks_list;
},
has: function(fn) {
for (var i = 0, l = this.callbacks_list.length; i < l; i++) {
if (this.callbacks_list[i] == fn) {
return true;
}
}
return false;
},
empty:function(){
this.callbacks_list = [];
return this;
}
}
// A sample logging function to be added to a callbacks list
var foo = function(value1, value2) {
console.log("foo: " + value1 + "," + value2);
}; // Another function to also be added to the list
var bar = function(value1, value2) {
console.log("bar: " + value1 + "," + value2);
}; // Add the two functions
callbacks.add(foo);
callbacks.add(bar); // Empty the callbacks list
callbacks.empty(); // Check to ensure all callbacks have been removed
console.log(callbacks.has(foo));
// false
console.log(callbacks.has(bar));
// false </script>
</head>
<body>
现在的callback有add,fire,remove,disable,has,empty功能
</body>
</html>
6.加入lock功能
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>6.加入lock功能</title>
<script type="text/javascript">
var callbacks = {
callbacks_list: [],
memory: "",
has_locked : false,
add: function(fn) {
this.callbacks_list.push(fn);
},
fire: function() {
if (this.callbacks_list == undefined || this.callbacks_list == null) {
return;
} else {
if(this.has_locked == true){
var callback_this = this;
var arg = callback_this.memory
this.callbacks_list.forEach(function(fn) {
fn.apply(callback_this, arg);
})
}
else{
var arg = arguments;
var callback_this = this;
this.memory = arg;
this.callbacks_list.forEach(function(fn) {
fn.apply(callback_this, arg);
})
} } },
remove: function(fn) {
for (var i = 0, l = this.callbacks_list.length; i < l; i++) {
if (this.callbacks_list[i] == fn) {
this.callbacks_list.splice(i, 1);
}
}
},
disable: function() {
this.callbacks_list = undefined;
return this;
},
disabled: function() {
return !callbacks_list;
},
has: function(fn) {
for (var i = 0, l = this.callbacks_list.length; i < l; i++) {
if (this.callbacks_list[i] == fn) {
return true;
}
}
return false;
},
empty: function() {
this.callbacks_list = [];
return this;
},
lock: function() {
this.callbacks_list = [];
this.has_locked = true;
}
}
/*demo1*/
var foo = function(value) {
console.log("foo:" + value);
};
var bar = function(value) {
console.log("bar:" + value);
}; callbacks.add(foo); callbacks.fire("hello"); callbacks.lock(); callbacks.fire("world"); /*demo2*/
// Add the foo function to the callback list again
callbacks.add(foo); // Try firing the items again
callbacks.fire("silentArgument");
// Outputs "foo: hello" because the argument value was stored in memory // Add the bar function to the callback list
callbacks.add(bar); callbacks.fire("youHadMeAtHello"); </script>
</head>
<body>
现在的callback有add,fire,remove,disable,has,empty,lock功能
</body>
</html>
还有未完成的就是，$.Callbacks()的参数once，memory，unique，stopOnFalse。
我一直思考的是，代码构建过程和纯逻辑思路，代码阅读。
一般来说，一个库的形成，是因为作者编写的过程中，发现一个个需求，或者一个个bug，然后需求和bug形成测试用例，根据测试用例，构造库。
它的库代码最后为什么会这个样子，一次次引入新变量，一个个判断来嵌套，还有为了库的使用便利，对函数参数做了各种判断处理，导致直接阅读有难度，不能通俗易懂。
那我们能否根据测试用例提取出这个模块的纯逻辑思路。至于逻辑思路的实现，交给开发自己代码能力实现。
最新文章
- c#-冒泡排序-算法
- linux chmod 命令
- maven oracle jdbc jar
- HDU3348（贪心求硬币数
- loadrunner具体实例教你如何进行结果分析
- C#使用RSA证书文件加密和解密示例
- Form_通过Trace分析Concurrent和Form性能和异常详解（案例）
- 常见的js函数
- CodeForces 173C Spiral Maximum （想法、模拟）
- 内核request_mem_region 和 ioremap的理解
- Android LruCache究竟是什么
- 对Ul下的li标签执行点击事件——如何获取你所点击的标签
- GDAL1.9.1 IN VS2008 C#中的编译及使用
- Selenium之利用Excel实现参数化
- mac地址静态捆绑，防止arp欺骗
- android正则表达式隐藏邮箱地址中间字符
- Promise的一点感悟~
- 英语口语练习系列-C30-生日-年历的周日和月份-如果白昼落进
- PHP钩子的简单介绍
- Emgucv学习系列之环境搭建
热门文章
- CMSPRESS-PHP无限级分类
- mac shell终端编辑命令行快捷键
- git pull报错，error: cannot lock ref导致拉流失败
- python中关于不执行if __name__ == '__main__':测试模块的解决
- Are you looking forward to this 11s Black Stingray
- SQL Server 2008 R2 超详细安装图文教程
- memcache图形管理工具
- 《Bilateral Multi-Perspective Matching for Natural Language Sentences》（句子匹配）
- 在HTML中实现和使用遮罩层
- 【转】svn http://提示svn: Unrecognized URL scheme错误