如何使用模塊模式在JavaScript中擴展事件委託？

Question

我在JavaScript中使用模塊模式。我有一個文件說controller.js處理事件。問題是我想使用子模塊。但由於事件在controller.js中處理，我將如何處理子模塊中的事件（如果有）？
我從另一個文件派發一個名爲PAGE_DISPLAYED的自定義事件，聲明爲view.js.這個事件由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.. 
    }; 
})(); 

如何延長上面的代碼和事件委託？或者代碼架構構成任何限制。

我使用jQuery Mobile和分派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}); 
    }); 
})(); 

感謝。

Answer 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 
     }); 

    }); 
})(); 

Here你有另一種選擇，沒有默認值。告訴我，如果一個適合您的需求:)