有很多问题要求缓存jQuery对象,但是我找不到一个问一个jQuery对象可以和应该缓存的地方.我有一个网页,其中包含一个包含一系列功能的
JavaScript文件,如下所示.
$(document).ready(function () {
// do some setup
});
/* function queries the DOM with the same selector multiple times without caching */
function myFunctionOne() {
$('#name_input').css("border","1px solid #ccc");
$('#name_input').val(someValue);
}
/* function uses cached object from a single query */
function myFunctionTwo() {
var nameInput = $('#name_input')
nameInput.css("border","1px solid #ccc");
nameInput.val(someValue);
// do some other stuff with cached selector
}
在myFunctionOne中,我低效地查询DOM两次,而在myFunctionTwo中,我查询DOM一次,将结果缓存在局部变量中,然后使用该变量.我知道myFunctionTwo中的方法更有效但我不确定我应该在哪里实际缓存这些对象.在那一刻我在方法级别缓存对象,但我想知道我是否可以实际缓存它在更高级别,然后在多个函数中使用它.这样我只会查询一次DOM,然后在该文件的所有函数中重用结果.我建议的一个例子如下所示.
$(document).ready(function () {
// do some setup
var nameInput = $('#name_input')
});
/* function uses cached query result from .ready function above */
function myFunctionOne() {
nameInput .css("border","1px solid #ccc");
nameInput .val(someValue);
}
/* function uses cached query result from .ready function above */
function myFunctionTwo() {
nameInput.val(someValue);
// do some other stuff with cached selector
}
这种方法是否合理还是有更好的方法吗？也许使用.ready函数是一个不好的地方进行这种设置,因为它会减慢页面加载？是否有另一种方法可以在对象级别缓存jQuery对象,还是只应在功能级别缓存它们？
