JavaScript の Backbone.js フレームワークを使用するためのいくつかの提案_基礎知識

Backbone は、複雑な Javascript アプリケーションにモデル、コレクション、ビューの構造を提供します。このモデルは、キーと値のデータとカスタム イベントをバインドするために使用されます。コレクションには、列挙可能な関数の豊富な API が装備されており、ビューはイベント処理関数を宣言し、RESTful JSON インターフェイスを通じてアプリケーションに接続できます。
大量の JavaScript を含む Web アプリケーションを開発する場合、最初に行う必要があることの 1 つは、DOM オブジェクトへのデータの追加を停止することです。 複雑な jQuery セレクターとコールバック関数を使用して、HTML UI、JavaScript ロジック、データ間の同期の維持を含む Javascript アプリケーションを複雑にすることなく作成できます。 しかし、クライアント アプリケーションにとって、優れたアーキテクチャには多くの利点があります。
Backbone はデータをモデルとして提示し、モデルを作成し、検証して破棄し、サーバーに保存することもできます。 UI の変更によりモデル プロパティが変更されると、モデルは「変更」イベントをトリガーし、モデル データを表示するすべてのビューがこのイベントの通知を受け取り、ビューが再レンダリングされます。 HTML を手動で更新するために、特定の ID を持つ要素を DOM で検索する必要はありません。 —モデルが変わるとビューも自動的に変わります。
backbone.js は、キーと値のバインディングとカスタム イベント処理にモデルを使用し、列挙関数用の豊富な API セットを提供するコレクションを使用し、イベント処理と既存のアプリケーションとの統合にビューを使用して、RESTful JSON を介して対話する Web 開発フレームワークを提供します。 jqueryとアンダースコアをベースにしたjsフレームワークです。

バックボーンは本来、自分の意見を主張するものではありません。ドキュメントから得られる最も基本的なアイデアは、backbone.js が提供するツールを使用して、必要なことを何でも行うというものです。

非常に多くの異なるユースケースがあり、アプリの作成を開始するのが非常に簡単であるため、これは素晴らしいことです。このアプローチにより、開始時の間違いを最小限に抑えることができます。

何かが間違っている場合、私たちはそれを発見し、修正する方法を見つけなければなりません。

次のヒントは、Backbone.js の開発時に発生したエラーを回避するのに役立ちます:

1. ビューはデータレスです

データはビューではなくモデル (モデル) に属します。次回、データをビュー (または最悪の場合は DOM) に保存していることに気づいたら、すぐにそれをモデルに移動してください。

モデルがない場合は、非常に簡単に作成できます。

this.viewState = new Backbone.Model();

他に何もする必要はありません。

データの変更イベントをリッスンしたり、サーバーとオンラインで同期したりすることもできます。

2. DOM イベントはモデルのみを変更します

ボタンのクリックなど、DOM イベントがトリガーされたときに、ビュー自体を変更させないでください。このモデルを変更します。

状態を変更せずに DOM を変更するということは、状態が DOM に保存されたままであることを意味します。このルールにより一貫性が保たれます。

「さらに読み込む」エッジをクリックした場合は、ビューを展開せず、モデルを変更するだけです。

this.viewState.set('readMore', true);

わかりましたが、ビューはいつ変更されますか?良い質問ですね。次のルールで答えられます。

3.DOM はモデルが変更された場合にのみ変更されます

素晴らしいイベントですので、ぜひご利用ください。最も簡単な方法は、変更のたびにトリガーすることです。

this.listenTo(this.stateModel, 'change', this.render);

より良いアプローチは、必要な場合にのみ変更をトリガーすることです。

this.listenTo(this.stateModel, 'change:readMore', this.renderReadMore);

このビューは常にそのモデルとの一貫性を保ちます。このビューは、モデルがどのように変更されても、コマンド インターフェイスからのアクションやデバッグ情報に応じて常に更新されます。

4. バインドされたものはバインドを解除する必要があります

「remove」メソッドを使用してビューを DOM から削除する場合、バインドされているすべてのイベントからビューをバインド解除する必要があります。

「on」を使用してバインドする場合は、「off」を使用してバインドを解除する必要があります。バインドを解除しないと、メモリ コレクターはメモリを解放できず、アプリケーションのパフォーマンスが低下します。

これが「listenTo」の由来です。ビューのバインドとバインド解除を追跡します。 Backbone は、これを DOM から移動する前に「stopListening」を実行します。

// Ok:
this.stateModel.on('change:readMore', this.renderReadMore, this);
 
// 神奇:
this.listenTo(this.stateModel, 'change:readMore', this.renderReadMore);

5. チェーン書き込みを続けます

レンダリング メソッドと削除メソッドからは常に「this」を返します。これにより、メソッド チェーンを作成できるようになります。

view.render().$el.appendTo(otherElement);

これはメソッドです。破らないでください。

6. イベントはコールバックよりも優れています

応答イベントを待つ方が、折り返し電話するよりも良いです

バックボーン モデルはデフォルトで「同期」イベントと「エラー」イベントをトリガーするため、これらのイベントをコールバックの代わりに使用できます。これら 2 つのシナリオを考えてみましょう。

model.fetch({
 success: handleSuccess,
 error: handleError
});
//这种更好：
view.listenTo(model, 'sync', handleSuccess);
view.listenTo(model, 'error', handleError);
model.fetch();

モデルがいつフェッチされるかは関係なく、handleSucess/handleError が呼び出されます。

7. ビューにはスコープ

があります。

ビューはそれ自体以外の DOM を操作してはなりません。

ビューは、'el' や jquery オブジェクト '$el' などの独自の DOM 要素を参照します

つまり、jQuery を直接使用しないでください。

$('.text').html('Thank you');

DOM 要素の選択を独自のドメインに制限してください:

this.$('.text').html('Thank you');
 
// 这等价于
// this.$el.find('.text').html('Thank you');

如果你需要更新一个别的不同的视图，只要触发一个事件，让别的视图去做。你也可以使用Backbone的全局Pub/Sub系统。

例如，我们阻止页面滚动：

var BodyView = Backbone.View.extend({
 initialize: function() {
  this.listenTo(Backbone, 'prevent-scroll', this.preventScroll);
 },
 
 preventScroll: function(prevent) {
  // .prevent-scroll 有下面的CSS规则： overflow: hidden;
  this.$el.toggleClass('prevent-scroll', prevent);
 }
});
 
// 现在从任何其他地方调用:
Backbone.trigger('prevent-scroll', true);  // 阻止 scrolling
Backbone.trigger('prevent-scroll', false); // 允许 scrolling

还有一件事

只要读读backbone的源代码，你会学到更多。看一看backbone.js的源代码，然后看看这些神奇的事情是怎么实现的。这个库非常小，而且可读性很好，整个读完不会超过10分钟的。

这些小贴士帮助我们写干净的，更好的可读的代码。