这个jQuery代码可以重构吗

我想提高我的jQuery技能，我有这一点的代码。它的基本目的是调整背景大小并调整大小，以保持与响应滑块相同的高度，以便匹配窗口的大小;并跟踪它是否由用户调整大小。这个jQuery代码可以重构吗

它可以被重构得更好，或者它是好的。

$(window).load(function() { 
var height = $('#display-area').css('height'); 
$('.skin-background') 
    .css('display', 'block') 
    .css('height', height); 
}); 
$(window).resize(function() { 
var height = $('#display-area').css('height'); 
$('.skin-background') 
    .css('height', height); 
});

来源

2012-06-15 byronyasgur

发布它在http://codereview.stackexchange.com/ – Engineer

// Cache elements that get used more than once 
var $background = $('.skin-background'); 
var $displayArea = $('#display-area'); 

// Don't repeat yourself, put recurring actions in functions 
var resizeBackground = function() { 
    $background.css({ 
     'display': 'block', 
     'height': $displayArea.height() + 'px' 
    }); 
}; 

$(window).load(resizeBackground).resize(resizeBackground);

你也应该考虑为“throttle”的事件处理程序调整大小事件，因为一些浏览器在调整窗口大小时会激活很多。使用underscore.js，这将是：

$(window).load(resizeBackground).resize(_.throttle(resizeBackground, 100));

来源

2012-06-15 13:31:43 Niko

$（window）.bind（“load resize ”，resizeBackground）; – deerua

$(window).on("load resize",function() { 
var height = $('#display-area').height(); 
$('.skin-background') 
    .css({'display':'block','height':height}); 
});

来源

2012-06-15 13:27:59

这有什么好处？没有对我，我很抱歉。 –

你是什么意思 – 2012-06-15 13:32:10

我喜欢'{'display'：'block'，'height'：height}'。我忘了我可以做到这一点。 – byronyasgur

您可以将两个事件使用单一的选择，可以设置多个CSS属性，这样

$(window).load(function() { 
var height = $('#display-area').css('height'); 
$('.skin-background') 
    .css('display' : 'block','height', height); 

}).resize(function() { 
var height = $('#display-area').css('height'); 
$('.skin-background') 
    .css('height', height); 
});

来源

2012-06-15 13:30:32 Adil

这个jQuery代码可以重构吗

回答

相关问题