1

1 つのメインindex.htmlページ ( あり<html><head>...) と 、 のようなgallery.htmlページがあるサイトがありますが、コンテナーcontacts.htmlのみがあり、はありません。<div><html><head>...

だから、何が起こるかへのindex.htmlリンクをクリックするとcontacts.html：

$('.contacts').click(function(e) {
    e.preventDefault();
    $('#content').load('contacts.html', function() {
        .....
    });
});

Q:click onのようなイベントの JavaScript コードをどのように構造化または整理すればよいcontacts.htmlですか?

例えば：

[1] 次contacts.htmlのような JavaScript コードを記述できます。

<script type='text/javascript'>
$(function() {
    $('.anyClassOnContactsHtml').click(function(e) {
        .....
    });
});
</script>

しかし、私が推測するように、ロードするたびにcontacts.html関数を再度読み取るため、すべてのページで50回以上のクリックイベントがあるため、サイトの速度とパフォーマンスが低下する可能性があります.

[2]index.htmlデリゲートについて次のように記述できます。

<script type='text/javascript'>
$(function() {
    $('#content').on('click', '.anyClassOnContactsHtml', function(e) {
        .....
    });
});
</script>

それは機能し、ブラウザはクリック関数を 1 回読み取りますが、100 回以上のクリック関数では 2 ～ 3 秒 (!) の遅延があるため、動作が非常に遅くなります。

より速く動作させるには、代わりに に#content近いコンテナを作成する必要がありますが.anyClassOnContactsHtml、できません。index.html#container

それで、どうすればいいですか？または、イベントをバインドする他の方法はありますか? サイトのパフォーマンスに関するヒントはありますか? ありがとうございました。

4

4 に答える 4

0

これを最適化する運のパフォーマンスを得る唯一の方法は、クリック関数の一部をリファクタリングしてそれらを組み合わせ、メソッドパラメーターやスイッチステートメントなどを追加してより多目的にすることだと思います...最も効率的URL が変更されるたびに再読み込みする必要がないため、すべてを #content にバインドする方法があります。データ属性は、これに非常に役立ちます。時間をかけて適切に実行すれば、すべてのコードを 1 つのイベント ハンドラー関数にリファクタリングすることさえできます。

このような関数の非常に不自然な例は次のとおりです。

$('#content').on('click', 'a, span, input', function(e) {
    var tagName = $(e.target).prop('tagName');
    switch (tagName) {
        case 'a':
            processAnchorEvents();
            break;
        case 'span':
            processSpanEvents();
            break;
        case 'input':
            processInputEvents();
            break;                 
    }
});
于 2013-07-20T23:05:25.300 に答える