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

最新推荐文章于 2024-11-15 19:51:40 发布

chilinglian4825

最新推荐文章于 2024-11-15 19:51:40 发布

阅读量109

点赞数

文章标签： javascript ViewUI

原文链接：https://my.oschina.net/brian_nodejs/blog/16289

版权

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

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

view source 
    
print?

 
    01// jQuery's each method source
 
    02    each: function( object, callback, args ) {
 
    03        var name, i = 0,
 
    04            length = object.length,
 
    05            isObj = length === undefined || jQuery.isFunction(object);
 
    06 
 
    07        if ( args ) {
 
    08            if ( isObj ) {
 
    09                for ( name in object ) {
 
    10                    if ( callback.apply( object[ name ], args ) === false ) {
 
    11                        break;
 
    12                    }
 
    13                }
 
    14            } else {
 
    15                for ( ; i < length; ) {
 
    16                    if ( callback.apply( object[ i++ ], args ) === false ) {
 
    17                        break;
 
    18                    }
 
    19                }
 
    20            }
 
    21 
 
    22        // A special, fast, case for the most common use of each
 
    23        } else {
 
    24            if ( isObj ) {
 
    25                for ( name in object ) {
 
    26                    if ( callback.call( object[ name ], name, object[ name ] ) === false ) {
 
    27                        break;
 
    28                    }
 
    29                }
 
    30            } else {
 
    31                for ( var value = object[0];
 
    32                    i < length &amp;amp;amp;amp;&amp;amp;amp;amp; callback.call( value, i, value ) !== false; value = object[++i] ) {}
 
    33            }
 
    34        }
 
    35 
 
    36        return object;
 
    37    }

糟糕的代码：

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

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

优化的代码：

 
    1var someDivs = $('#container').find('.someDivs'),
 
    2contents = [];
 
    3 
 
    4someDivs.each(function() {
 
    5contents.push( this.innerHTML );
 
    6});
 
    7$('#anotherDiv').html( contents.join('') );