【jQuery点滴】编写高性能的jQuery代码

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

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

[code=”javascript”]
// 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; } [/code] 糟糕的代码: [code="javascript"] someDivs.each(function()?{ $('#anotherDiv')[0].innerHTML?+=?$(this).text(); }); [/code]

  1. 每一次遍历循环中都会搜寻anotherDiv 这个ID的元素
  2. 两次获取innerHTML属性
  3. 创建了一个jQuery对象,只是为了获取元素的text属性
  4. 优化的代码:
    [code=”javascript”]
    var someDivs = $(‘#container’).find(‘.someDivs’),
    contents = [];

    someDivs.each(function() {
    contents.push( this.innerHTML );
    });
    $(‘#anotherDiv’).html( contents.join(”) );
    [/code]

    这样,在each (for)方法,我们唯一要执行任务的关键是增加一个新的到一个数组…而不是查询DOM中,取代了元素两次获取innerHTML属性等。
赞(0) 打赏
未经允许不得转载:WEB前端开发 » 【jQuery点滴】编写高性能的jQuery代码

评论 6

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
  1. #-49

    内容不错,但翻译还是要用点心的

    陈涛8年前 (2010-11-03)回复
  2. #-48

    这说的是要缓存jQuery对象

    Leeiio8年前 (2010-11-03)回复
  3. #-47

    标题写的大一点,点击来的多一点,哈哈!

    8年前 (2010-11-03)回复
  4. #-46

    初学者使用jQuery比使用原生JS更容易编出效率低下的代码

    QiQiBoY8年前 (2010-11-03)回复
  5. #-45

    一般能不用each就不用each。对于确定没有兼容性问题的属性和function,可以考虑使用原生属性或function

    var someDivs = $(‘#container’).find(‘.someDivs’),
    contents = [];
    var len = someDivs.length;
    for ( var i=0; i<len; i++ ) {
    contents.push( someDivs[i].innerHTML );
    }
    $('#anotherDiv')[0].innerHTML = contents.join('')

    $('#anotherDiv').html( contents.join('') ); //如果沒有特別需要, 可改用getElementById()获取元素

    愚见,莫见笑;)

    captain8年前 (2010-11-08)回复
    • 想法不错,但这样做,each 跟 for 比较效率,差多少呢?

      Azhun8年前 (2011-02-08)回复

前端开发相关广告投放 更专业 更精准

联系我们

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏