代码整理？

Question

这已在此完整回答： 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语句，因为它们大部分都没有任何函数。 克里斯

Answer 1

您可以通过批量设置以下样式来清理代码的某些组件：

// 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");
}