6

jQueryオブジェクトのキャッシュについて尋ねる質問はかなりありますが、正確にjQueryオブジェクトをキャッシュできる場所とキャッシュする必要がある場所を尋ねる質問は見つかりません。以下に示すように、一連の関数を含む単一のJavaScriptファイルを含むWebページがあります。

$(document).ready(function () {

    // do some setup
});

/* function queries the DOM with the same selector multiple times without caching */
function myFunctionOne() {

    $('#name_input').css("border","1px solid #ccc");
    $('#name_input').val(someValue);        
}

/* function uses cached object from a single query */
function myFunctionTwo() {

    var nameInput = $('#name_input')
    nameInput.css("border","1px solid #ccc");
    nameInput.val(someValue);
    // do some other stuff with cached selector        
}

私はmyFunctionOne非効率的にDOMを2回クエリしmyFunctionTwoますが、DOMを1回クエリし、結果をローカル変数にキャッシュしてから、その変数を操作します。のアプローチの方が効率的であることは理解していmyFunctionTwoますが、これらのオブジェクトを実際にどこにキャッシュする必要があるのか​​わかりません。現時点では、オブジェクトをメソッドレベルでキャッシュしていますが、実際にそれをより高いレベルでキャッシュして、複数の関数で使用できるかどうか疑問に思っています。このように、DOMを1回だけクエリしてから、このファイルのすべての関数で結果を再利用します。私が提案していることの例を以下に示します。

$(document).ready(function () {

    // do some setup
    var nameInput = $('#name_input')
});

/* function uses cached query result from .ready function above */
function myFunctionOne() {

    nameInput .css("border","1px solid #ccc");
    nameInput .val(someValue);        
}

/* function uses cached query result from .ready function above */
function myFunctionTwo() {

    nameInput.val(someValue);
    // do some other stuff with cached selector        
}

このアプローチは賢明ですか、それともそれを行うためのより良い方法がありますか？おそらく、.ready関数を使用すると、ページの読み込みが遅くなるため、この種の設定を行うのに適していませんか？jQueryオブジェクトをオブジェクトレベルでキャッシュする別の方法はありますか、それとも関数レベルでのみキャッシュする必要がありますか？

4

3 に答える 3

8

この種の質問ではいつものように、時期尚早に最適化しないでください。この場合、パフォーマンスの問題に気付くまでキャッシュを使用しないことを意味します。ターゲット顧客が低スペックのコンピューターまたはモバイルデバイスを使用している場合、これは、低スペックのハードウェアで自分でテストして、そのような問題を特定できるようにすることを意味します。キャッシュを追加して速度を向上させる前に、明確にすることを強くお勧めします。

さらにいくつかのポイント：

  • IDを使用するセレクターを使用している場合はgetElementById、バックグラウンドで使用されるので高速である必要があるため、キャッシュは必要ありません。
  • キャッシュの代わりにメソッドチェーンを使用します。これにより、セレクターは1回だけ使用されます。
  • キャッシュを実装する場合は、最初にローカルで実装します。メソッド間のキャッシングは、ローカルキャッシングよりもコードの複雑さのコストが高くなります。
  • 使用.readyは問題ありません。DOMがロードされた後に実行され、セットアップタスクを実行するのに最適な場所です。
于 2013-02-19T21:52:33.153 に答える
1

$.cache1つのアプローチは、セレクターを：に格納することです。

$(function(){

      var $nameInput = $('#name_input');

      $('body').data({ nameInput: $nameInput });

});

そして、以下を使用してアクセスします。

function myFunctionOne() {

    var $nameInput = $('body').data('nameInput');
}
于 2013-02-19T21:52:23.560 に答える
-1

このコードはうまく難読化されます。_initControlsに必要な数のコントロールを追加し、後でこのスクリプトブロック全体で使用できます。すべてのスクリプトブロックに対してグローバルにする場合は、_initControls関数をjQueryonreadystate関数から移動します。

 $(function () {
    "use strict";

    var _controls = {},
    _init = function () {
        _initControls();
        _updateData("Hello");
    },
    _initControls = function () {            
        _controls.nameInput = $("#name_input");
    },
    _updateData = function (value) {
        var nameInput = _controls.nameInput;
        nameInput.css("border", "1px solid #ccc");
        nameInput.val(value);
    };

    _init();
});
于 2013-12-10T00:55:15.397 に答える