Как я могу написать этот фрагмент JQuery красивее

Question

Эти две функции должны запускаться при нагрузке и при изменении размера. Мне интересно, как написать это более компактно и красиво. Есть идеи?

$(document).ready(function() {
    fullScreen();
    footer();
    $(window).resize(function() {
        fullScreen();
        footer();
    });
});

Answer 1

Вы можете вызвать событие resize сразу после регистрации вашего обработчика:

$(document).ready(function() {
    $(window).resize(function() {  // Register handler.
        fullScreen();
        footer();
    }).resize();                   // Trigger event.
});

Answer 2

Ну, вы могли бы объединить их в одну функцию, но я не уверен, что это более "красиво":

jQuery(function($) {

    both();
    $(window).resize(both);

    function both() {
        fullScreen();
        footer();
    }
});

Это решает проблему неповторения.

Не по теме : я также переключил $(document).ready(function(){... на jQuery(function($){.... Он делает то же самое, но делает указанный код совместимым с noConflict, если это полезно. Если вам никогда не понадобится совместимость noConflict, вы можете использовать вместо нее $(function(){..., но, эй, для шести дополнительных символов ...

Answer 3

$(function() {
    function both() {
        fullScreen();
        footer();
    }

    both();
    $(window).resize(both);
});

Answer 4

@ TJ Crowder ответ (вызов другого метода) выглядит идеальным решением.

При вызове нового метода фиксируется намерение вызовов обоих этих методов,делая его функциональным .

Кроме того, если вам нужно изменить то, что нужно делать при загрузке или изменении размера, вам нужно будет изменить его только одним способом, что сделает его ремонтопригодным .

Значимое имя, например readjustLayoutAfterResize, которое описывает намерение, делает его читабельным .

Функционально, легко обслуживаемо и читабельно, прекрасно для меня, и я уверен, что кто бы то ни былподдерживать его.

Answer 5

$(document).ready(function () {
        var doStuff = function () {
            fullScreen();
            footer();
        };
        doStuff();

        $(window).resize(function () {
            doStuff();
        });
    });