Backbone.jsおよびjQuery
Backboneはすべての高レベルの抽象化を処理し、jQueryまたは同様のライブラリはDOMで動作し、イベントを正規化するなどと言われています。
誰か簡単な実用的な例でこの声明を理解してください。
また、Backbone、KnockoutのようなMVCフレームワークの重要な機能の1つは、モデル（データ）とビューの同期を維持することです。しかし、これはアプリケーション全体ではなく、ページレベルで固有のようです。モデル/データとビューを複数のページ間で同期させることができます。（グローバルの種類）
バックボーン/ノックアウトは通常、単一ページのアプリケーションに使用されます。そのため、jQueryはどのWebページでも使用できるツールボックスですが、Backboneは特定のタイプのアプリケーション向けであり、コードを整理するのに役立ちます。少なくとも私の経験では、単一ページのアプリを構築する際の最大の課題の1つは、コードをクリーンでモジュール化した状態に保つことであり、バックボーンはこれに非常に役立ちます。
典型的なバックボーンアプリの特徴は次のとおりです。
- 本質的に静的なHTMLページ、サーバー上で生成されたものは何もない
- サーバーは、アプリのコンテンツを提供するjson REST apiとして機能します
- データを表示するdom要素は、jQueryとさまざまなテンプレートライブラリを使用して、バックボーンビューのjavascriptで作成されます
- サーバーとの通信およびアプリのさまざまな部分間の通信は、バックボーンモデルを介して行われます
複数のページ間でデータを同期させることについてのあなたの質問について、私の直感的な答えは、複数のページは必要ないということです。ユーザーはページが変更されていると感じ、pushState機能のおかげでURLバーのアドレスが変更されますが、アプリ全体が1ページです。
この種のアプローチの最大の利点は、スムーズなユーザーエクスペリエンス（ページのリロードなし）、jsonデータを除くすべてが静的コンテンツであるため、優れたキャッシングサポートです。 json以外はすべて静的です）。
冒頭の文は、実際にはBackbone.jsとjQueryの違いを非常によく表していたので、少し展開しましょう。
1つには、2つのライブラリはまったく競争しておらず、無料です。
例として、jQueryで行うことをいくつか示します。
- アニメーションスライドショー
- IOSスタイルの番号「スピナー」などのフォームコントロールの強化
- クラス名に基づいて要素の可視性を切り替える
そして、Backbone.jsで私ができること：
- フォトアルバムを作成します。ユーザーがサムネイルをクリックすると、使用したカメラ、場所、写真家の名前などのデータとともに、写真の拡大版を表示できます。
- データのグリッドを表示し、ユーザーが個々の要素をクリックしてフォームで更新できるようにするマスター/詳細タイプのページを作成します。
jQueryはマイクロレベルで優れており、ページ要素を選択して、ブラウザがイベントを処理する方法の違いを滑らかにします。
Backbone.jsは全体像です。データとアプリケーションロジックの管理に役立ちます。上記のフォトアルバムの例では、Backboneはいくつかの便利な構造を提供します。写真に関連するすべてのデータ（モデル）、アルバム内のすべての写真のリスト（コレクション）、および置く場所ユーザーがサムネイル（ビュー）をクリックしたときの動作を決定するロジック。これらは、Backboneコントロールまたはアプリケーションの主要部分です。
ただし、Backbone.jsは、アプリケーションのデータとロジックの結果をDOMにレンダリングするのに役立つjQueryなどの利点を備えています。たとえば、jQueryを使用して、Backboneアプリのコンテナとして機能するページ上の要素を選択するのが一般的です。また、jQueryの$(function () {});を使用してBackboneコントロールの一部を起動することも一般的です。おそらくjQueryを使用してフォームフィールド検証エラーメッセージも表示するでしょう。
JQueryで大きく複雑なユーザーインターフェイスを確実に構築できます。私が仕事で管理しているアプリにはいくつかあります。ただし、jQueryはアプリケーションに構造を提供するように設計されていないため、これらを使用するのは困難です。特に、アイテムのグループを選択し、それらのアイテムを操作するコールバック関数を渡すことに基づいているjQueryのAPIは、大きく複雑なコントロールまたはアプリで使用するのに適したパターンではありません。ネストされた関数がたくさんあることになり、何が起こっているのかを見るのは非常に困難です。
現在、Backbone.jsでこれらのコントロールの1つを修正しています。最後の例として、両方の異なるライブラリで同じコントロールを操作するときの思考プロセスの違いを簡単にまとめます。
JQueryでは、私は心配しています：
- 適切なセレクタを使用して、必要な
li要素のグループを取得していますか？ - このAjax呼び出しが完了したときに、値のリストを再設定する必要がありますか？
- これらの配列値をページの
input要素に戻すにはどうすればよいですか？
Backboneでは、次のことに重点を置いています。
- モデルアイテムのこのプロパティセットを検証するための正しいロジックは何ですか？
- ユーザーが[追加]ボタンをクリックすると、すぐに新しいアイテムをコレクションに追加する必要がありますか、それともすべてのデータが入力されて「有効」になるまで待つ必要がありますか？
- アイテムが削除される直前または削除されたときに、コレクション内のアイテムはどのように応答する必要がありますか？
jQueryは核心の詳細を処理し、Backboneはより高レベルです。
最後に、Backbone.jsの例を説明するときに「control」と「app」という言葉を使用していることに注目してください。 Backbone.jsが単一ページのアプリ専用であることは事実ではありません。ただし、Backbone.jsがデータを操作し、多くのロジックを処理する複雑なアプリケーションの構築に適していることは事実です。小規模なUI要素に使用するのはばかげているでしょう。それが課す余分な構造は必要ありません。
更新：複数ページの問題では、はい、Backboneはデータを永続化する強力なメカニズムを提供します。各モデルには、サーバーに変更を保存するためにAJAX呼び出しを実行するsaveメソッドがあります。したがって、データを保存している限り、マルチページアプリです。非常に柔軟なモデルであり、仕事でBackboneを使用することになるでしょう。シングルページアプリを作成したいのですが、既存のマルチページアプリケーションで10年間の仕事があります。 。より強力なUIコンポーネントの一部をBackboneで再構築し、ユーザーが別のページに移動する前に変更をサーバーに同期することを検討しています。
私は複数のページでbackbone.jsを使用している人のことを聞いたことがありません。ほとんどの場合、何らかの種類のシングルページアプリです。
単一のページには多くの異なるモデル、ビュー、および状態が含まれている場合があり、完全に強力なアプリを作成できます。
Javaでサーバー側のテンプレート/ビューのレンダリングが既にある場合、backbone.jsはあなたには向いていません。backbone.jsを最大限に活用するには、そのコードの一部を移動または複製する必要がありますフロントエンドjavascript。
単一ページのアプリを実行したくない場合（これは単にページの更新や変更のないアプリを意味しますが、ユーザーにとってURLは引き続き変更でき、マルチページのように見える可能性があります）、MVCをすべてオンにしておくことができますサーバーとバックボーンの必要はありません。
編集：
バックボーンが行うのは、サーバーで通常処理されるMVCの一部をクライアントに移動することです。多くの人にとって、これはサーバーを忘れて、単一ページのjavascriptアプリとしてアプリを書くことを意味します。サーバーはJSON/RESTデータの単なるソースになります。それを行う準備ができていない場合、backbone.jsはあまり役に立ちません。
バックボーンはMV *フレームワークであり、jQueryはDOMツールキットです。
MV *アプリケーションの主な機能は、ルーティング、データバインディング、テンプレート/ビュー、モデル、およびデータアクセスです。バックボーンはjQueryに部分的に依存する可能性があります。
jQueryは、広範なブラウザーサポートと活気のあるコミュニティを備えたDOMを照会するための強固なAPIです。イベント処理、遅延オブジェクト、およびアニメーションが付属しています。
JQueryを使用した単純なイベントバインディング
// When any <p> tag is clicked, we expect to see '<p> was clicked' in the console.
$( "p" ).on( "click", function() {
console.log( "<p> was clicked" );
});