2

これは、数回尋ねられたと思われる質問の特定のバリエーションです。答えが既に出ている場合は申し訳ありません。

メニューバーと大きなコンテンツ div を備えた標準的な Web サイトがあります。ページがレンダリングされるたびに実行したい多くの JavaScript 関数があります。つまり、最初の読み込みの後、および中央のコンテンツ div を更新する ajax 呼び出しで実行します。

ajax呼び出しの「成功」部分でそれらを呼び出す必要があることは理解していますが、回避しようとしているのは、呼び出しの膨大なリストをすべて1か所にまとめることです。約 30 個の JavaScript ファイルがあり、それらを分離し、互いに依存しないようにしたいと考えています。

私が設定しようとしているのは、中央の「関数レジストリ」です-これは私がこれまでに持っているものです-

var rebind = function(){

    var functions = [];

    var add = function(f){
        functions.push(f);
    }

    var call = function(){
        for (i = 0; i < functions.length; i++) {
            functions[i]();
        }
    }

    return {
        add: add,
        call: call
    }
}();

これが私がこの関数を呼び出す方法です-

$(function() {
    rebind.call();
});

$(document).on("click", "a.ajax-content", function() {
    var url = $(this).attr("href");
    $("div#content").load(url, function() {
        rebind.call();
    });

    history.pushState(null, null, url);
    event.preventDefault();
});

Datepicker を例として使用して、関数を登録する方法の例を次に示します。

rebind.add(function() {
    $(".dm-type").datepicker({
        dateFormat: "dd/mm",
        changeYear: false,
        changeMonth: true
    });
});

明確にするために、可能な場合は $(document).on('click'... を使用します。このメソッドは、ページがロードされた後に呼び出す必要がある関数のためのものです。ドキュメントも処理するグローバルバージョンの document.ready AJAX 呼び出し。

良いアイデアのように思えましたが、100% は機能していません。たとえば、jquery-raty を使用して、いくつかの無限ループを取得しています。

誰かがこれに対する良い解決策を思いつきましたか? 私は livequery を調べましたが、必要なものすべてを処理するわけではなく、速度が低下する可能性があるため、お勧めできないことを読みました。これに対する簡単な解決策があれば、それは私を大いに助けてくれるでしょう。

ありがとう！ジェームズ

4

1 に答える 1

0

あなたはすでにjQueryを使用しているので、別の手法を使用します-委任!

カスタム イベントをボディにアタッチし、それをリスナーとして使用します。つまり、複数の関数呼び出しを作成し、そこからトリガーされる呼び出しを管理することもできます。

 //in a global file    
 $(document.body).on('myCustomEvent',function(event, data){
    //console.log(event,data);
    //manage your function calls here.
    //You can pass data through and have your logic here too.
    if(data.somedata || data.someotherdata) datepicker();
});


//in a singular file
$(document).on("click", "a.ajax-content", function() {
    var url = $(this).attr("href");
    $("div#content").load(url, function() {
        $(document.body).trigger('myCustomEvent', [{somedata:true}]);
    });
    history.pushState(null, null, url);
    event.preventDefault();
});

また、すべての個別のスクリプト ファイルでリスナーを本文にアタッチし、任意のスクリプトによる各トリガー起動により、他のすべてのスクリプトなどでトリガーすることもできます。

于 2013-09-20T08:43:18.200 に答える