這個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代碼可以重構嗎

回答

相關問題