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

我在JavaScript中使用模塊模式。我有一個文件說controller.js處理事件。問題是我想使用子模塊。但由於事件在controller.js中處理，我將如何處理子模塊中的事件（如果有）？
我從另一個文件派發一個名爲PAGE_DISPLAYED的自定義事件，聲明爲view.js.這個事件由controller.js監聽，根據顯示的頁面，它執行其他事情，比如綁定特定於特定頁面的附加事件處理程序。如何使用子模塊執行此操作。如何使用模塊模式在JavaScript中擴展事件委託？

示例代碼：

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

感謝。

來源

2012-07-31 boring

你怎麼做派遣的事件？ – NicoSantangelo 2012-07-31 13:09:47

Nicosunshine：更新了問題以包含派送事件代碼。 – boring 2012-08-01 03:37:11

好吧，我想你可以繞過它，如果你可以傳遞一個函數的觸發器，這將知道如何處理事件（最好以polimorfic的方式）。如果你想我可以發佈一些代碼:)（對不起，延遲） – NicoSantangelo 2012-08-02 03:16:07

好吧，我因子評分的幾個可能性，但在可讀性方面的一個我最喜歡的是：

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你有另一種選擇，沒有默認值。告訴我，如果一個適合您的需求:)

來源

2012-08-02 19:01:32 NicoSantangelo

在'controller'中，如果未定義，我們可以使用data.customFunction（）。在上述條件執行之前，函數定義將出現在稍後加載的子模塊中。或者我可以在子模塊中綁定'PAGE_DISPLAYED'事件並檢查函數是否存在並做必要的事情。謝謝！ – boring 2012-08-03 03:41:41

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

回答

相關問題