等待元素加载后再缓存

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(){ stickyAd.scrollDetect(); }; // Finally, call init() stickyAd.init(); 

wpadminbar元素是在加载此脚本后添加的元素，因此它总是空值。 因此，尽管这似乎是一个相当具体的问题，但我希望了解如何最好地组织该问题，以防止出现此类情况。

如何以适当的时候可用的方式将选择器缓存在该对象中？ 是否将它们包装在DOMContentLoaded函数或其他内容中？

谢谢你的帮助！

Answer 1

这是三个选项：

1. 将受影响的代码包装在DOMContentLoaded处理程序中，以便确保在代码运行之前已完全加载DOM。

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

3. 根本不缓存它。 只需在需要时随时获取DOM元素。 这是最简单的方法，通常绰绰有余。 如果在执行函数时需要多个位置相同的DOM元素，则可以在函数中本地缓存它，但是通常不需要长期跨操作缓存它。