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

时间 2019-12-01

原文原文链接

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

这意味着，正如咱们必须优化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 
           }

糟糕的代码：html

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

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

优化的代码：数组

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

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