1

JavaScriptでモジュールパターンを使用しています。イベントを処理するcontroller.jsというファイルがあります。問題は、サブモジュールを使用したいということです。しかし、イベントはcontroller.jsで処理されるため、サブモジュールでイベントが発生した場合、どのように処理しますか？view.jsなどの別のファイルから
呼び出されたカスタムイベントをディスパッチします。PAGE_DISPLAYEDこのイベントはcontroller.jsによってリッスンされ、表示されたページに応じて、その特定のページに固有の追加のイベントハンドラーをバインドするなど、他のことを行います。サブモジュールを使用してこれを行う方法。

サンプルコード：

window.KDJ || (window.KDJ = {});    //namespace
KDJ.controller = (function () {
    $(document).off('PAGE_DISPLAYED');
    $(document).on('PAGE_DISPLAYED', function (e, data) {
    switch(data.pageId) {
    case "page1":
        // do something..
        break;
    case "page2":
        // do something..
        break;
    }
    });

    return {
        // exported methods and props..
    };
})();

上記のコードとイベント委任を拡張するにはどうすればよいですか？または、コードアーキテクチャが制限を課していますか。

私はjQueryMobileを使用しており、イベントのディスパッチはPAGE_DISPLAYEDイベントをリッスンすることによって行われpagechangeます。

window.KDJ || (window.KDJ = {});    //namespace
KDJ.view = (function () {  
    // ...
    $(document).off('pagechange');
    $(document).on('pagechange', function (e, ui) {
        //...
        $(document).trigger(PAGE_DISPLAYED, {'pageId': loadedPageId, 'key': key});
    });
})();

ありがとう。

4

1 に答える 1

1

わかりました、いくつかの可能性を考えましたが、読みやすさの観点から、私が最も気に入っているのは次のとおりです。

window.KDJ || (window.KDJ = {});    //namespace
KDJ.controller = (function () {
    $(document).off('PAGE_DISPLAYED');
    $(document).on('PAGE_DISPLAYED', function (e, data) {

        //Use the Id if it exsits, if not, try to execute the function
        switch(data.pageId) {
            case "page1":
                // do something..
                break;
            case "page2":
                // do something..
                break;
            default: 
                if(data.customFunction)
                    data.customFunction();
                break;
        }

    });

    return {
        // exported methods and props..
    };
})();


KDJ.view = (function () {  
    // ...
    $(document).off('pagechange');


    $(document).on('pagechange', function (e, ui) {

        //the function will be executed
        $(document).trigger(PAGE_DISPLAYED, {
            customFunction = function(ui) {
                console.log("I'm doing something awesome with the ui!");
            }
        });

    });

    $(document).on('pagechange', function (e, ui) {

        //here I'll use the switch
        $(document).trigger(PAGE_DISPLAYED,  {
            'pageId': loadedPageId, 
            'key': key
        });

    });
})();

ここには、デフォルト以外の別のオプションがあります。ニーズに合うかどうか教えてください:)

于 2012-08-02T19:01:32.850 に答える