Question

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?

<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

you should really use a closure then.

(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

box will remain private and also static, i.e. it wont get refreshed anymore.

you can do it so it’s referenced and cached once when needed:

(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

this way, calling either method will cache box and make it available for any of the methods in the closure.