backbone.jsの目的は何ですか？
私はそのサイト http://documentcloud.github.com/backbone からbackbone.jsの有用性を理解しようとしました、しかし私はまだ理解できませんでしたたくさん出ます。
それがどのように機能するのか、そしてより良いJavaScriptを書くのにどのように役立つのかを説明することで誰かが私を助けることができますか？
Backbone.jsは基本的に、MVC（Model、View、Controller）のようにJavaScriptコードを構造化することができる、非常に軽量なフレームワークです。
Modelは、データを取得してデータを入力するコードの一部です。
Viewは、このモデルのHTML表現です（モデルの変更に応じてビューが変わるなど）。
オプションのControllerこの場合、ハッシュバングURLを使用してJavascriptアプリケーションの状態を保存できます。 http： //Twitter.com/#search?q=backbone.js
私がBackboneで発見したいくつかの長所：
Javascript Spaghetti：コードは体系化され、意味的に意味のある.jsファイルに分割され、後でJAMMITを使って結合されます。
これ以上
jQuery.data(bla, bla)：DOMにデータを保存する必要はなく、代わりにモデルにデータを保存するイベントバインディングはちょうど機能する
非常に便利なアンダースコアユーティリティライブラリ
backbone.jsのコードはよく文書化されていて、とてもよく読んでいます。私はいくつものJSコード技術に目を向けました。
短所：
- 頭を包み込み、それを自分のコードに適用する方法を理解するためにしばらく時間がかかりましたが、私はJavascriptの初心者です。
バックエンドとしてRailsでBackboneを使用する際の素晴らしいチュートリアルがあります。
CloudEdit：Railsを使ったBackbone.jsチュートリアル：
http://www.jamesyu.org/2011/01/27/cloudedit-a-backbone-js-tutorial-by-example/
http://www.jamesyu.org/2011/02/09/backbone.js-tutorial-with-Rails-part-2/
pSこの素晴らしいCollectionクラスを使ってモデルのコレクションを扱い、入れ子になったモデルを模倣することもできますが、最初から混乱させたくありません。
ブラウザで複雑なユーザインタフェースを構築しようとしているのであれば、おそらくBackbone.jsやSammy.jsのようなフレームワークを構成する要素の大部分を最終的に考案していることでしょう。それで問題は、あなたがそれを使うに値するほど十分に複雑なものをブラウザの中に構築しているということです。
あなたが構築しようとしているものがUIの表示方法を定期的に変更するもので、新しいページ全体を取得するためにサーバーに行かない場合は、おそらく必要です。 Backbone.jsやSammy.jsのようなもの。そのようなものの典型的な例は、GoogleのGMailです。あなたがこれを使ったことがあるなら、あなたが最初にログインしたときにそれがHTML、CSS、そしてJavaScriptの1つの大きな塊をダウンロードすることに気付くでしょう。それは、電子メールを読むことと受信箱を処理すること、そして全く新しいページがレンダリングされることを要求することなしにそれら全てを再び検索して戻ることとの間を移動することができる。
これらのフレームワークが開発を容易にするという点で、この種のアプリです。これらがなければ、さまざまな個々のライブラリをまとめて機能の一部（履歴管理用のjQuery BBQ、イベント用のEvents.jsなど）を取得するか、自分ですべてを構築することになります。そしてすべてを自分自身で保守しテストしなければなりません。それとは対照的に、Githubで何千人もの人々がそれを見ているBackbone.js、何百人もの人々が作業している可能性のあるフォーク、および何百もの質問がすでにStack Overflowに関してここで聞かれ答えました。
しかし、あなたが構築しようとしているものが、フレームワークに関連する学習曲線の価値があるほど十分に複雑ではない場合、それは重要ではありません。まだPHP、Java、またはバックエンドサーバーがユーザーの要求に応じてWebページを構築するという重い作業をすべて行っていて、JavaScript/jQueryがそのプロセスに着手しているサイトをまだ構築しているのであれば、問題ありません。 Backbone.jsが必要になるか、まだ準備ができていません。
バックボーンは...
...コードを整理するために使用できる、非常に小さなコンポーネントのライブラリです。単一のJavaScriptファイルとしてパッケージされています。コメントを除いて、それは実際のJavaScriptの1000行未満を持っています。それは賢明に書かれており、あなたは数時間で全部を読むことができます。
それはフロントエンドライブラリです、あなたはスクリプトタグであなたのウェブページにそれを含めます。それはブラウザにのみ影響を及ぼし、そしてあなたのサーバについてはほとんど言いません、それが理想的には静止したAPIを公開するべきであることを除いて。
あなたがAPIを持っているならば、Backboneはあなたがそれに話すのを助けるいくつかの役に立つ機能を持っています、しかしあなたはどんな静的なHTMLページにも対話性を追加するためにBackboneを使うことができます。
バックボーンは...
... JavaScriptに構造を追加する.
JavaScriptは特定のパターンを強制しないため、JavaScriptアプリケーションは非常に早く乱雑になる可能性があります。 JavaScriptで些細なことを超えて何かを構築したことがある人は、おそらく次のような質問に出くわすでしょう。
- データをどこに保存しますか？
- 関数をどこに置きますか？
- 関数が賢明な方法で呼び出され、スパゲッティに頼らないようにするには、どのようにして関数を結び付けますか？
- このコードを他の開発者が保守できるようにするにはどうすればよいですか？
バックボーンはあなたに与えることによってこれらの質問に答えようとします：
- データとデータのコレクションを表現するのに役立つモデルとコレクション。
- データが変更されたときにDOMを更新するのに役立つビュー。
- コンポーネントが互いに聴取できるようにするイベントシステム。これにより、コンポーネントが分離された状態に保たれ、スパゲッティ化が防止されます。
- 賢明な規約の最小セット、開発者は同じコードベースで一緒に作業することができます。
これをMV *パターンと呼びます。モデル、ビュー、およびオプションの追加機能。
バックボーンは軽い
最初の外観にもかかわらず、バックボーンは素晴らしく軽いです、それはほとんど何もしません。それがすることはとても役に立ちます。
それはあなたがあなたが作成することができて、そしてそれがイベントを発しそしてお互いに聴くことができる一組の小さいオブジェクトをあなたに与える。たとえば、コメントを表す小さなオブジェクトを作成し、次にブラウザの特定の場所にコメントの表示を表す小さなcommentViewオブジェクトを作成します。
CommentViewに、コメントを監視し、コメントが変更されたときに自分自身を再描画するように指示できます。ページ上の複数の場所に同じコメントが表示されていても、これらのビューはすべて同じコメントモデルを監視して同期を保つことができます。
このようにコードを構成することで、コードベースが非常に大きくなって多数の対話が行われても、ユーザーが絡まるのを防ぐことができます。
モデル
はじめに、データをグローバル変数かDOMに データ属性 として格納するのが一般的です。どちらも問題があります。グローバル変数は互いに矛盾する可能性があり、通常は悪い形式です。 DOMに格納されているデータ属性は文字列にしかできません。それらを解析して再度解析する必要があります。配列、日付、オブジェクトなどを格納したり、データを構造化形式で解析したりすることは困難です。
データ属性は次のようになります。
<p data-username="derek" data-age="42"></p>
バックボーンは、データとそれに関連するメソッドを表すModelオブジェクトを提供することでこれを解決します。 ToDoリストがあるとすると、そのリストの各項目を表すモデルがあります。
モデルが更新されると、イベントが発生します。その特定のオブジェクトに関連付けられたビューを持っているかもしれません。ビューはモデル変更イベントをリッスンし、それ自体を再レンダリングします。
ビュー
バックボーンはDOMと通信するViewオブジェクトを提供します。 DOMを操作したりDOMイベントを監視したりするすべての関数がここに入ります。
ビューは通常、ビュー全体、またはビューの一部を再描画するレンダリング機能を実装しています。レンダリング機能を実装する義務はありませんが、一般的な規則です。
各ビューはDOMの特定の部分にバインドされているため、検索フォームのみを監視するsearchFormViewと、ショッピングカートだけを表示するshoppingCartViewがあります。
ビューは通常、特定のモデルまたはコレクションにもバインドされています。モデルが更新されると、ビューが監視するイベントが発生します。ビューは彼ら自身を再描画するためにrenderを呼び出すかもしれません。
同様に、フォームに入力すると、ビューはモデルオブジェクトを更新できます。そのモデルをリッスンしている他のすべてのビューは、独自のレンダリング機能を呼び出します。
これにより、私たちのコードをきれいに整頓したままにしておく懸案事項を明確に分離することができます。
レンダリング機能
あなたはあなたが合うと思われる方法であなたのrender関数を実装することができます。 DOMを手動で更新するために、ここにjQueryを入れるだけでよいでしょう。
テンプレートをコンパイルして使用することもできます。テンプレートは挿入ポイントを含む単なる文字列です。あなたはそれをJSONオブジェクトと一緒にコンパイル関数に渡し、あなたのDOMに挿入できるコンパイルされた文字列を取り戻します。
コレクション
モデルのリストを格納するコレクションにもアクセスできるので、todoCollectionはtodoモデルのリストになります。コレクションがモデルを獲得または喪失したり、順序を変更したり、コレクション内のモデルが更新されたりすると、コレクション全体がイベントを発生させます。
ビューはコレクションをリッスンし、コレクションが更新されるたびに自分自身を更新できます。
あなたはあなたのコレクションにソートとフィルタメソッドを追加することができます、そして例えば自動的にそれ自身をソートさせることができます。
それを結ぶイベント
可能な限り、アプリケーションコンポーネントは互いに切り離されています。これらはイベントを使用して通信するため、shoppingCartViewはshoppingCartコレクションをlistenToし、カートが追加されたときに自分自身を再描画します。
shoppingCartView.listenTo(shoppingCart, "add", shoppingCartView.render);
もちろん、他のオブジェクトもshoppingCartを監視している可能性があり、合計の更新や状態をローカルストレージに保存するなどの他のことを実行する可能性があります。
- ビューはModelsを監視し、モデルが変更されたときにレンダリングします。
- ビューはコレクションを監視し、コレクション内の項目が変更されたときにリスト（またはグリッド、マップなど）をレンダリングします。
- モデルはビューをリッスンするので、おそらくフォームが編集されたときに状態を変更できます。
このようにあなたのオブジェクトを切り離し、イベントを使って通信することは結び目に絡むことは決してないことを意味し、そして新しいコンポーネントと振る舞いを追加することは簡単です。あなたの新しいコンポーネントは、システム内に既に存在する他のオブジェクトをリッスンするだけです。
規約
Backbone用に書かれたコードは、ゆるやかな規約に従います。 DOMコードはビューに属します。コレクションコードはコレクションに属します。ビジネスロジックはモデルに入ります。あなたのコードベースを手に入れた他の開発者が本格的に立ち上がることができるでしょう。
総括する
バックボーンはあなたのコードに構造を与える軽量のライブラリです。コンポーネントは分離され、イベントを介して通信するので、混乱することはありません。新しいオブジェクトを作成して既存のオブジェクトを適切にリスンさせるだけで、コードベースを簡単に拡張できます。あなたのコードは、よりきれいで、より良く、そしてより保守可能になります。
私の小さな本
私はバックボーンがとても好きだったので、私はそれについての小さなイントロの本を書きました。あなたはここでそれをオンラインで読むことができます： http://nicholasjohnson.com/backbone-book/
私はまたあなたがここで見つけることができる短いオンラインコースに材料を分割しました： http://www.forwardadvance.com/course/backbone 。あなたは約一日でコースを完了することができます。
これは興味深いプレゼンテーションです。
（スライドからの）ヒント：
- ブラウザでレール？ いいえ。
- JavaScript用のMVCフレームワーク？ ソルタ。
- ビッグファットステートマシン？ はい！
JQueryとMootoolsは、あなたのプロジェクトの多くのツールを含む単なるツールボックスです。バックボーンは、JQueryまたはMootoolsを使用してアプリケーションを構築できるプロジェクトのアーキテクチャまたはバックボーンのように機能します。
Backbone.jsは、コードを整理するのに役立つJavaScriptフレームワークです。それは文字通りあなたがあなたのアプリケーションを構築するためのバックボーンです。ウィジェットは提供されません（jQuery UIやDojoなど）。
サーバー上のRESTfulエンドポイントと連携するクリーンなJavaScriptコードを作成するために拡張できるクールな基本クラスのセットを提供します。
私は、MVCのすべての「利点」が私の仕事をより簡単に、より速く、またはより良くすることは決してなかったことを認めなければなりません。それは単にコーディング全体の経験をより抽象的で時間のかかるものにするだけです。誰かをデバッグしようとすると、分離が何を意味するのかという概念以外にメンテナンスは悪夢です。 CairngormをMVCモデルとして使用したFLEXサイトを何人の人が更新しようとしたかわかりませんが、更新に30秒かかるのに2時間以上かかることがよくあります（単一のイベントを見つけるために狩猟/追跡/デバッグ）。 ） MVCは私にとって、あなたが詰めることができる「利点」でした、そして今もそうです。
これはかなり良い入門ビデオです。 http://vimeo.com/22685608
あなたがRailsとバックボーンをもっと探しているなら、Thoughtbotはこのかなり良い本を持っている（無料ではない）： https://workshops.thoughtbot.com/backbone-js-on-Rails
これが私がBackboneJSで書いたクイックスタートの投稿です。それが役に立てば幸い！ http://www.infragistics.com/community/blogs/nanil/archive/2013/04/01/exploring-javascript-mv-frameworks-part-1-hello-backbonejs.aspx
バックボーンは、CoffeeScriptを書いたJeremy Ashkenasによって作成されました。 JavaScriptを多用するアプリケーションとして、私たちが現在Backboneとして知っているものは、アプリケーションを首尾一貫したコードベースに構造化する責任がありました。バックボーンの唯一の依存関係であるUnderscore.jsも、DocumentCloudアプリケーションの一部でした。
バックボーンは、開発者がクライアント側のWebアプリケーションで規則と構造（ - =）を使ってデータモデルを管理するのに役立ちます伝統的なサーバーサイドのアプリケーションロジックで得られるように。
Backbone.jsを使用することによるその他の利点
- バックボーンをフレームワークとしてではなくライブラリとして見る
- Javascriptは現在、（MVVM）モデルのように構造化された方法で編成されています。
- 大規模ユーザーコミュニティ
backbone.jsは JavaScript付きのModel-View-Controller（MVC）です しかし Extjs JavaスクリプトによるMVCパターンのバックボーンよりも優れている
バックボーンを使えば、あなたが望むほとんどすべてのことを自由に行うことができます。 APIを調べてカスタマイズしようとするのではなく、Backbonejsを使用して単純さと実装の容易さを実現します。この場合も、ライブラリとコンポーネントの2つのうち、必要なものを言うのは困難です。
また、KVOを使用してコントローラとビューを使用してルーティングを追加します。あなたはそれで "AJAXy"アプリケーションを開発することができるでしょう。
軽量のSproutcoreまたはカプチーノフレームワークと見てください。
クライアント側のMVCデザインパターンは、私を信じています..それはあなたがよりクリーンでクリアなコード、より保守しやすいコードは言うまでもありませんあなたのコードのトンを節約するつもりです。最初は少し面倒かもしれませんが、私はそれが素晴らしい図書館だと思っています。
すでにたくさんの良い答えがあります。 Backbone jsはコードを整理するのに役立ちます。モデル/コレクションを変更すると、ビューのレンダリングが自動的に行われ、開発のオーバーヘッドが大幅に削減されます。
開発に最大限の柔軟性を提供しますが、開発者はモデルを破壊し、ビューを適切に削除するように注意する必要があります。そうでないと、アプリケーションでメモリリークが発生する可能性があります。