代碼整理？

-1

這已經在這裏全部回答： link 什麼是最好的方式來整理javascript代碼我已經寫了這個，但它似乎很長時間纏繞任何建議，以縮短它？代碼整理？

jQuery("document").ready(function(jQuery){ 

if (jQuery(window).width() < 960) { 
     jQuery(".main").animate({"top":"22%"}); 
     jQuery('#tblcontents').toggle(function(){ 
     jQuery(".main").fadeOut(1000); 
     }, function(){ 
     jQuery(".main").fadeIn(1000); 
     jQuery(".main").animate({"top":"22%"}); 

    }); 

} 
else { 
} 

    jQuery('.menu-button').click(function(){ 
    jQuery("#sb-container div").css("transform", "rotate(0deg)" ); 
    jQuery("#sb-container div").css("-webkit-transform", "rotate(0deg)" ); 
    jQuery("#sb-container div").css("-ms-transform", "rotate(0deg)" ); 
    jQuery("#sb-container div").css("-moz-transform", "rotate(0deg)" ); 
    jQuery("#sb-container div").css("-o-transform", "rotate(0deg)" ); 
    jQuery(".main").animate({"right":"1%"}, "slow"); 
}); 

jQuery(function(){ 
    jQuery('.toggle_div').toggle(function(){ 
    jQuery(".main").animate({"right":"50%"}, "slow"); 
}, function(){ 
    jQuery(".main").animate({"right":"1%"}, "slow"); 
    }); 
}); 

jQuery(".pulse").effect("pulsate", { times:100 }, 2000).click(function(){ 
    jQuery(".pulse").effect().stop(true, true); 
    jQuery(".pulse").animate({"opacity":"1"}, "fast"); 
}); 
    jQuery('.thumb').click(function(){ 
    jQuery("#sb-container div").css("transform", "rotate(0deg)" ); 
    jQuery("#sb-container div").css("-webkit-transform", "rotate(0deg)" ); 
    jQuery("#sb-container div").css("-ms-transform", "rotate(0deg)" ); 
    jQuery("#sb-container div").css("-moz-transform", "rotate(0deg)" ); 
    jQuery("#sb-container div").css("-o-transform", "rotate(0deg)" ); 
    jQuery("#sb-container").animate({"left":"0px"}, "slow"); 
    jQuery(".main").animate({"right":"1%"}, "slow"); 
    }); 

jQuery(window).scroll(function() { 
    if (jQuery(this).scrollTop() > 20) { 
    jQuery("#sb-container div").css("transform", "rotate(0deg)" ); 
    jQuery("#sb-container div").css("-webkit-transform", "rotate(0deg)" ); 
    jQuery("#sb-container div").css("-ms-transform", "rotate(0deg)" ); 
    jQuery("#sb-container div").css("-moz-transform", "rotate(0deg)" ); 
    jQuery("#sb-container div").css("-o-transform", "rotate(0deg)" ); 
    jQuery(".main").animate({"right":"1%"}, "slow"); 

    } else{ 
      jQuery("#sb-container").draggable() 
    } 
}); 

}); 

    jQuery(function() { 
jQuery("#sb-container").draggable() 
});

如何減少此處顯示的代碼量？什麼是最佳實踐，我錯過了什麼？我也需要查詢窗口寬度的else語句，因爲它們大部分沒有任何功能。克里斯

來源

2013-03-29 vimes1984

你應該TR y codereview.stackexchange.com，它會更適合這個問題。不過，作爲第一個注意事項，您可以使用$而不是jQuery。這將節省相當可觀的金額。 –

謝謝我現在會在那裏彈出：D我應該從這裏刪除問題以停止雙重發布？ – vimes1984

您是否嘗試過使用縮小工具縮短長度，刪除空格並重命名變量名稱？您可以取消jQuery關鍵字並使用$，而不會丟失任何功能。 – kanchirk

你可以做的款式批量設置這樣的清理你的代碼的某些成分：

// it looks like you reuse this same set of styles in a few places 
// define them once as a variable and assign as needed 
var defaultStyles = 
{ 
    "transform": "rotate(0deg)", 
    "-webkit-transform": "rotate(0deg)", 
    "-ms-transform": "rotate(0deg)", 
    "-moz-transform": "rotate(0deg)", 
    "-o-transform": "rotate(0deg)" 
};

jQuery('.menu-button').click(function() { 
    jQuery("#sb-container div").css(defaultStyles); 
    jQuery(".main").animate({"right":"1%"}, "slow"); 
});

jQuery('.thumb').click(function(){ 
    jQuery("#sb-container div").css(defaultStyles); 
    jQuery("#sb-container").animate({"left":"0px"}, "slow"); 
    jQuery(".main").animate({"right":"1%"}, "slow"); 
});

if (jQuery(this).scrollTop() > 20) { 
    jQuery("#sb-container div").css(defaultStyles); 
    jQuery(".main").animate({"right":"1%"}, "slow"); 
}

來源

2013-03-29 13:47:53 hunter

謝謝你工作的魅力：D – vimes1984

回答

相關問題