Skip to content

11.jQuery的each迭代器

jQuery的each方法从使用上就要分两种:

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

$.each()函数和$(selector).each()是不一样的,后者是专门用来遍历一个jQuery对象的,是为jQuery内部服务的。 $.each()函数可用于迭代任何集合,无论是“名/值”对象(JavaScript对象)或数组。在迭代数组的情况下,回调函数每次传递一个数组索引和相应的数组值作为参数。(该值也可以通过访问this关键字得到,但是JavaScript始终将this值作为一个Object,即使它是一个简单的字符串或数字值。)该方法返回其第一个参数,这是迭代的对象。 jQuery的实例方法最终也是调用的静态方法,我们在之前就解释过jQuery的实例与原型方法共享的设计。

其中each的实例方法如下:

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

<script> each: function(callback, args) { return jQuery.each(this, callback, args); } </script>

jQuery.each的静态方法

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

} } </script>

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

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

<script> dequeue: function(type) { return this.each(function() { jQuery.dequeue(this, type); }) } </script>

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

例一:

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

例二:

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

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

共 20 个模块,1301 篇 Markdown 文档。