O Backbone.jsは、MVCフレームワークのファンにとって非常にシンプルで簡潔です。

JavaScriptフレームワークBackbone.jsの使用について多くのことが書かれていますが、それほど単純で簡潔ではありません。 この欠点を修正し、Webアプリケーション開発者に、このフレームワークがなぜ役に立つのか、一般的にはどのように機能するのかを、できるだけ簡単で、アクセスしやすく、簡潔に伝えるようにします。 Backbone.jsの専門家と専門家：時間を無駄にすることはできません。この物語は初心者向けです。 正直に言うと、この記事を読むためにRails開発者である必要はありません。MVCフレームワークを使用するすべての人にこの記事が役立つことを願っています。







したがって、MVCアプローチを使用した平均的なプロジェクトを想像してください。 これは、さまざまなタイプの関係によって互いに関連付けられたいくつかのモデル（通常は約10から15）を持つオンラインストアである可能性があります。 プロジェクトには、適切な数のコントローラー、さまざまな出力デバイス用の2〜3のレイアウト、名前空間/ api / v1の複数のコントローラー、多くのビューおよび部分的なコントローラーが含まれます。 これはすべて標準として機能し、ブラウザーはリクエストを送信し、コントローラーはデータサンプルを作成し、それらをview'shkiに送信し、それらはブラウザーでユーザーに送信されます。 特定のモデルの特定のインスタンスを検索する「検索」機能があり、ページ上にこれらの見つかったインスタンスの表示を作成するループを含む結果のビューがあり、APIを介してサーバーと通信するAndroid用のモバイルアプリケーションもあります（コントローラーを要求し、ちなみに、namespace'e / api / v1で待機します。多くの場合、同様の「通常の」コントローラを複製し、異なる形式でのみ情報を提供します。



次に、ワンギモードをオンにします。 プロジェクトには必ずJavaScriptコードが含まれていることを知っています。 さまざまなWebアプリケーションがJavaScriptを使用してさまざまな問題を解決します。ほぼすべての場所でjQueryがプラグイン、jQuery UI、その他のモジュールおよびプラグインの有無にかかわらず使用されます。 ここでは、装飾に関連するあらゆる種類のエフェクト、ドロップダウンメニュー、ドレープ＆ドロップ要素などを作成するためのJavaScriptの使用を検討しません。 データの操作を検討します 。



したがって、Wangiモードでは、製品モデル（オンラインストアがあることを覚えていますか？）があると想定できます。また、確かに、いくつかの基準に従って製品のリストを表示できるマネージャーインターフェイスがあります。 マネージャーは、新しい注文の数を示す定型化されたインジケーターを使用して、すぐに新しい注文が表示されたことを確認します。 このインジケーターは次のように機能すると思います：document.ready（）でタイマーを作成し、60秒ごとに/ api / v1 / kolichestvo_zakazovのようなアドレスを要求します。 まあ、または/ api / v1 / orders / new / count 、言語学に対するあなたの態度に依存します。 タイマーが開始する関数には、以前に指定したURLでデータを受信するjQuery ajaxで記述されたリクエストがあります。 なんで？ わからない、王は助けない あるプログラマーは{orders：{new：3}}のような正しいjsonを送信し、別のプログラマーは数字3だけを送信できます。3番目のプログラマーはサーバー側でレンダリングし、応答でドキュメント内の適切な場所にすぐに挿入できるHTMLコード全体を送信できます。 一般的に、ヴァンガはここで助けにはなりません。秩序、法律、驚きの最大レベルはありません。 しかし、最も重要なのは、データを受け取った後、単純に言えば、データが失われることです。 クライアント側は何かを受け取り、このデータを使って何かをしたので、彼らはもはやあなたに利益をもたらさないでしょう。



完璧主義者の哲学者の観点から、これはひどいです。 サーバー側でデータを整理する数百の方法がすでに考案されている場合（MVCアプローチ、DBMSは基本的に情報を整理するための方法論です）、次のステップは、クライアント側でデータを整理することです 。



Backbone.jsは何を提供できますか？ 私の意見では、最初の最も重要なことは、データの順序付けです。これは、使い慣れたMVCを介してBackbone.jsに実装されます。 それがどうなるかについて簡単に：



1.アプリケーションにモデルがあります。 ユーザー、製品、注文...すばらしい。Backbone.jsを使用すると、これらのモデルをクライアント側で説明できます。 そして、これらのモデルは本物です。新しいインスタンスを作成し、既存のインスタンスのフィールドを編集し、不要なインスタンスを削除できます。 後でスローされる情報を取得したり、サーバーから注文クラスのインスタンスを取得したりするための関数を作成することはできません。 注文には多くの不要な情報が含まれている可能性があります。 たぶん。 ただし、クライアント側で必要な順序フィールドのみをJSONで送信することを禁止する人はいません。 そして、あなたの仮想マネージャーは、注文数に加えて、それぞれの合計に加えて、突然、表示したいかもしれません-そして、私たちはすでにすべてを行っています、情報はすでにそこにあります、それを表示するだけで、オブジェクトはすでにクライアント上にあり、サーバーと同期しています。 そして、マネージャーがその場でこの金額を変更したい場合はどうなりますか？ 問題ありません。 新しい自家製の関数を記述するよりも、コードにorder.save（{：cost => this.input.val（}）を記述する方がはるかに優れています。モデルは、GET、POST、PUT、およびDELETEリクエストを送信するURLを知っており、たとえば、必要な場合、product.delete（）はDELETEを/ api / v1 / products / 75に送信します（75はこのモデルのIDです）。



2.多くの同様のブロックが必要なアプリケーションのページがあります。 製品検索結果は一例です。 各製品は、div class = 'product'内に配置できます。 サーバー上でこのページを作成した後、このエリアと記載されている製品との接続は失われます。 このページで何かをしたい場合は、このエリアに関連する製品を再度知らせる方法を考案する必要があります。たとえば、製品IDでデータ属性を指定し、フォームやリクエストで使用します。Backbone.jsはそのようなバインディング自体を実装します。 これは「ビュー」と呼ばれ、さらに多くのことが行われます。たとえば、製品エリアは製品の変更に応答して、それ自体を再描画できます。 この領域内では、Productクラスのインスタンス（まさにそのクラス）にアクセスでき、クライアント側で何でも実行できます。 Backbone.jsがサーバーへの変更を保存するように、後で保存することを忘れないでください。



ところで。 製品テーブルのいくつかのフィールドでフィルタリングしたいですか？ これは追加のアクションを必要としないことをすでに推測しましたか？ サーバーに何かを送信する必要はありません。同じテーブルを取得し、再度フィルタリングするだけです。 すでにオブジェクトがあります。1行のJavaScriptコードで製品のコレクションをフィルタリングするだけです。 そして、はい、彼らも自分自身を再描画します。製品の変更時にこの製品に関する情報があるページの一部を更新することをBackboneに伝える必要があるのは一度だけです。



3.また、データの整理のトピックでも。 クライアント側のMVCフレームワークを使用すると、場合によっては、クライアントとサーバー間のトラフィックを減らしてjsonの小さな断片を交換することができ、これにより大量のトラフィックを節約できます。 顧客に送信し、顧客からのデータのみを受信します。顧客にページ全体を常に送信するわけではありません。 すべてのjavascriptとcssを一度ロードしてキャッシュすることができます。そうすると、好きなように注文されたデータの交換のみが行われます。



結論の代わりに：もちろん、このメモはBackbone.jsの可能性の5％には触れていませんが、私はそれについて話したくはありませんが、サーバーとブラウザーの両方で情報を順番に維持するアイデアについては述べません。 ソフトウェア開発者は私たちの周りの世界を整理し、世界をモデルに分割し、そのプロパティ、動作、状態、および相互作用を特定します。 急速に変化するインターネットは事実上標準に準拠していません（また、順序の最良の例からは程遠い4または5のCSS仕様を除き、クライアントコンテンツに関する標準はありません）。 このような便利な方法でも、このカオスのエントロピーを増やしましょう-データを構造的な順序と同期状態に保ちます！



完璧主義者の開発者であり、敬意を持ってご清聴ありがとうございました。



PS記事がコミュニティにとって興味深いものであることが判明した場合は、記事の冒頭で説明したストアの例を使用してBackbone.jsを使用すると、何がより良くなるかについての例とともに、続編を書きます。