当前位置:编程学习 > JAVA >>

读jquery之四(优雅的迭代)

前面提到jQuery库如何通过其中的jQuery.extend及jQuery.fn.extend去扩展自身的。第三篇给zChain.js添加了常用选择器,但目前为止zChain.js仍然做不了任何事情。

jQuery的操作往往是分两步

1,获取元素集合(选择器)

2,操作元素集合

而第二步操作元素集合的主要方法就是jQuery.each。查看源码,我们发现jQuery.each及this.each分别调用了27次和31次。可见它是多么的重要。

这篇将分析下jQuery.each及this.each方法。看看他们如何与jQuery.extend一起扩展jQuery库。最后我会给zChain.js加上each方法。

部分源码如下

view sourceprint?01 jQuery.fn = jQuery.prototype = { 

02     ... 

03     // Execute a callback for every element in the matched set. 

04     // (You can seed the arguments with an array of args, but this is 

05     // only used internally.) 

06     each: function( callback, args ) { 

07         return jQuery.each( this, callback, args ); 

08     }, 

09     ... 

10 } 

11   

12 jQuery.extend({ 

13   

14     ... 

15     // args is for internal usage only 

16     each: function( object, callback, args ) { 

17         var name, i = 0, 

18             length = object.length, 

19             isObj = length === undefined || jQuery.isFunction( object ); 

20       

21         if ( args ) { 

22             if ( isObj ) { 

23                 for ( name in object ) { 

24                     if ( callback.apply( object[ name ], args ) === false ) { 

25                         break; 

26                     } 

27                 } 

28             } else { 

29                 for ( ; i < length; ) { 

30                     if ( callback.apply( object[ i++ ], args ) === false ) { 

31                         break; 

32                     } 

33                 } 

34             } 

35         // A special, fast, case for the most common use of each 

36         } else { 

37             if ( isObj ) { 

38                 for ( name in object ) { 

39                     if ( callback.call( object[ name ], name, object[ name ] ) === false ) { 

40                         break; 

41                     } 

42                 } 

43             } else { 

44                 for ( ; i < length; ) { 

45                     if ( callback.call( object[ i ], i, object[ i++ ] ) === false ) { 

46                         break; 

47                     } 

48                 } 

49             } 

50         } 

51       

52         return object; 

53     },   

54     ... 

55 });

 

以上可看出,
1,jQuery().each是直接挂在jQuery.prototype(jQuery.fn)上的,因此每个jQuery对象都包含each方法。
2,jQuery.each是通过jQuery.extend({})方式扩展的。前面已经说过,通过这种方式扩展的方法将挂在function jQuery上,即为jQuery类的静态方法。
3,jQuery().each方法中只有一句:return jQuery.each( this, callback, args )。即jQuery对象的each方法实现上其实就是调用jQuery静态的jQuery.each。因此jQuery.each才是关键所在。

下面详细分析jQuery.each,它有三个参数object, callback, args。
1,object可以为数组(Array),对象(Object),甚至是函数类型(Functoin);
2,callback是回调函数,类型为function;
3,args为jQuery库自身使用,使用者不会用到该参数,这里暂不讨论该参数情况。

 

函数中第一句定义必要的变量

view sourceprint?1 var name, i = 0, 

2     length = object.length, 

3     isObj = length === undefined || jQuery.isFunction( object );

length=object.length很好理解,有三种情况length不为undefined
1, object为数组类型(Array)时,数组具有length属性;
2, object为函数类型(Functoin)时,length为该函数定义的参数个数,如果该函数没有定义参数,length为0;
3, 具有length属性的object伪数组(如:arguments,HTMLCollection,NodeList等)。

 

变量isObj用来判断是否是对象类型,有两种情况为true:
1,变量length等于undefined,即所传object没有length属性。
2,参数object为函数类型


这里强调下object为jQuery对象。即当在$(xx).each时发生,这时会将this传到$.each中。如:return jQuery.each( this, callback, args )。这里第一个参数this即为jQuery对象,每个jQuery对象是具有length属性的。

 

each中有以下两个分支

1,如果isObj为true,则用for in语句去遍历该对象,如果把每个迭代的对象看出键值对形式的话。callback中的this是值object[nam

补充:软件开发 , Java ,
CopyRight © 2012 站长网 编程知识问答 www.zzzyk.com All Rights Reserved
部份技术文章来自网络,