一般来说,存储常用的节点引用是一个非常好的主意。这可以在某种“初始化脚本文件”中完成,如果您有由文件分隔的模块,则可以在每个“模块”中完成。
例如
var myNamespace = window.myNamespace || { };
$(document).ready(function() {
myNamespace.nodes = {
header: $('#header'),
content: $('#overlay > .content'),
footer: $('#footer')
};
});
在您的代码中的其他地方,您应该只通过这种哈希查找访问元素。以后如果选择器发生变化,您只需要在一个地方替换/修改选择器字符串,其余的都可以继续工作。
// somefile.js
var myNamespace = window.myNamespace || { },
myNodes = myNamespace.nodes;
$(document).ready(function() {
if( myNodes ) {
myNodes.content.animate({ top: '+=200px' }, 1000);
}
else {
throw new Error('Arrrrrrr the <center> cannot hold! it is too late');
}
});
该概念还为您的整个 web 应用程序提供了更好的性能。通过只查询一次节点,因为这仍然是一个相当昂贵的 DOM 操作。