jquery - 将函数应用于类或通过 each() 之间的区别

Question

将函数应用于具有类的所有元素或通过每个函数执行它有什么区别吗？这可能是一个愚蠢的问题，但在我的情况下，a 可以以两种不同的方式执行代码，所以我想知道两者之间是否存在任何性能差异：

$('.my_class').hide(); //for example

和

$('.my_class').each(function(){
    $(this).hide();
});

Answer 1

这些在效果上是相同的，但第一种方式更好，因为它更干净。您的代码目标应该是：

1. 正确的
2. 清除
3. 简洁的
4. 快速地

一般来说，在您注意到某种问题之前，您不应该担心速度。有时我们可能会为了提高速度而考虑前三个考虑因素之一，但是，在您知道存在性能问题之前这样做违反了互联网上的“过早优化”警告。让你的代码简洁易懂比挤出最后一飞秒的性能更重要。

如果您检查jQuery 1.10.1 的源代码，您会发现在幕后，一次调用hide()一个必须更慢，因为不是将所有元素都隐藏在一个函数调用中，而是全部隐藏在它自己的内部循环中，现在有为每个元素调用一次函数的外部循环。

比较一些伪代码：

/*elements.hide()*/

function hide() {
   for (i = 0; i < l; i += 1) {
      // hide them
   }
}

/*elements.each(function() {element.hide();}*/

function each() {
   for (i = 0; i < l; i += 1) {
      element[i].hide() { // only one element each time, now
         for (i = 0; i < l; i += 1) {
            //hide item
         }
      }
   }
}

通过使用第二种方法，您获得了一个本身处理许多元素的高效函数，并强制它运行多次以每次只处理一个元素。

一般来说，您应该简单地选择最干净的代码。使用 jQuery 的最大原因之一是获得干净的代码，这样您就不会遇到所有令人讨厌的混乱！任何人都可以编写计算机可以理解的代码，但优秀的程序员编写人类可以理解的代码。你的代码很容易被理解——明天的你，或者明年的其他人，甚至是五年后的你，有很大的价值。不要增加复杂性。

作为参考，这里是函数定义hide（这是从一个短存根调用的）：

function showHide( elements, show ) {
   var display, elem, hidden,
      values = [],
      index = 0,
      length = elements.length;

   for ( ; index < length; index++ ) {
      elem = elements[ index ];
      if ( !elem.style ) {
         continue;
      }

      values[ index ] = jQuery._data( elem, "olddisplay" );
      display = elem.style.display;
      if ( show ) {
         // Reset the inline display of this element to learn if it is
         // being hidden by cascaded rules or not
         if ( !values[ index ] && display === "none" ) {
            elem.style.display = "";
         }

         // Set elements which have been overridden with display: none
         // in a stylesheet to whatever the default browser style is
         // for such an element
         if ( elem.style.display === "" && isHidden( elem ) ) {
            values[ index ] = jQuery._data( elem, "olddisplay", css_defaultDisplay(elem.nodeName) );
         }
      } else {

         if ( !values[ index ] ) {
            hidden = isHidden( elem );

            if ( display && display !== "none" || !hidden ) {
               jQuery._data( elem, "olddisplay", hidden ? display : jQuery.css( elem, "display" ) );
            }
         }
      }
   }

   // Set the display of most of the elements in a second loop
   // to avoid the constant reflow
   for ( index = 0; index < length; index++ ) {
      elem = elements[ index ];
      if ( !elem.style ) {
         continue;
      }
      if ( !show || elem.style.display === "none" || elem.style.display === "" ) {
         elem.style.display = show ? values[ index ] || "" : "none";
      }
   }

   return elements;
}

并且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;
            }
         }
      }

   // A special, fast, case for the most common use of each
   } else {
      if ( isArray ) {
         for ( ; i < length; i++ ) {
            value = callback.call( obj[ i ], i, obj[ i ] );

            if ( value === false ) {
               break;
            }
         }
      } else {
         for ( i in obj ) {
            value = callback.call( obj[ i ], i, obj[ i ] );

            if ( value === false ) {
               break;
            }
         }
      }
   }

   return obj;
},

Answer 2

直接调用$('.my_class').hide();似乎更快

看这个测试

第一种方法也更清晰易懂