0

サイトの JavaScript 名前空間のリファクタリングに取り組んでいます。名前空間は、セレクターとイベントに jQuery を利用します。ここに例があります。

MyNamespace = {
    eventElements : {
        headerSectionA : $("h1.section-a");
        headerSectionB : $("h1.section-b");
    }
    sectionA : function() {
        // do stuff for section A here, such as
        MyNamespace.eventElements.headerSectionA.click(function(){
            // behavior A
        });
    }
    sectionB : function() { 
        // do stuff for section B here, such as
        MyNamespace.eventElements.headerSectionB.click(function(){
            // behavior B
        });
    }
}

これは、抽出されたコード サンプルです。多くの eventElements と、それらの eventElements のサブセットを利用する多くのサイト セクションを想像してみてください。

私の質問は、このスクリプトが読み込まれるたびに jQuery がすべての eventElement の DOM をトラバースするのか、それともその eventElement を使用する関数が呼び出されたときだけトラバースするのかということです。

パフォーマンスの低下を避けたいのですが、jQuery が DOM をトラバースするのは、eventElement プロパティが宣言されているときなのか、それともイベントが eventElement にアタッチされているときだけなのかわかりません。

上記のアプローチを使用してパフォーマンスが低下する場合は、名前空間内で分岐して、これらの eventElements を使用するセクションのコンテキスト内でのみ eventElements を宣言します。

4

1 に答える 1

3

JavaScript は、式に遭遇すると実行されます。はい、これがスクリプトファイルにある場合：

MyNamespace = {
    eventElements : {
        headerSectionA : $("h1.section-a"),
        headerSectionB : $("h1.section-b")
    }
    // ...
}

次にが呼び出され、スクリプトの実行時に$DOMがトラバースされます。これはいくつかのレベルで悪いです:

  • スクリプトの配置は、トラバースの準備ができている DOM に依存しています (fyi 全体の理由$(document).readyは、この問題を回避することです)。
  • これらの要素を参照する必要がある前に DOM がトラバースされる

必要なだけの作業を行うように調整します。

MyNamespace = {
    eventElements : {
        headerSectionA : "h1.section-a", // THESE BECOME STRINGS
        headerSectionB : "h1.section-b"
    }
    ,// ...
    sectionA : function() {
        // Call $ as late as possible
        $(MyNamespace.eventElements.headerSectionA).click(function(){
            // ...
        });
    }
}

何らかの理由で が呼び出される前にjQuery オブジェクトでMyNamespace.eventElements.headerSectionA なければならない場合は、スクリプト自体の脆さを軽減するために、少なくとも DOM の準備ができるまでそれらを初期化するのを待つ必要があります。 sectionA

// namespace defined as before
// wait until DOM is ready
$(document).ready(function() {
    for(var selector in MyNamespace.eventElements) {
        MyNamespace.eventElements[selector] = $(MyNamespace.eventElements[selector])
    }
})
于 2009-10-05T16:00:47.680 に答える