特定のコンテンツにのみ適用されるjavascriptイベントの処理

Question

最初の大規模なjavascript Webアプリケーションを作成しようとしているときに何をすべきかを概念的に理解するのが困難です。

ユーザーが選択したタブに応じて、コンテナ内に異なるコンテンツを表示します。コンテンツは単なるテキストではなく、さまざまなJavaScript関数とイベントを使用します。 Yahoo!を使用していますUIライブラリの＆quot; TabView＆quot;ただし、この問題の処理方法は他のタブアプローチにも適用される可能性があります。

私が考えていたことは、基本的に次のとおりでした：

タブごとに個別のモジュールを作成します（例：MYAPP.modules.tabCalendarおよびMYAPP.modules.tabJournal）。ユーザーが別のタブをクリックする（またはブラウザーボタンで前のタブ状態に移動する）とき、MYAPP.modules [oldModule] .disable（）およびMYAPP.modules [newModules] .enable（）を呼び出すことができます。これらの関数は、カスタムイベント（コンテナーに接続されている一般的なクリックハンドラーなど）のサブスクライブまたはサブスクライブ解除を行います。

イベントを処理する別の方法は、単一のグローバルクリックハンドラーを使用することです。クリックがコンテナ内にある場合、現在選択されているタブを特定し、クリックイベントをMYAPP.modules [currentTab] .onClick（）に送信します。

または、グローバルクリックハンドラーは、ページの読み込み以降にモジュールがサブスクライブしたカスタムイベントを発生させることができ、各モジュールのonClickイベントが実行され、何かを実行するかどうかが決定されます。

多くのオプションがあるように見えますが、このようなことをするための最良の方法を説明するリソースを見つけるのに苦労しています。私は正しい道にいますか？これをどのように処理すればよいですか

Answer 1

TabViewにすでに組み込まれているイベントを使用して、JSをキューに入れて処理します。

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

タブの変更については、選択された前/次のタブが通知されます。これは、JSが何をすべきかを判断するのに十分なはずです。イベントを見て、それに基づいて何かを行う翻訳レイヤーを作成したい場合、それは問題ありませんが、厳密に必要というわけではありません。

Answer 2

私はこの問題について少しあいまいです。

1. はい、コードをモジュール化する必要があります。
2. 各モジュールは、それぞれのコンテナの要素にイベントハンドラーを設定します。

それだけです。 YUI TabViewはタブ切り替えを処理するため、何も有効/無効にする必要はありません。