jQuery源码分析16--jQuery的each迭代器

jQuery的each迭代器

jQuery的each方法从使用上就要分2种情况：

☑ $.each()函数☑ $(selector).each()

$.each()函数和$(selector).each()是不一样的，后者是专门用来遍历一个jQuery对象的，是为jQuery内部服务的。

$.each()函数可用于迭代任何集合，无论是“名/值”对象（JavaScript对象）或数组。在迭代数组的情况下，回调函数每次传递一个数组索引和相应的数组值作为参数。（该值也可以通过访问this关键字得到，但是JavaScript始终将this值作为一个Object，即使它是一个简单的字符串或数字值。）该方法返回其第一个参数，这是迭代的对象。

jQuery的实例方法最终也是调用的静态方法，我们在之前就解释过jQuery的实例与原型方法共享的设计。

其中each的实例方法如下：

可见内部是直接调用的静态方法：

each: function(callback, args) {    return jQuery.each(this, callback, args);},

jQuery.each静态方法：

each: function(obj, callback, args) {    var value,        i = 0,        length = obj.length,        isArray = isArraylike(obj);    if (args) {        if (isArray) {            for (; i < length; i++) {                value = callback.apply(obj[i], args);                if (value === false) {                    break;                }            }        } else {            for (i in obj) {                value = callback.apply(obj[i], args);                if (value === false) {                    break;                }            }        }

实现原理几乎一致，只是增加了对于参数的判断。对象用for in遍历，数组用for遍历。

jQuery可以是多个合集数组DOM，所以在处理的时候经常就针对每一个DOM都要单独处理，所以一般都需要调用this.each 方法，如下代码：

dequeue: function( type ) {        return this.each(function() {            jQuery.dequeue( this, type );        });    },

迭代器除了单纯的遍历，在jQuery内部的运用最多的就是接口的抽象合并，相同功能的代码功能合并处理：

例如一：

jQuery.each("Boolean Number String Function Array Date RegExp Object Error".split(" "), function(i, name) {    class2type[ "[object " + name + "]" ] = name.toLowerCase();});

例如二：

jQuery.each({    mouseenter: "mouseover",    mouseleave: "mouseout",    pointerenter: "pointerover",    pointerleave: "pointerout"}, function( orig, fix ) {    //处理的代码});

可以看出上面代码方法，针对相同的功能，节约了大量的代码空间。