バックボーンは...
...コードの整理に役立つコンポーネントの非常に小さなライブラリ。単一のJavaScriptファイルとしてパッケージ化されています。コメントを除いて、実際のJavaScriptは1000行未満です。それは賢明に書かれていて、数時間で全部を読むことができます。
これはフロントエンドライブラリであり、スクリプトタグを使用してWebページに含めます。これはブラウザにのみ影響し、サーバーについてはほとんど言及しませんが、Restful APIを公開することが理想的です。
APIを使用している場合、Backboneには、APIとの対話に役立ついくつかの便利な機能がありますが、Backboneを使用して、静的HTMLページに対話機能を追加できます。
バックボーンは...
... JavaScriptに構造を追加します。
JavaScriptは特定のパターンを強制しないため、JavaScriptアプリケーションは非常に乱雑になる可能性があります。JavaScriptで些細なことを超えて何かを作成した人は、おそらく次のような質問に遭遇するでしょう。
- データはどこに保存しますか？
- 関数はどこに配置しますか？
- 関数を一緒に配線して、それらが賢明な方法で呼び出され、スパゲッティにならないようにするにはどうすればよいですか？
- このコードをさまざまな開発者が保守できるようにするにはどうすればよいですか？
バックボーンはあなたにこれらの質問に答えようとします：
- データとデータのコレクションを表すのに役立つモデルとコレクション。
- データが変更されたときにDOMを更新するのに役立つビュー。
- コンポーネントが互いにリッスンできるようにするイベントシステム。これにより、コンポーネントの分離が維持され、スパゲティフィケーションが防止されます。
- 開発者が同じコードベースで共同作業できるように、実用的な規約の最小限のセット。
これをMV *パターンと呼びます。モデル、ビュー、オプションの追加機能。
バックボーンは軽い
初期の外観にもかかわらず、バックボーンは素晴らしく軽量で、ほとんど何もしません。それが行うことは非常に役立ちます。
作成できる小さなオブジェクトのセットを提供し、イベントを発行して互いにリッスンできます。たとえば、コメントを表す小さなオブジェクトを作成してから、ブラウザの特定の場所でのコメントの表示を表す小さなcommentViewオブジェクトを作成します。
コメントを聞いて、コメントが変更されたときに自分自身を再描画するようにcommentViewに指示できます。同じコメントがページの複数の場所に表示されている場合でも、これらのビューはすべて同じコメントモデルをリッスンして、同期を保つことができます。
このようにコードを構成する方法は、コードベースが非常に大きくなり、多くの相互作用が発生した場合でも、絡まないようにするのに役立ちます。
モデル
最初は、データをグローバル変数に格納するか、DOMにデータ属性として格納するのが一般的です。。これらの両方に問題があります。グローバル変数は互いに競合する可能性があり、一般に悪い形式です。DOMに格納されているデータ属性は文字列のみです。それらを再度解析および解析する必要があります。配列、日付、オブジェクトなどを格納し、構造化された形式でデータを解析することは困難です。
データ属性は次のようになります。
<p data-username="derek" data-age="42"></p>
バックボーンは、データと関連するメソッドを表すモデルオブジェクトを提供することでこれを解決します。ToDoリストがあるとすると、そのリストの各項目を表すモデルがあるとします。
モデルが更新されると、イベントが発生します。その特定のオブジェクトに関連付けられたビューがある場合があります。ビューはモデル変更イベントをリッスンし、それ自体を再レンダリングします。
ビュー
バックボーンは、DOMと通信するViewオブジェクトを提供します。DOMを操作したり、DOMイベントをリッスンしたりするすべての関数がここに配置されます。
ビューは通常、ビュー全体またはビューの一部を再描画するレンダリング関数を実装します。render関数を実装する義務はありませんが、それは一般的な慣習です。
各ビューはDOMの特定の部分にバインドされているため、検索フォームのみをリッスンするsearchFormViewと、ショッピングカートのみを表示するshoppingCartViewがある場合があります。
ビューは通常、特定のモデルまたはコレクションにもバインドされます。モデルが更新されると、ビューがリッスンするイベントが発生します。ビューはレンダーを呼び出して、自分自身を再描画する場合があります。
同様に、フォームに入力すると、ビューでモデルオブジェクトを更新できます。そのモデルをリッスンする他のすべてのビューは、独自のレンダリング関数を呼び出します。
これにより、問題を明確に分離して、コードをきちんと整頓できます。
レンダー機能
レンダリング関数は、必要に応じて任意の方法で実装できます。DOMを手動で更新するために、jQueryをここに配置するだけかもしれません。
テンプレートをコンパイルして使用することもできます。テンプレートは、挿入ポイントを持つ文字列です。それをJSONオブジェクトと共にコンパイル関数に渡し、DOMに挿入できるコンパイルされた文字列を取得します。
コレクション
モデルのリストを格納するコレクションにもアクセスできるため、todoCollectionはtodoモデルのリストになります。コレクションがモデルを取得または失ったとき、その順序を変更したとき、またはコレクション内のモデルが更新されたとき、コレクション全体がイベントを発生させます。
ビューはコレクションをリッスンし、コレクションが更新されるたびにそれ自体を更新できます。
たとえば、コレクションに並べ替えとフィルターのメソッドを追加し、それ自体を自動的に並べ替えることができます。
そしてすべてを結びつけるイベント
可能な限り、アプリケーションコンポーネントは互いに分離されています。それらはイベントを使用して通信するため、shoppingCartViewはshoppingCartコレクションをlistenToし、カートが追加されると自分自身を再描画します。
shoppingCartView.listenTo(shoppingCart, "add", shoppingCartView.render);
もちろん、他のオブジェクトもshoppingCartをリッスンしている可能性があり、合計を更新したり、状態をローカルストレージに保存したりすることもあります。
- ビューはモデルをリッスンし、モデルが変更されるとレンダリングします。
- ビューはコレクションをリッスンし、コレクション内のアイテムが変更されたときにリスト（またはグリッド、マップなど）をレンダリングします。
- モデルはビューをリッスンするため、フォームが編集されたときに状態を変更できます。
このようにオブジェクトを分離し、イベントを使用して通信することで、結び目に巻き込まれることがなくなり、新しいコンポーネントや動作の追加が簡単になります。新しいコンポーネントは、システムにすでに存在する他のオブジェクトをリッスンするだけです。
規約
バックボーン用に書かれたコードは、大まかな規則に従っています。DOMコードはビューに属します。コレクションコードはコレクションに属しています。ビジネスロジックはモデルに入ります。別の開発者がコードベースを入手すると、実行を開始できます。
総括する
バックボーンは、コードに構造を与える軽量のライブラリです。コンポーネントは分離され、イベントを介して通信するため、混乱することはありません。新しいオブジェクトを作成し、既存のオブジェクトを適切にリッスンさせるだけで、コードベースを簡単に拡張できます。あなたのコードはよりクリーンで、より良く、そしてより保守しやすくなります。
私の小さな本
私はバックボーンがとても好きだったので、それについて少しイントロ本を書きました。ここでオンラインで読むことができます：http : //nicholasjohnson.com/backbone-book/
また、資料を短いオンラインコースに分割しました。このコースは、http：//www.forwardadvance.com/course/backboneで見つけることができます。約1日でコースを修了できます。