Подождите, пока элемент будет загружен до его кеширования

Question

Я пытаюсь быть более организованным с моим кодом. У меня есть основной объект, и я добавляю методы к этому объекту.

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

Вот где я:

var stickyAd = {}; 
 

 
// cache the elements I'll need 
 
stickyAd.primaryContent = document.getElementById('primary-content'); 
 
stickyAd.wpadminbar = document.getElementById('wpadminbar'); 
 

 

 
// Calculate the offset of an element from the top of the document 
 
stickyAd.topOffset = function(el) { 
 
    var rect = el.getBoundingClientRect(), 
 
    scrollTop = window.pageYOffset || document.documentElement.scrollTop; 
 
    return { top: rect.top + scrollTop }; 
 
}; 
 

 

 
// The rest of my methods 
 
stickyAd.scrollDetect = function(){}; 
 

 
stickyAd.stickyOn = function(){}; 
 
stickyAd.stickyOff = function(){} 
 

 
stickyAd.init = function(){ 
 
\t stickyAd.scrollDetect(); 
 

 
}; 
 

 
// Finally, call init() 
 
stickyAd.init();

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

Как кэшировать селектор внутри этого объекта так, чтобы они были доступны в нужное время? Могу ли я обернуть их в функцию DOMContentLoaded или что-то еще?

благодарит за любую помощь!

Answer 1

Вот три варианта:

1. Wrap пораженный код в DOMContentLoaded обработчика, так что вы уверены, что DOM полностью загружен перед запуском кода.

2. Не пытайтесь кэшировать элемент DOM до тех пор, пока код не понадобится ему (например, не кешируйте заранее).

3. Не кешируйте его вообще. Просто выберите элемент DOM в любое время. Это самый надежный и обычно более чем достаточный. Вы можете кэшировать его локально внутри функции, если одному и тому же элементу DOM требуется несколько мест во время выполнения функции, но обычно нет необходимости кэшировать его в течение длительного времени между операциями.