0

有几个函数必须得到 dom $$('.box')[0] ，我不想让 box 成为一个 glabal var，我不想让 js 每次都寻找 dom . 当用户不运行这些功能时，我不想运行 $$('.box')[0] 。如何存储盒子变量？ 在此处输入图像描述

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/mootools/1.4.5/mootools-yui-compressed.js"></script>
<script type="text/javascript">
    /* ------- 
        there are several function will have to get the dom $$('.box')[0] ,
        I don't want to let box to be a glabal var, and I don't want to let js seek the 
        dom every time . and I don't want to run $$('.box')[0] when user not run these functions.
        how to store the box var?
    ------- */
    function a(){
        var box = $$('.box')[0];
        //...
    }
    function b(){
        var box = $$('.box')[0];
        //...
    }
    //...
</script>
<div class="box"></div>
4

5 回答 5

2

我不知道这是否有帮助，但是您可以将获取它的方法分离到一个函数中，并且只允许它执行一次。我忘记了从哪里得到这个函数，但是它对于只允许一个函数运行一次很有用（并且每隔一次调用它，只返回值）：

function once(func) {
    // Function wrapper to only allow a function, *func*, to be called once.

    var ran = false, ret = undefined;
    return function () {
        if (ran) {
            return ret;
        }
        ran = true;
        ret = func.apply(this, arguments);
        return ret;
    };
}

所以我会像这样使用它：

var getBox = once(function () {
    return $$('.box')[0];
});

并且总是getBox()在你想要获取元素时使用。只有第一次调用它时才会搜索 DOM。每次之后，它都会返回盒子。

虽然这可能“有帮助”，但它与创建全局变量一样好，所以我不确定您期望的解决方案是什么。

于 2012-11-27T07:49:44.070 回答
2

尝试创建一个伪命名空间，并在其中创建一个应用程序缓存

var mySpace = (function(){
    var appcache = {};
    function a(){
        var box = appcache.box0 
                   || (appcache.box0 = $$('.box')[0], appcache.box0);
        //...
    }
    function b(){
        var box = appcache.box0 
                   || (appcache.box0 = $$('.box')[0], appcache.box0);
        //...
    }
    return {a: a, b: b};
}());
// usage: you can call a or b like
mySpace.a();
mySpace.b();
于 2012-11-27T07:51:15.403 回答
1

box将您的变量声明在函数范围之外

var box = "";

function a(){
      if(box != "" || box != undefined || box != 'undefined')
        alert(box +" from a");
      else
        box = $$('.box')[0];       
    }

function b(){
      if(box != "" || box != undefined || box != 'undefined')
        alert(box + " from b");
      else
        box = $$('.box')[0];        
    }
于 2012-11-27T07:50:46.280 回答
1

那么你真的应该使用闭包。

(function(scope){

    var box = box document.getElement('.box'); // same as $$()[0], returns first match

    scope.a = function(){
        return box;
    };

    scope.b = function(){
        box;
    };

}(this)); // whatever object, eg, window or a namespace

box; // reference error.
this.a(); // box element object

盒子将保持私有并且是静态的，即它不会再被刷新。

您可以这样做，以便在需要时对其进行引用和缓存一次：

(function(scope){
    var box;

    scope.a = function(){
        box = box || document.getElement('.box');
        return box;
    };

    scope.b = function(){
        // alt syntax;
        box || (box = document.getElement('.box'));
        return box;
    };

}(this)); // whatever object, eg, window or a namespace

这样，调用任一方法都会缓存框并使其可用于闭包中的任何方法。

于 2012-11-27T16:37:02.060 回答
0

如果您担心性能，只需给您的盒子一个 id 并使用它调用它

var  element = null;

function myFun(){
if(!element)
    element = $('#myId');
//Do logic
}
于 2012-11-27T07:52:06.070 回答