1

いくつかのタブがあるページがあります。この例では 2 つ使用します。（製品とサービス）

これらのタブのコンテンツを実行時にロードする代わりに、タブがクリックされたときに特定のタブ コンテンツをロードするようにしています。多くのコンテンツを含む多くのタブがあり、妥当な初期ページ/読み込み速度を実現する唯一の方法です。

これらの各タブには、コンテンツが読み込まれた後に読み込まれる独自の JavaScript ファイルがありました。javascript ファイルは巨大で、すべてのタブに同じスクリプト ファイルを使用できるように、データにユニバーサル トークンを含むユニバーサル スクリプト ファイルを作成する必要がありました。など。それらすべてに .viewelementcomments があります。

これは成功しましたが、別の問題が発生しました。

すべての新しい要素がajax経由でページに送信された後に再ロードできるように、別のタブがクリックされたときにこのスクリプトファイルによって作成された「すべてのアクションをアンロード」する簡単な方法はありますか? 私はすべての小さなことを .on することができましたが、静的要素をキャプチャするための .on の階層レベルは、はしごのかなり上になります。

基本的に、コンテンツがロードされた後に認識される必要があるスクリプトがたくさんあります。すべてのタブで同じスクリプト ファイルをリロードしたくありません。これにより、イベントの重複やその他の不明なことが発生するためです。

アドバイス、提案は大歓迎です。

ありがとうございました！

*例を提供するための編集:

$('.post_comments_level1').each(function() {
    var cType = parseInt($(this).parent().prev('div').find('.c-t').text());
    var uniqueID = parseInt($(this).parent().prev('div').find('.un-id').text());
    var listingID = parseInt($(this).parent().prev('div').find('.l-id').text());
    var commentsHome = $(this);

    $.ajax({
        url: '/MyFeeds/Feed.aspx',
        type: 'POST',
        dataType: 'html',
        data: {
            "xfd" : 'Get_Comments',
            "ctype" : cType,
            "unid" : uniqueID,
            "pid" : portalID,
            "lid" : listingID,
            "uid" : userID
        },
        success: function(data) {
            commentsHome.html(data);
            ResetHeight();
        }
    });
});

たとえば、すべての「製品」には、UL でラップされた独自のコメント セットがあり、コメント要素は LI 要素です。サンプル スクリプトは、クラス .post_comments_level1 を持つすべての ul を検索し、ajax を介してデータベースからコメントを取得し、それらのコメントを最初は空の ul 要素内に挿入します。

したがって、次のタブをクリックすると、それがサービスであると言えます...これらすべてをうまく機能させることができますが、確実な方法を探していました。たとえば、サービスタブに新しく追加されたULでのみそのアクションを実行したいだけです...状況を最適化するための最善の方法を頭に入れようとしています.

4

1 に答える 1

0

同じことを行うには、作成するコードの量を最小限に抑えるために、適切なメソッドを使用して JavaScript クラスを作成する必要があるように思えます。

例：

ユーザーが [商品] タブをクリックします。

$('#productsTab').on('click', function(evt){

    //Use classes you've created.
    var blah = new Foo(); 
    });

次に、ユーザーが [サービス] タブをクリックします。

$('#servicesTab').on('click', function(evt){

    //Same function, same methods, is not affected by old one
    var blah2 = new Foo(); 
    });

これは JavaScript でクラスを作成する非常に初歩的な例ですが、正しい軌道に乗るはずです: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Introduction_to_Object-Oriented_JavaScript

編集：

私があなたの質問を解釈した方法は、コードを最もよく再利用する方法を尋ねているということでした。同様の方法で JavaScript/jQuery によって処理されたコンテンツを含むいくつかのタブがあると説明しました。

このタスクを実行するには、クラス (JavaScript では単に再利用可能な関数を意味します) を作成することをお勧めします。

これを理解するのに問題がある場合は、この例が助けになるかもしれません。コードを見て、アラートを読んでください。

http://jsfiddle.net/anb4k/

「foo」という関数を作成しました。

次に、「blah」という変数を「new foo();」に割り当てました。

「何とか」は「foo」の機能をすべて継承していますが、「new」演算子を使用することで、関数のまったく異なるインスタンスを作成しました。これは、タブの問題の解決に役立つ場合があります。モデルが問題にならないようにコードを作成し、条件が正しい場合 (onClick、または表示されている場合など) に関数を使用してコンテンツを作成します。

于 2013-08-19T17:46:56.280 に答える