Избегайте дублирования кода при использовании .resize() в jQuery

Question

У меня есть сценарий jQuery, состоящий из 100 строк или около того. Когда браузер открывается, он имеет определенную ширину и высоту, используя эти значения, скрипт вычисляет позиции для различных элементов HTML.

Проблема:

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

Я поместил весь код внутри resize() функции, но другая проблема есть код внутри resize() будет выполняться только тогда, когда браузер изменяет размер и не тогда, когда браузер запущен первым.

Есть ли способ, что я могу связать события, как -

if($(document).ready() OR $(window).resize()) { 
. . . 
} 

Answer 1

Вы должны определить функцию со всем кодом, а затем вызвать его в различных мероприятиях:

function stuff() { 
    // all stuff; 
} 

$(document).ready(stuff); 
$(window).resize(stuff); 

Answer 2

Первого привязывать размер события затем запустите его на document.ready(). Посмотрите на мой код

$(window).resize(function() { 
 
    alert('Window is resized'); 
 
}); 
 
$(document).ready(function() { 
 
    $(window).resize(); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Answer 3

Может быть, это путь до конца, но хороший момент, чтобы увидеть модуль Pattern. Поэтому определите функцию один раз и вызовите ее из того места, где вам захочется.

var WRAP = (function() { 

    var myFunction = function (text) { 
     console.log(text); 
    }; 

    var myOtherFunction = function() { 
     console.log('does nothing'); 
    }; 

    return { 
     callMyFunction: myFunction, 
     myOtherFunction: myOtherFunction 
    }; 

})(); 

WRAP.callMyFunction('Loaded'); 
WRAP.myOtherFunction(); 

$(window).resize(function(){ 
    WRAP.callMyFunction('Resized'); 
}); 

Fiddle http://jsfiddle.net/7cty2ytq/ и хорошо читать: http://toddmotto.com/mastering-the-module-pattern/