Question

我尝试使用我的代码更有条理。我有一个主要对象，我正在为该对象添加方法。

问题是：我不确定如何缓存我的选择器。有一个元素被添加得很晚并且总是最终为空。所以我正在寻找这样做的最佳实践。

我在哪里：

＆＃13;

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();

＆＃13;

wpadminbar元素是在加载此脚本后添加的元素，因此它始终为null。因此，虽然这似乎是一个相当具体的问题，但我希望看到如何最好地组织这个以防止这样的情况。

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

感谢您的帮助！

Answer 1

以下是三个选项：

将受影响的代码包装在DOMContentLoaded处理程序中，以便在代码运行之前确保DOM已完全加载。
在代码实际需要之前，不要尝试缓存DOM元素（例如，不要提前缓存）。
根本不要缓存它。只需在需要时随时获取DOM元素即可。这是最万无一失的，通常绰绰有余。如果在执行函数期间需要多个位置相同的DOM元素，则可以在函数内本地缓存它，但通常不需要在操作期间长期缓存它。

在缓存之前等待加载元素

1 个答案: