我如何壓縮這個jQuery，以便它更高效？

-5

下面是我寫的一些簡單動畫的jQuery代碼。不過，我對它很陌生，我不知道如何濃縮它，並受到教程的困擾！我如何壓縮這個jQuery，以便它更高效？

<!-- Login Form Div Animation --> 
<script type="text/javascript"> 
$(document).ready(function() { 
    $('#button-active').hide(); 
    if ($("#LoginButton").hasClass("inactive")) { 
      $("#TopLoginForm").hide(); 
    } else { 
      $("#TopLoginForm").show(); 
    } 
    $("#LoginButton").click(function() { 
     if ($("#LoginButton").hasClass("inactive")) { 
      $("#LoginButton").animate({ 
       marginTop: "-40px" 
       }, 500); 
      $("#button-inactive").animate({ 
       opacity: "0" 
       }, 500); 
      $('#button-inactive').remove(); 
      $('#button-active').hide(); 
      $('#button-active').delay(30).fadeIn(1000); 
      $('#LoginWelcome').delay(0).fadeOut(1000); 
      $('#TopLoginForm').delay(800).fadeIn(1000); 
      $("#LoginButton").addClass("button"); 
      $("#LoginButton.button").click(function() { 
       document.forms["LoginForm"].submit(); 
      }); 
     } 
    }); 
}); 
</script> 
<!-- End Login Form Div Animation -->

活代碼就可以看出它的www.trainingthemlive.co.uk/temp在頁面

來源

2012-06-23 Andy Holmes

你說的「稠」，什麼意思，你的意思是「多EFFIC ient「？ –

你也可以考慮http://codereview.stackexchange.com/ – biziclop

如果你的代碼至少有評論，會有幫助。實際上，每個人都必須解析所有的代碼，並試圖將其與未提供的DOM進行對比。 – lanzz

如果你知道結果沒有改變，你可以做的大事是避免兩次運行相同的查詢。鏈或緩存你的jQuery調用的結果！而不是：

$('#button-active').hide(); 
$('#button-active').delay(30).fadeIn(1000);

您可以使用jQuery對象的可鏈接性。事實上，你已經在第二行了 - 爲什麼不採取額外的步驟呢？

$('#button-active').hide().delay(30).fadeIn(1000);

爲了提高可讀性：

$('#button-active') 
    .hide() 
    .delay(30) 
    .fadeIn(1000);

但是這還不是全部問題。如果你需要依次對一個對象或集合做一堆事情，Chaining簡明扼要。但是如果您需要在執行過程中的幾個不同點訪問一個對象，如button-active，則應該將查詢存儲爲變量。

var $activeButton = $('#button-active'); // a common convention is to use the $ prefix on variables storing jQuery objects, but this is arguable & optional

總之，與其他幾個效率的技巧：

;$(document).ready(function() { 
    var inactiveClass  = "inactive" 
     , buttonClass  = "button" 
     , fadeDuration  = 1000 
     , animateDuration = 500 
     , shortDelay  = 30 
     , longDelay   = 800 

     , loginInactiveButtonAnimateTarget = { 
      marginTop: -40 
     } 
     , inactiveButtonAnimateTarget = { 
      opacity: 0 
     } 

     , loginButtonClickHandler = function() { 
      document.forms["LoginForm"].submit() // not modifying this, but if this is the "TopLoginForm" then you could do this simpler 
     } 

     , $activeButton  = $('#button-active').hide() /* the .hide() method chains, so it returns the button-active object */ 
     , $loginButton  = $('#LoginButton') 
     , $topLoginForm  = $('#TopLoginForm') 
     , $loginWelcome  = $('#LoginWelcome') 
     , $inactiveButton = $('#button-inactive') 

    if ($loginButton.hasClass(inactiveClass)) { 
     $topLoginForm.hide() 
    } else { 
     $topLoginForm.show() 
    } 
    $loginButton.click(function() { 
     if ($loginButton.hasClass(inactiveClass)) { 
      $loginButton.animate(loginnactiveButtonAnimateTarget, animateDuration) 
      $inactiveButton.animate(inactiveButtonAnimateTarget, animateDuration).remove() 
      $activeButton.hide().delay(shortDelay).fadeIn(fadeDuration) 
      $loginWelcome.delay(0).fadeOut(fadeDuration) 
      $loginForm.delay(longDelay).fadeIn(fadeDuration) 
      $loginButton.addClass(buttonClass).click(loginButtonClickHandler) 
     } 
    }) 
});

來源

2012-06-23 22:43:52 zetlen

真的很喜歡這個答案，非常感謝你:) –

謝謝。請注意，我只是糾正了一個語法錯誤。 :) – zetlen

盡我獲得可以做的頂部。你有很多的重複功能

$(document).ready(function() { 
    //Start hidden 
    $('#button-active').hide(); 
    $("#TopLoginForm").hide(); 

    // clicking "login" 
    $("#LoginButton").click(function() { 
    if ($("#LoginButton").hasClass("inactive")) { 
     $("#LoginButton").animate({ 
      marginTop: "-40px" 
      }, 500); 
     $('#LoginWelcome').fadeOut(1000); 
     $('#button-active').fadeIn(1000); 
     $('#TopLoginForm').fadeIn(1000); 
     $("#LoginButton").addClass("button"); 
     $("#LoginButton.button").click(function() { 
      document.forms["LoginForm"].submit(); 
     }); 
    } 
    }); 
});

來源

2012-06-23 22:20:02

關於jQuery的優化一件大事是知道的jQuery函數jQuery()經常別名爲$()確實是一個功能。

這意味着使用$('#some_id')實際上是調用查找 ID爲#some_id的HTML元素的函數。這是昂貴的性能明智的，因爲尋找在DOM中的東西意味着遍歷樹和檢查/比較節點的屬性。

您應該從DOM（使用jQuery）獲取HTML元素並將該引用保存到變量中。在稍後的腳本中，您將使用相同的變量引用該HTML元素，以免再次遍歷DOM 尋找相同的元素。

通過使用jQuery的method chaining方法（如@meloncholy所建議的），您將獲得與定義變量和更緊湊語法相同的好處。這對於操作後面不需要引用的對象非常有用，因此您只需對所需的所有操作進行疊加即可。

一個例子是：

var some_object = $('#some_id'); 
some_object.hide(); 
if (some_object.hasClass('some_class')) { 
    ...

我不能說會有一個明顯的性能改善這種規模的腳本。如果你有幾百行jQuery代碼，它們都會濫用樹中的jQuery()函數和幾百個HTML元素，然後按照我的指示重構jQuery代碼，那麼你將會加速。

來源

2012-06-23 22:23:47

只需添加一點：由於很多jQuery函數都會返回正在操作的對象，因此可以使用鏈接對連續的同一元素執行多個操作。這爲@Mihai Stancu說，爲瀏覽器節省了時間，並且使代碼更加緊湊，例如， '（「＃button-active」）。hide（）。delay（30）.fadeIn（1000）;' – meloncholy

這裏是我採取的簡化IT：

<script type="text/javascript"> 
$(document).ready(function() { 
    var loginButton = $("#LoginButton"); 
    var topLoginForm = $("#TopLoginForm").toggle(!loginButton.hasClass("inactive")); 
    loginButton.click(function() { 
     var this$ = $(this); 
     if (this$.hasClass("inactive")) { 
      this$.animate({marginTop: "-40px"}, 500); 
      $("#button-inactive").animate({opacity: "0"}, 500, function() {$(this).remove();}); 
      $('#button-active').hide().delay(30).fadeIn(1000); 
      $('#LoginWelcome').fadeOut(1000); 
      topLoginForm.delay(800).fadeIn(1000); 
      loginButton.addClass("button").click(function() { 
       document.forms["LoginForm"].submit(); 
      }); 
     } 
    }); 
}); 
</script> 
<!-- End Login Form Div Animation -->

技術用於簡化它：

在同一個jQuery對象上鍊多個命令牛逼
使用翻轉（布爾），而不是if/else語句
保存任何的jQuery對象，因此不會直到動畫完成後取出，用於在動畫不止一次
使用完成函數的局部變量
在事件處理程序刪除.delay(0)，因爲它沒有做任何事情
使用this而不是重新運行電流選擇

來源

2012-06-24 00:13:26 jfriend00

嗨，大家好。非常感謝您的所有投入！我必須道歉，我對jQuery非常陌生，並且這是我嘗試做的第一件事 - 完整無缺，所以顯然有很大的改進空間！此外，第一次在堆棧溢出，所以再次，道歉的任何規則，我可能已經打破等。我已閱讀所有的意見，並瞭解你在說什麼，我一定會更多地研究它。儘管如此，再次感謝，我希望我能成爲這個社區的一部分，只是有更好的帖子！哈哈 Andy –

我如何壓縮這個jQuery，以便它更高效？

回答

相關問題