jQuery全局选择“缓存”

时间:2011-11-03 21:34:39

标签: javascript jquery scope

我不认为我是第一个遇到这个问题的人,但是我没有找到一种方法来搜索这个问题而不会得到与该问题无关的结果。

我采用了不那么扩展的好习惯,将重复的jQuery选择“缓存”到像var element = $('#element');这样的变量中,以防止每次重复使用元素时“DOM池搜索”

我遇到的问题是现在我在函数内部进行缓存。类似的东西:

function functionname (id) {
    var id = $('#'+id);
    //extra stuff
}

我不是变量范围的专家,但我无法做到

functionname ('some-div-id');
some-div-id.dialog('open');

所以我很确定这是因为函数内部创建的变量在函数本身之外是不可访问的。

然后我想出了

function functionname (id) {
        window.id = $('#'+id);
        //extra stuff
}

但如果我尝试window.some-div-id.dialog('open');,我会TypeError: 'undefined' is not a function

我错过了什么?我确定这是一个小小的蠢事,但我只是在眼前想念它。

由于


修改

谢谢大家,但你错过了什么。 代码建议缺少内部“全局”变量名称是动态的事实:

var CACHEobject = {};

function doSomething (NAMEHERE) { //note the function parameter 
   CACHEobject.NAMEHERE = $('#'+NAMEHERE);
}

所以我的想法是该函数创建一个与#element_id同名的javascript变量。如果我将一个名称传递给该函数,它应该选择具有该名称的html id并将其“缓存”到具有相同名称的全局变量:

doSomething('myDialogOne'); doSomething('myDialogTwo');

所以我以后可以做

CACHEobject.myDialogOne.dialog('open'); CACHEobject.myBox.dialog('close');

5 个答案:

答案 0 :(得分:1)

你的想法很好。只需为此设置一个对象。以下是使用STASH作为缓存对象的示例:

<html>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
var STASH = {};
$(document).ready(function(){

    // stash your elements
    STASH.item = $('#item');
    STASH.otherItem = $('#otherItem');


    // do stuff to them
    STASH.item.css({
        color: '#f00'
    }); // sets #item to red
    alert(STASH.otherItem.text()); // alerts foo
});
</script>
<style></style>
<body>
    <div id="item">bar</div>
    <div id="otherItem">foo</div>
</body>
</html>

答案 1 :(得分:1)

这就是你想要的(基于编辑):

var CACHEobject = {};
function doSomething(id) { 
   CACHEobject[id] = $('#' + id);
}

答案 2 :(得分:0)

window.some-div-id.dialog('open');

被解释为:

window.some - div - id.dialog('open');

即。减去,导致三个未定义的变量,其中一个是id.dialog,当尝试作为函数执行时会导致错误。

对于特殊字符,请使用:

window["some-div-id"].dialog('open');

并定义:

window[id] = $("#" + id);

无论如何,我不建议你使用全局变量。你最好覆盖jQuery函数来实现缓存(使用一个对象作为键,匹配的元素作为值)。

答案 3 :(得分:0)

你可以在函数外面声明变量。

var $foo;

function some_function(id) {
  $foo = $('#' + id);
}

答案 4 :(得分:0)

function setDialog(selector) {
    window.$dialogElem = $(selector);
    //window.dialogSelector = selector; 
}

var id= 'mensajes';
setDialog('#'+id);
window.$dialogElem.dialog();
//$(window.dialogSelector).dialog();

注释的东西是一种占用更少内存的替代品。但为什么地狱使用窗口?检查this fiddle是否有各种简单的技巧。