1。はじめに
最近、私は大規模なオンラインバンキングプロジェクトのフロントエンドの最適化を行っています。太ったクライアントの最適化を使用する必要があります。一般的な考え方は、フロントエンドがAjax要求を使用してバックエンドからデータを取得し、Jason形式で返し、ページに表示するということです。このシステムは非常に大きいため、FATクライアントソリューションは必然的にクライアントに多くのJSコードを作成する必要があります。どのチームも大量の非構造化コードを維持することは非常に不便だと思います。それで、バックボーンが私の目に入ってきました。
JSコードを構成する方法を提供し、オブジェクト指向の方法でフロントエンドJSコードを整理できるようにします。これは、フロントエンドにドメイン駆動型のデザインを適用するようなものです。モジュールごとに非常に大きなプロジェクトを分割できます。各モジュールは、バックボーンの要件に従って視界、モデル、およびルーターに分割できます。
バックボーンを使用すると、データをモデルとして扱うことができます。モデルを使用すると、データを作成したり、データを検証したり、サーバーに保存したりすることができます。インターフェイスの操作により、モデルのプロパティが変更されると、モデルは変更のイベントをトリガーします。モデルステータスを表示するために使用されるビューは、モデルが変更をトリガーし、対応する応答を発行し、新しいデータをインターフェイスに再レンダリングするというメッセージを受信します。完全なバックボーンアプリケーションでは、モデルが変更されたときにビューが簡単に更新されるため、DOMから特別なIDを介してノードを取得するか、HTMLページを手動で更新するか、Glueコードを書く必要はありません。
2。機能
Backboneは、ページで多数のJSの管理を構築し、サーバーやビューとのシームレスな接続を確立し、複雑なアプリケーションを構築するための基本的なフレームワークを提供するために使用される軽量のフロントエンドフレームワークです。
バックボーンの主な特徴と特性を簡単に説明させてください。
2.1軽量
バックボーンのソースコードは約1000行（分解後および空白線の後）で、ファイルサイズはわずか16kbで、依存関係ライブラリのアンダースコアはわずか29kbです。
バックボーンの内部実装を簡単に理解するために少し時間を費やす必要があります。または、バックボーンのメカニズムの一部を過負荷するために、少量のコードを記述します。バックボーンに基づいて二次開発を行いたい場合、それは複雑なことではありません。
2.2構造
バックボーンは、ページ内のデータ、ロジック、ビューを簡単に切り離し、Backboneに従ってコード構造を整理できます。データインタラクション、ビジネスロジック、ユーザーインターフェイス、およびその他のプロジェクトでのその他の作業を複数の同僚に割り当てて、同時に開発し、整然と整理することができます。同時に、これは大規模で複雑なプロジェクトのメンテナンスと開発に非常に役立ちます。
2.3継承メカニズム
バックボーンでは、モジュールを継承できます。アーキテクチャ全体をより明確にするために、オブジェクト指向の方法でアプリケーションのデータモデル、コレクション、およびビューを整理できます。カスタムメソッドを簡単に過負荷して拡張することもできます。
2.4サーバーとのシームレスな接続を確立します
Backboneには、サーバーデータとの相互作用ルールの組み込みが組み込まれています（RESTアーキテクチャを理解している場合は、簡単に理解できます）。モデルではデータの同期が自動的に実行されます。フロントエンドの開発者はクライアントデータを動作させるだけで、バックボーンは動作データをサーバーに自動的に同期します。
サーバーデータインターフェイスはフロントエンド開発者に対して透明であり、サーバーとの対話方法を気にする必要がなくなったため、これは非常に興味深いことです。
ただし、サーバーが提供するデータインターフェイスは、バックボーンルールと互換性がある必要があります。新しいプロジェクトでは、この一連のルールを使用してインターフェイスを構築することを試みることができます。しかし、プロジェクトに既に安定したインターフェイスがある場合は、インターフェイスの変更のリスクを心配する可能性があります。
それは問題ではありません。backbone.syncメソッドをオーバーロードすることにより、既存のデータインターフェイスに適応できます。さまざまなクライアント環境では、さまざまなデータ相互作用方法を実装することもできます。たとえば、ユーザーがPCブラウザを介してサービスを使用すると、データはリアルタイムでサーバーに同期されます。ネットワーク環境の問題を考慮して、ユーザーがモバイル端末を介してサービスを使用する場合、最初にデータをローカルデータベースに同期し、必要に応じてサーバーに同期することができます。そして、これらは1つの方法をオーバーロードするだけで実現できます。
2.5インターフェイスイベント管理
MVCでは、インターフェイスのプレゼンテーションとビジネスロジックを完全に分離したいと考えていますが、ユーザー（クリックイベントなど）が生成するインタラクティブなイベントの場合、jqueryのものと同様のバインドメソッドを介してそれらを取得して結合することがよくあります。
Backboneのビューは、ユーザーイベントと実行方法を整然と整理するのに役立ちます。
イベント：{// id "save"で要素をクリックすると、ビューの追加メソッドを実行します '#save'： 'add'、 'mousedown .button'： 'show'、 'mouseover .button'： 'hid'}}式では、イベント名は任意のDOMイベント（Click、Mouseover、Keypressなど）であり、要素はjQuery（タグセレクター、IDセレクター、クラスセレクターなど）によってサポートされる任意のセレクターにすることができます。
ビューは、式のイベントをセレクター要素に自動的に結合します。要素のイベントがトリガーされると、ビューは式の結合メソッドを自動的に呼び出します。
2.6軽量テンプレート分析
テンプレートの解析は、アンダースコアで提供される方法です。バックボーン機能を導入するときに、なぜアンダースコアでメソッドを導入するのですか？この方法は、ビュー構造とロジックをより適切に分離するのに役立つため、アンダースコアはバックボーンが依存しなければならないライブラリです。
テンプレートの解析方法により、JSPページに埋め込まれたJavaコードと同様に、JSコードをHTML構造に組み合わせて埋め込むことができます。
<ul> <％for（var i = 0; i <len; i ++）{％> <li> <％= data [i] .title％> </li> <％}％> </li>テンプレートの解析により、HTML構造を動的に生成するときに文字列をスプライスする必要はありません。さらに重要なことは、ビュー内のHTML構造を独立して管理できることです（たとえば、異なる状態が異なるHTML構造を表示する場合があり、複数の個別のテンプレートファイルを定義し、必要に応じてロードしてレンダリングできます）。
2.7カスタムイベント管理
バックボーンでは、オンまたはオフメソッドを使用して、カスタムイベントをバインドおよび削除できます。どこでも、トリガーメソッドを使用してこれらのバインドされたイベントをトリガーできます。バインドされたイベントが実行されるすべてのメソッドは、次のように実行されます。
var model = new backbone.model（）; //モデルオブジェクトモデルのカスタムイベントカスタムに2つの関数をバインドします。 model.on（ 'custom'、function（p1、p2）{// todo}）; //カスタムイベントをトリガーすると、上にバインドされた2つの関数がmodel.trigger（ 'custom'、 'value1'、 'value2'）と呼ばれます。 //カスタムイベントModel.off（ 'Custom'）でバインドされたすべてのメソッドを削除します。 //カスタムイベントをトリガーしますが、機能は実行されません。イベントの関数は、前のステップmodel.trigger（ 'custom'）で削除されました。jqueryに精通している場合は、jqueryのバインド、バインド、トリガーのメソッドに非常に似ていることがわかります。
さらに、バックボーンは特別なイベント「All」をサポートしています。 「ALL」という名前のイベントがオブジェクトにバインドされると、「ALL」イベントにバインドされたメソッドも、どのイベントがトリガーされたときにトリガーされます。この方法は非常に便利な場合があります。たとえば、「すべて」イベントを通じてオブジェクト状態の変更を聞くことができます。
3。ルーター
単一ページアプリケーションでは、JavaScriptを介したインターフェイスの切り替えと表示を制御し、Ajaxを介してサーバーからデータを取得します。
発生する可能性のある問題は、ユーザーが以前の操作に戻りたい場合、ブラウザの「バック」ボタンと「フォワード」ボタンを習慣的に使用する可能性があることですが、結果は、ユーザーが同じページにいることを知らないためにページ全体が切り替えられることです。
この問題については、ハッシュ（アンカーポイント）を使用してユーザーの現在の場所を記録し、オンハッシュチャンジイベントを通じてユーザーの「フォワード」および「返品」アクションを聞きますが、ブラウザの低いバージョン（IE6など）はOnhashchangeイベントをサポートしていないことがわかりました。
バックボーンはルーティング制御機能を提供します。 Backboneが提供するルーターを介して、単純な表現など、ルーティングアドレスとイベント機能を一緒にバインドできます。
var customrouter = backbone.router.extend（{routes： ''： '' '：' index '、// indexメソッドの実行url hashがルートディレクトリにあるときのindexメソッド：url＃' list '：' getList '、// url hashがリストノードにあるときにゲットリストメソッドを実行する詳細なデータをクエリへのパラメーター：URL＃1001 'ERROR'：「Showerror」// URL Hashが上記のルールと一致しない場合}、function（）{'index'）} {alert（） ：function（error）{alert（ 'error hash：' + error）、}）; var custom = new CustomRouter（）; backbone.history.start（）;このコードをページにコピーして、次のアドレスにアクセスしてみてください（URLがページアドレスを示します）：
urlurl＃listurl＃detail/1001url＃hash1url＃hash2
ブラウザの「バック」と「フォワード」ボタンを使用して、入力したばかりのアドレスに前後に切り替えてください。
URLハッシュが変更されると、バウンドメソッドが実行されることがわかります。未定義のハッシュに遭遇すると、ShowerRorメソッドが実行され、未定義のハッシュがメソッドに渡されます。
Backboneは、デフォルトでハッシュを介してアドレスの変更を記録します。 OnhashChangeをサポートしていない低いバージョンのブラウザの場合、ハッシュの変更はSetInterval Heartbeatを介して監視されるため、ブラウザの互換性の問題を心配する必要はありません。
HTML5 PushState機能をサポートするブラウザの場合、Backboneを使用すると、PushStateを介してパーソナライズされたURLを作成することもできますが、Webサーバーの適応が必要です。
3。バックボーンの適用性
バックボーンはjQueryほど該当しません。大規模または複雑なシングルページWebアプリケーションを構築する予定がある場合、バックボーンがより適切です。
バックボーンをWebサイトページに適用したい場合、ページに複雑なロジックと構造がない場合、これにより、ページがより面倒で維持が困難になるだけです。
プロジェクトが複雑ではありませんが、特定の機能のように（データモデル、ビュー管理、またはルーターである可能性があります）、バックボーンからソースコードのこの部分を抽出できます。バックボーンでは、モジュール間の依存関係が非常に強くなく、それらのいずれかを簡単に取得して使用できます。
4。依存関係ライブラリ
Backboneは、その基本機能、DOM操作、およびAJAXがすべてサードパーティライブラリに依存しているため、独立して使用することはできません。
4.1アンダースコア
（必須）
Underscoreは、開発効率を向上させるための基本的な関数ライブラリです。セット、配列、オブジェクト、および関数の一般的な操作をカプセル化します。 jQueryがDOMオブジェクトをカプセル化するように、Underscoreを介してJavaScript内部オブジェクトに簡単にアクセスして操作できます。
Underscoreは、関数スロットリング、テンプレート分析など、いくつかの非常に実用的な機能方法も提供します。
次の章のアンダースコアの主な方法のいくつかについて詳しく説明しますが、その前に理解する必要があります。アンダースコアは、バックボーンの多くの実装がアンダースコアに基づいているため、バックボーンに依存しなければならないライブラリです。
4.2 jQueryとZepto
（オプション）
私はあなたが間違いなくjQueryに精通していると信じています、それはクロスブラウザーDOMとAjaxフレームワークです。
Zeptoの場合、「モバイルバージョンのjQuery」として理解できます。これは、より小さく、高速で、モバイルデバイスのブラウザでの実行に適しているため、jQueryと同じ構文であるため、jqueryと同じように使用できます。
Zeptoは現在、WebKitカーネルでブラウザのみをサポートしているため、iOS、Adnroid、Symbian、BlackBerry、Meegoなどのほとんどのモバイルシステムと互換性があり、Windows PhoneやFirefox OSの場合はまだサポートされていません。
jqueryとzeptoの構文は同じであるため、バックボーンの場合、jqueryまたはzeptoを使用することに問題はありません（もちろん、両方を同時に使用することはできません）。
Backboneでは、DOMセレクター、DOMイベント、およびAJAXがすべてjQueryメソッドを使用しています。ここでオプションである理由は、バックボーンでビューとajaxデータ同期関数を使用しないため、それらをインポートする必要がないためです。
JqueryやZeptoを使用したくないが、ライブラリがJQUERY構文と同じDOMセレクター、イベント管理、AJAXメソッドを実装する限り、その他またはカスタムライブラリを使用する場合、問題はありません。
Backboneを使用すると、setDomerlibraryメソッドを使用して使用する必要があるサードパーティライブラリを動的に構成できます。
カスタムライブラリにはjQueryと同じ構文を持つメソッドが含まれていますが、グローバル変数は$ではなく、既存の名前を保持する必要があります。現時点では、SetDomyLibraryメソッドによって内部的に参照されるオブジェクトに設定できます。
ユーザーの環境をチェックして、どのライブラリが使用するのに適しているかを決定する必要があります。たとえば、ユーザーがPCブラウザを使用してアクセスする場合、JQUERYをロードし、ユーザーがモバイル端末を介してアクセスする場合は、Zeptoをロードします。