0

dom $$('.box')[0] を取得する必要がある関数がいくつかあります。box をグローバル変数にしたくありません。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

これが役立つかどうかはわかりませんが、取得を関数に分離して、一度だけ実行できるようにすることができます。この関数をどこから取得したかは忘れましたが、関数を 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 が検索されます。それ以降は毎回、箱を返すだけです。

これは「役立つ」かもしれませんが、グローバル変数を作成するのと同じくらい良いので、解決策として何を期待しているのか正確にはわかりません.

于 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

その場合、本当にクロージャーを使用する必要があります。

(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 に答える
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 に答える
0

パフォーマンスが心配な場合は、ボックスに id を付けて、

var  element = null;

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