處理僅適用於某些內容的 Javascript 事件

Question

在嘗試制作我的第一個大型 Javascript Web 應用程序時，我無法從概念上理解我應該做什么。

根據用戶選擇的選項卡，我在容器內顯示不同的內容。 內容不僅僅是文本，還使用了不同的 Javascript 函數和事件。 我正在使用雅虎！ UI 庫的“TabView”實現，但處理此問題的方式可能適用於其他 Tab 方法。

我想做的事情基本上如下：

為每個選項卡創建單獨的模塊（例如MYAPP.modules.tabCalendar和MYAPP.modules.tabJourna l）。 當用戶單擊不同的選項卡（或使用瀏覽器按鈕導航到前一個選項卡狀態）時，我可以調用MYAPP.modules[oldModule].disable()和MYAPP.modules[newModules].enable() 。 這些函數將訂閱或取消訂閱它們的自定義事件（例如，附加到容器的通用點擊處理程序）。

處理事件的另一種方法可能是使用單個全局單擊處理程序。 如果單擊在容器內，則確定當前選擇了哪個選項卡並將單擊事件發送到MYAPP.modules[currentTab].onClick() 。

或者，全局單擊處理程序可以觸發自頁面加載以來模塊已訂閱的自定義事件，並且每個模塊的onClick事件將運行並確定它們是否應該執行任何操作。

似乎有很多選擇，但我一直無法找到談論做此類事情的最佳方法的資源。 我在正確的道路上嗎？ 我該如何處理？

Answer 1

我對這個問題有點模糊。

1. 是的，您應該模塊化您的代碼。
2. 讓每個模塊在各自容器中的元素上設置事件處理程序。

就是這樣。 YUI TabView 處理選項卡切換，因此您無需啟用/禁用任何內容。

Answer 2

使用 TabView 中已經內置的事件來排隊你的 JS 來做事情。

http://developer.yahoo.com/yui/tabview/#handlingevents

對於選項卡更改，您將被告知已選擇的上一個/下一個選項卡，這應該足以讓您的 JS 弄清楚它應該做什么。 如果您想編寫一個翻譯層來查看事件並基於它做一些事情，那很好，但不是絕對必要的。