等待元素加載后再緩存

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元素，則可以在函數中本地緩存它，但是通常不需要長期跨操作緩存它。