jquery - document.ready ロジックの jQuery 編成

Question

私が取り組んできたほとんどの jQuery 対応 Web アプリケーションは、2 つの方法のいずれかで document.ready ロジックを編成しています。

1. グローバルな document.ready はサイト全体の JS ファイルで使用され、すべての document.ready ロジックはその実行ブロックに含まれています。
2. document.ready ロジックは、それらを必要とする特定のページに明示的に追加されます。

通常、私はオプション 1 を使用します。これにより、javascript は、スタンドアロン ファイルとページ上の javascript のブロックに簡単に適用できる javascript の統合と縮小の利点を享受できます。

ただし、サイトが成長するにつれて、document.ready で実行する必要があるロジックの量も増え、評価されるセレクターの量がサイトの迅速さに影響を与える可能性があると思います。

このためのフレームワークを開発することを検討しました。これにより、URL またはルート要素属性のいずれかを使用して document.ready で実行するコードを決定し、評価されるセレクターの数を削減するグローバルな手法を適用できます。

編集：より明確にするために... 簡単な例では、2つの異なるページがあります。これらの各ページでは、ロジック (セレクターを含む) を document.ready で実行する必要がありますが、ロジックは、理想的には、サイト全体のすべてのページではなく、それらのページが読み込まれたときにのみ実行されます。

このようなものはすでに存在しますか、それともセレクターは一般的に私が気にする必要がないほど安価ですか?

Answer 1

私が行ったことは、2 つの (ただし、それ以上になる可能性があります) ファイルのセットを用意することです。サイトにグローバルなものを含む app.js ファイルと、そのページに固有のものを含む各ページの page.js ファイル。

myapp.pagepage.js ファイルは、そのページに固有であるだけでなく、グローバル コンテキストを持つものにも関連する機能を保持するオブジェクト オブジェクトで設定されます。このファイルには、そのページに固有のものも含まれており、グローバルなものには関係ありません。

典型的な page.js は次のようになります。

var myapp = mayapp || {};
myapp.page = {
    onReady: function($, undefined) {
        // page specific initialization that will need to use
        // things initialized in the global initialization
    },

    // for other events that I want some page-specific behavior 
    // in addition to the global behavior. For example, onresize:
    onResize: function(e, anything) {
        // page specific response to some event
        // that uses or relies on things done in the global
        // onresize listener
    }
}

// stuff that is page specific that is completely autonomous.
// This could also be included in the myapp.page.onReady, if preferred.
// I like the seperation because it illustrates what on the page 
// depends on global resources.
$().ready(function() {
    $('#some-form').submit(function(e) {
        // the form only exists on this page so no need to put it in
        // the page.onReady callback function
    });
});

app.js ファイルは $().ready(...) を使用して、ページの読み込み時に処理を行います。次に、ページ固有の JS を呼び出します。

$().ready(function() {

    var myapp = mayapp || {};

    // do global stuff first
    globalStuff();
    // then page specific
    if (myapp.page && typeof myapp.page.onReady === 'function') {
        myapp.page.onReady($);
    }

    // if there are some events that have both global page specific things
    // going on I would have something like this:
    window.addEventListener('resize', function(e) {
        // global behavior
        someResult = processedTheSameOnAllPges();

        // then page specific
        if (myapp.page && typeof myapp.page.onResize === 'function') {
            myapp.page.onResize(e, someResult);
        }
    });
})

主に単純化のためにこのように分けていますが、大規模なサイトではパフォーマンスに影響を与えることは間違いありません。これには個別のファイルであるという欠点があるため、2 つのダウンロードが必要になります。ただし、すべてのページは必要なものをダウンロードして実行するだけです。

パフォーマンスに関しては、セレクターが原因で初期化が遅い場合は、それらの一部またはすべてをネイティブにすることを検討してください。

特定のデータについては、特にセレクターに焦点を当てています (OP で何度か言及されています)。私が提供できる最高のものは、いくつかの興味深い jsPerf ケースです。

• http://jsperf.com/native-vs-jquery-class-selectors/2
• http://jsperf.com/native-vs-jquery-selectors
• http://jsperf.com/js-native-vs-jquery-selector

これらのテストの大きな制限は、私見ですが、使用する「準備コード」です。これらのテスト シナリオは現実的ではなく、私が気付いたことから、セレクターを実行している DOM はパフォーマンスに大きな影響を与えます。

Answer 2

私はあなたが私の最新のプロジェクトで説明したようなものを使用しています。各ページの HTML タグに一意の ID を指定し、それを使用してそのページに固有のコードを初期化します。

$(function() {
    //for index.html (view/edit)
    if($("html#view").length>0){
        ReadView();
    }
    //for create.html (add)
    if($("html#create").length>0){
        CreateView();
    }
    globalFunction();
});

var ReadView = function(){
    ...
};

var CreateView = function(){
    ...
};

var globalFunction = function(){
    ...
};

これは、あなたが言うように、JavaScript を「スナッピー」に保つのに役立つだけでなく、名前の間隔を調整し、変数の衝突を防ぐのにも役立ちます。また、他のプログラマーがコードを見て、より組織化された方法で物事を理解するのに役立つこともわかりました。

Answer 3

まず、私は主に単一ページのアプリケーションを扱っています。

これは私が通常操作する方法です：

// Main module
;(function($, win, undefined) {
    var module = {
        _currentPanel,
        initialize: function() {
            // all my global bindings here
        },

        // Only included to understand whats going on in the sub-module below
        displayPanel: function(panelName) {
            if (!!module._currentPanel) {
                $(module._currentPanel)
                    .hide(0)
                    .triggerHandler('hide.panel');
            }

            module._currentPanel = panelName;

            $(panelName)
                .show(0)
                .triggerHandler('show.panel');
        },          
    };

    $.extend("namespace", module);
})(jQuery, window);



// Sub modules
;(function($, win, undefined) {
    var module = {
        something: function() {
            // ..nothing to see here, this is just how i construct my modules
        }
    };


    // Event bindings specific to this module
    $('#geo-panel').bind('show.panel', function() {
        // wire up init() stuff   
    });
    $('#geo-panel').bind('hide.panel', function() {
        // wire up dispose() stuff
    }); 

    $.extend("namespace", module);
})(jQuery, window);

それで、何が起こっているのですか？

私のメインモジュールはすべてのグローバルなものを保持しています..それは論理的でした:)ページをロードするときにどこかで呼び出すinitialize()関数を使用します。これにより、すべてのページ (この場合はビュー) で役立つすべての汎用バインディング/セレクターが接続されます。

次に、サブモジュールは、アプリケーションでさまざまな疑似ページを表示するときにトリガーするイベントへのバインディングを保持します。それらはすべて、サイト全体でロジックを分離できるようにするためにかなり使用する .triggerHandler() に反応します。

displayPanel("#ジオパネル");

displayPanel("#someother-panel");

次に、メイン モジュールとサブモジュールの両方が大きな js ファイルに集約されます。ここでいくつかの冗長な $.extend() が行われています (私はそれを使用してその場で名前空間を作成します)、すべてを特殊なサブモジュール (設定、プロファイル、検索など) に分割し、自動的にビルド/アプリケーションのビルドで集計。

ただし、単一ページのアプリケーションを使用していない場合は、次のいずれかを行います。

1. すべての参照を#panel-geo, からより似たものに変更するだけです#pageX #panel-geo
2. または、すべてのページに共通の js を 1 つ、各ページに特定の js を 1 つ使用します。

Answer 4

各ページは、そのページでどの JS を実行する必要があるかを「認識」しています。したがって、これらの関数を .js ファイルで定義し、HTML マークアップでドキュメント対応の呼び出しを行って、それらの関数のみを呼び出します。

HTML に重要な JS コードを配置することは避けるべきですが、init 関数を 1 つまたは 2 つ呼び出すことはまったく問題ありません。