Можно ли рефакторить этот код 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);
});

jquery refactoring readability code-readability
person byronyasgur    schedule 15.06.2012    source источник
comment
Разместите его на codereview.stackexchange.com.   -  person Engineer    schedule 15.06.2012

Ответы (3)


arrow_upward
3
arrow_downward 

// 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" обработчик события изменения размера, поскольку некоторые браузеры запускают a их много при изменении размера окна. Используя underscore.js, это будет:

$(window).load(resizeBackground).resize( _.throttle(resizeBackground, 100) );
person Niko    schedule 15.06.2012
comment
$(окно).bind(загрузить изменение размера, изменение размера фона); - person deerua; 15.06.2012

arrow_upward
1
arrow_downward

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

arrow_upward

arrow_downward

person    schedule
comment
Какая от этого польза? Для меня нет, извините. - person Sebastian Wramba; 15.06.2012
comment
Мне нравится {'display':'block','height':height}. Я забыл, что могу это сделать. - person byronyasgur; 15.06.2012
comment
Я имею в виду, что, на мой взгляд, это не делает код лучше. - person Sebastian Wramba; 15.06.2012
comment
Что ж, теперь, после вашего редактирования, это большая разница. Но попрошайничество для меня не работает. - person Sebastian Wramba; 15.06.2012
comment
эй, я не умоляю вас о голосовании, которое было просто пижамой, и ваше голосование не повлияет на меня так сильно, как через три-четыре дня я заработаю больше репутации, чем вы, если останусь активным. - person ; 15.06.2012