-1

这已经在这里得到了完整的回答： 链接 什么是整理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 语句，因为它们在大多数情况下没有任何功能。克里斯

4

1 回答 1

2

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

// 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-29T13:47:53.730 回答