Как реализовать ленивую загрузку для селектора jQuery внутри модуля JavaScript?

Question

Я написал следующий блок кода, и она работает в моем сценарии, но я знаю, что это грязный:

var navbarModule = (function($) { 
    var self = {}; 
    var $login; 

    self.hideLogin = function() { 
     $login.hide(); 
    }; 

    self.showLogin = function() { 
     $login.show(); 
    }; 

    $(document).ready(function() { 
     $login = $(".navbar-form"); 
    }); 

    return self; 
}(jQuery)); 

Мои цели для кода являются:

1. Только выберите элемент DOM, если это необходимо
2. Cache выбранный DOM элемент
3. гарантия, что кэшируются DOM элемент существует

Мой код не достигает # 1, достигает # 2 и косвенно достигает # 3. I.e., для требования № 3 navbarModule.hideLogin() работает, если DOM полностью загружен, но нет, если вы вызываете его до того, как navbar присутствует в DOM.

Есть ли способ достичь истинной ленивой загрузки и кеширования, которая соответствует моим целям без участия в работе?

Answer 1

ОК, теперь, когда вы объяснили, что вы имеете в виду ленивым кэширования, вы можете сделать это:

var navbarModule = (function($) { 
    var self = {}; 
    var $login; 

    function getLogin() { 
     if (!$login || $login.length == 0) { 
      $login = $(".navbar-form"); 
      return $login; 
     } 
    } 

    self.hideLogin = function() { 
     getLogin().hide(); 
    }; 

    self.showLogin = function() { 
     getLogin().show(); 
    }; 

    return self; 
}(jQuery)); 

Примечание:

Если вы звоните .showLogin() или .hideLogin(), прежде чем есть .navbar-form", то ничего не случится. Он создаст пустой объект jQuery, а методы .hide() и .show() просто ничего не сделают. Если вы снова вызовете это позже, он увидит, что объект jQuery пуст, и снова найдите ".navbar-form".

Непонятно, почему вы считаете, что кеширование объекта входа в систему требуется даже здесь. Дайте ему значение id и просто найдите его по запросу с document.getElementById(), и он будет очень быстрым.