分離されたDOM

シングルページWebアプリケーションは、アプリケーションロジック、DOM操作、およびサーバーアクセスがすべて混ざり合ったjQueryスープになりがちです。このような関心の混在は、アプリケーションを理解およびテストすることを困難にします。分離されたDOMは、DOMのすべての操作を専用のJavaScriptオブジェクトに分離するモジュール化戦略です。

例として、最近私が開発したお気に入りのユーロゲームについて議論するためのフィルターカタログページを考えてみましょう。このページの重要な動作は、左側のフィルターパネルをクリックして、エントリリストパネルに表示するゲームをフィルター処理できることです。これらはすべてJavaScriptを使用して行われます。ページの部分ごとにDOMアクセスをカプセル化するフィルターパネルとエントリリスト用のJavaScriptクラスがあります。表示するゲームを決定するロジックは、DOMとは独立したインターフェースを使用してDOM操作クラスと通信するコントローラークラスに保持されます。コントローラークラスはjQueryを一切使用しません。

初期化中に、コントローラーはフィルター内のチェックボックスの状態が変更されるたびに呼び出されるように、更新関数をフィルターDOMに渡します。フィルターDOMはこの関数をチェックボックスのクリックイベントに設定します。したがって、フィルター表示で何らかの変更が発生すると、コントローラーのこの更新関数は、アクティブなフィルターについてフィルターDOMクラスに要求します➊。フィルターDOMクラスは、この呼び出しに応答して、jQueryを使用して適切なHTML要素を見つけ➋、チェックされているボックスをフィルターで除外して、各グループでどのボックスがチェックされているかを示す単純なデータ構造でコントローラーに応答します➌。

コントローラーは、フィルターの状態に関するこの情報を使用して、表示されるゲームを決定し、それらを左と右の列に分割し、リストに表示する要素IDの詳細をエントリリストDOMに渡します➍。エントリリストDOMはjQueryを使用して、HTMLアイテムを適切なdivに移動してジョブを実行します➎。

これを行う主な利点は、各クラスを単一のタスクに集中させることで、各クラスについて推論しやすくすることです。フィルターDOMクラスを操作するときは、HTML要素でDOM操作を行う方法に集中します。コントローラーを操作するときは、HTML構造、CSSクラス名などの詳細を無視できます。

より抽象的なパターンの用語では、これらのDOMオブジェクトはゲートウェイとして機能し、2つの境界付けられたコンテキスト（アプリケーションとHTML DOM）間の通路として機能します。どのゲートウェイもそうであるように、DOMオブジェクトには、クライアント（アプリケーション）の語彙を話すインターフェースと、これを野蛮な（HTML DOM）彼方の土地に変換する実装があります。[1]

優れたモジュール設計は、テスト可能性と相関する傾向があります。各クラスは、比較的独立してテストできます。分離されたDOMの特定のアドバンテージは、PhantomJSなどのブラウザやモックブラウザを使用せずにコントローラーをテストできることです。コントローラーをテストするためにDOMを必要としないため、nodeでテストし、DOMゲートウェイ用のいくつかの単純なテストダブルを提供することができます。これにより、コントローラーの変更がより迅速かつ簡単になります。可能な限り多くのロジックをDOMゲートウェイから外すことで、PhantomJSなどに頼らずに実行できるテストの量を増やすことができます（Humble Objectパターンの適用）。