Может ли этот код 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);

Вам также следует подумать о " регулировании" обработчика событий для события resize, потому что некоторые браузеры запускают их при изменении размера окна. Используя underscore.js, это будет:

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

Answer 2

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

Answer 3

Вы можете использовать один селектор для добавления обоих событий и можете установить несколько атрибутов 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);
});