Как получить доступ к переменной из другой функции?

Question

[Сергей]

Предположим, есть гипотетический код:

$(window).on('load resize', function() {
    var img = document.createElement('img');
    img.src = 'img/bg.jpg';
    var imgAspectRatio = img.naturalWidth/img.naturalHeight;

    var $bg = $('.bg'), bgAspectRatio = $bg.outerWidth() / $bg.outerHeight();
        
    if (bgAspectRatio > imgAspectRatio) {
      $bg.css('backgroundSize', 'cover');
    } else {
      $bg.css('backgroundSize', 'auto 500px');
    }
});

Каким образом можно вынести объявление переменной imgAspectRatio наружу с тем условием, чтобы она оставалась в локальной области видимости и одновременно могла использоваться другими функциями? Интересует, в частности, ответ на вопрос, какие существуют распространённые практики (best practices) для решения подобных ситуаций, какие паттерны применяются? Заранее извиняюсь, если не правильно сформулировал вопрос, в js я новичок.

Answer 1

[AnjeyTsibylskij]

Есть такая практика

(function(w){
    var getImgAspectRatio = function(){
        var img = document.createElement('img');
        img.src = 'img/bg.jpg';
    
        return img.naturalWidth/img.naturalHeight;
    };

    $(w).on('load resize', function() {
        var imgAspectRatio = getImgAspectRatio();
        var $bg = $('.bg'), bgAspectRatio = $bg.outerWidth() / $bg.outerHeight();
        
        if (bgAspectRatio > imgAspectRatio) {
            $bg.css('backgroundSize', 'cover');
        } else {
            $bg.css('backgroundSize', 'auto 500px');
        }
    });
})(window);

Comments

[Сергей]

Я правильно понимаю, что каждый раз при изменении размеров окна браузера коэффициент соотношения сторон изображения всё равно будет пересчитываться? Есть ли способ этого избежать?

[AnjeyTsibylskij]

Сергей, да, конечно. можете просто один раз посчитать и использовать в любом месте этой конкретной области видимости. Пример

(function(w){
    var getImgAspectRatio = function(){
        var img = document.createElement('img');
        img.src = 'img/bg.jpg';
    
        return img.naturalWidth/img.naturalHeight;
    };

     var imgAspectRatio = getImgAspectRatio();

    $(w).on('load resize', function() {
        var $bg = $('.bg'), bgAspectRatio = $bg.outerWidth() / $bg.outerHeight();
        
        if (bgAspectRatio > imgAspectRatio) {
            $bg.css('backgroundSize', 'cover');
        } else {
            $bg.css('backgroundSize', 'auto 500px');
        }
    });
})(window);

[Сергей]

AnjeyTsibylskij, спасибо.

Answer 2

[Pavel Karinin]

К сожалению, переменная всегда должна иметь область видимости, либо глобальную, либо некую локальную. Поэтому не существует возможности вынести переменную за пределы какой-либо функции с расчетом на то, что она останется видимой только этой функции или конкретно ограниченному набору других функций. Это противоречит самой парадигме предназначения переменных. Есть лишь обходных пути (огороды), но по сути все равно переменная имеет область видимости.

Answer 3

[Lara B]

может объявить ее глобально, то есть не внутри какой-то конкретной функции, а до написания функции