Question

有几个函数必须得到dom $$（'。box'）[0]，我不想让盒子成为一个glabal var，我不想让js寻求每次都是dom。当用户没有运行这些功能时，我不想运行$$（'。box'）[0]。如何存储盒子var？ enter image description here

<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>

Answer 1

我不知道这是否会有所帮助，但你可以把它分成一个函数，只允许它执行一次。我忘记了从哪里得到这个函数，但是它只对一个函数运行一次是有用的（并且每隔一次它被调用，只返回值）：

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。每次之后，它都会退回盒子。

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

Answer 2

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

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

Answer 3

将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];        
    }

Answer 4

你应该真的使用一个闭包。

(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

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

Answer 5

如果您担心性能问题，只需将您的信箱设为ID并使用

进行呼叫即可

var  element = null;

function myFun(){
if(!element)
    element = $('#myId');
//Do logic
}

如何在js中存储多个函数的dom var？

5 个答案: