在缓存之前等待一个元素被加载

Question

我试图用我的代码更有组织。我有一个主要的对象，我正在向该对象添加方法。

问题是：我不知道如何缓存我的选择器。有一个元素会被延迟添加，并且总是以null结尾。所以我正在寻找这样做的最佳做法。

这里是我所在的地方：

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. 敷患处代码在DOMContentLoaded处理程序，以便您确定代码运行之前DOM满载。

2. 不要在代码实际需要之前尝试缓存DOM元素（例如，不要提前缓存）。

3. 不要缓存它。只需在需要的时候获取DOM元素。这是最安全的，通常绰绰有余。如果在函数执行过程中需要多个地方使用相同的DOM元素，则可以在函数内本地缓存它，但通常不需要跨操作长期缓存它。