编写高性能的jQuery代码 -- JavaScript -- IT技术博客大学习 -- 共学习共进步！

您现在的位置：首页 --> JavaScript --> 编写高性能的jQuery代码

编写高性能的jQuery代码

浏览:1995次出处信息

请记住 - jQuery只是JavaScript。不要以为它有能力来补偿你糟糕的代码。

这意味着，正如我们必须优化JavaScript for语句一样，我们必须优化jQuery的each方法。


// jQuery's each method source
 each: function( object, callback, args ) {
  var name, i = 0,
   length = object.length,
   isObj = length === undefined || jQuery.isFunction(object);

  if ( args ) {
   if ( isObj ) {
    for ( name in object ) {
     if ( callback.apply( object[ name ], args ) === false ) {
      break;
     }
    }
   } else {
    for ( ; i < length; ) {
     if ( callback.apply( object[ i++ ], args ) === false ) {
      break;
     }
    }
   }

  // A special, fast, case for the most common use of each
  } else {
   if ( isObj ) {
    for ( name in object ) {
     if ( callback.call( object[ name ], name, object[ name ] ) === false ) {
      break;
     }
    }
   } else {
    for ( var value = object[0];
     i < length &amp;amp;amp;&amp;amp;amp; callback.call( value, i, value ) !== false; value = object[++i] ) {}
   }
  }

  return object;
 }

糟糕的代码：


someDivs.each(function() {
      $('#anotherDiv')[0].innerHTML += $(this).text();
});

在每一次遍历循环中都会搜寻anotherDiv 这个ID的元素两次获取innerHTML属性创建了一个jQuery对象，只是为了获取元素的text属性

优化的代码：


var someDivs = $('#container').find('.someDivs'),
contents = [];

someDivs.each(function() {
contents.push( this.innerHTML );
});
$('#anotherDiv').html( contents.join('') );

这样，在each (for)方法，我们唯一要执行任务的关键是增加一个新的到一个数组…而不是查询DOM中，取代了元素两次获取innerHTML属性等。

建议继续学习：

QQ技术交流群：445447336，欢迎加入！
扫一扫订阅我的微信号：IT技术博客大学习

<< 前一篇：jquery中的数组过滤筛选-$.grep()

后一篇：10个强大的Ajax jQuery文件上传程序 >>

文章信息

作者：愚人码头来源： WEB前端开发
标签： each jQuery
发布时间：2010-11-07 08:47:10

建议继续学习

近3天十大热文