【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('') );