Backbonejs-applications
BackboneJS-アプリケーション
BackboneJSは、ビジネスロジックとユーザーインターフェイスロジックの分離を可能にする構造をWebアプリケーションに提供します。 この章では、ユーザーインターフェイスを実装するためのBackboneJSアプリケーションのアーキテクチャスタイルについて説明します。 次の図は、BackboneJSのアーキテクチャを示しています-
BackboneJSのアーキテクチャには、次のモジュールが含まれています-
- HTTPリクエスト
- ルーター
- View
- イベント
- モデル
- コレクション
- 情報源
ここで、すべてのモジュールについて詳しく説明します。
HTTPリクエスト
HTTPクライアントは、Webブラウザ、検索エンジンなどがHTTPクライアントのように動作する要求メッセージの形式でサーバーにHTTP要求を送信します。 ユーザーは、HTTP要求プロトコルを使用して、ドキュメント、画像などのファイルを要求します。 上記の図では、HTTPクライアントがルーターを使用してクライアント要求を送信していることがわかります。
ルーター
クライアント側アプリケーションのルーティングに使用され、URLを使用してアクションとイベントに接続します。 これは、アプリケーションのオブジェクトのURL表現です。 このURLは、ユーザーが手動で変更します。 バックボーンはURLを使用して、ユーザーに送信または表示するアプリケーションの状態を理解できるようにします。
ルーターは、URLをコピーしてビューに到達できるメカニズムです。 ルーターは、Webアプリケーションがアプリ内の重要な場所にリンク可能、ブックマーク可能、共有可能なURLを提供する場合に必要です。
上記のアーキテクチャでは、ルーターはHTTP要求をViewに送信します。 アプリケーションにルーティング機能が必要な場合に便利な機能です。
View
BackboneJSビューは、アプリケーションからどのように何を表示するかを担当し、アプリケーションのHTMLマークアップを含みません。 ユーザーへのモデルのデータのプレゼンテーションの背後にあるアイデアを指定します。 ビューは、「データモデルの外観」を反映するために使用されます。
ビュークラスはHTMLとCSSについて何も知らないため、ページ全体をリロードせずにモデルが変更された場合、各ビューを個別に更新できます。 DOM内のUIの論理チャンクを表します。
上記のアーキテクチャに示されているように、ビューは、ルーターを使用して行われたユーザー要求に対する応答を表示するユーザーインターフェイスを表します。
イベント
イベントは、アプリケーションの主要部分です。 ユーザーのカスタムイベントをアプリケーションにバインドします。 これらは任意のオブジェクトに混在させることができ、カスタムイベントをバインドおよびトリガーできます。 任意の名前を使用して、カスタムイベントをバインドできます。
通常、イベントはプログラムフローと同期して処理されます。 上記のアーキテクチャでは、イベントが発生すると、ビューを使用してモデルのデータを表します。
モデル
これは、データを取得および入力するJavaScriptアプリケーションの中心です。 モデルには、アプリケーションのデータ、データのロジックが含まれ、フレームワークの基本的なデータオブジェクトを表します。
モデルは、いくつかのビジネスロジックとビジネス検証を備えたビジネスエンティティを表します。 主にデータストレージとビジネスロジックに使用されます。 モデルは、データストレージから取得したり、データストレージに保存したりできます。 モデルは、ルーターを使用してビューから渡されたイベントからHTTPリクエストを取得し、データベースからのデータを同期し、クライアントに応答を送信します。
コレクション
コレクションは、コレクション内でモデルが変更されたときにイベントをバインドするモデルのセットです。 このコレクションには、ループで処理できるモデルのリストが含まれており、並べ替えとフィルタリングをサポートしています。 コレクションを作成するとき、プロパティのインスタンスとともに、そのコレクションが持つモデルのタイプを定義できます。 モデルでトリガーされたイベントは、モデル内のコレクションでもトリガーされます。
また、ビューから要求を取得し、イベントをバインドし、要求されたデータとデータを同期し、HTTPクライアントに応答を送り返します。
情報源
これは、サーバーからデータベースにセットアップされた接続であり、クライアントから要求された情報が含まれています。 BackboneJSアーキテクチャの流れは、次の手順に示すように記述することができます-
- ユーザーは、URLを使用してアプリケーションをイベントにルーティングするルーターを使用してデータを要求します。
- ビューは、ユーザーにモデルのデータを表します。
- モデルとコレクションは、カスタムイベントをバインドすることにより、データベースからデータを取得して入力します。
次の章では、BackboneJSのイベントの重要性を理解します。
