jquery - 这个jQuery代码可以重构吗

Question

我正在努力提高我的 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);
});

Answer 1

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

您还应该考虑“限制”调整大小事件的事件处理程序，因为某些浏览器在调整窗口大小时会触发很多事件处理程序。使用 underscore.js，这将是：

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

Answer 2

您可以使用单个选择器来添加两个事件，并且可以像这样设置多个 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);
}); 

Answer 3

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