Einige Vorschläge zur Verwendung des Backbone.js-Frameworks von JavaScript_Grundkenntnisse

Backbone bietet eine Struktur aus Modellen, Sammlungen und Ansichten für komplexe Javascript-Anwendungen. Das Modell wird zum Binden von Schlüsselwertdaten und benutzerdefinierten Ereignissen verwendet. Die Sammlung ist mit einer umfangreichen API aufzählbarer Funktionen ausgestattet. Die Ansicht kann Ereignisverarbeitungsfunktionen deklarieren und über eine RESTful-JSON-Schnittstelle eine Verbindung zur Anwendung herstellen.
Wenn Sie Webanwendungen entwickeln, die viel JavaScript enthalten, müssen Sie als Erstes aufhören, Daten an DOM-Objekte anzuhängen. Erstellen Sie ohne Komplexität Javascript-Anwendungen mit komplexen jQuery-Selektoren und Rückruffunktionen, einschließlich der Aufrechterhaltung der Synchronisierung zwischen HTML-Benutzeroberfläche, Javascript-Logik und Daten. Aber für Client-Anwendungen hat eine gute Architektur oft viele Vorteile.
Backbone stellt Daten als Modelle dar, und Sie können Modelle erstellen, validieren und zerstören und sie sogar auf dem Server speichern. Wenn Änderungen in der Benutzeroberfläche zu einer Änderung der Modelleigenschaften führen, löst das Modell das Ereignis „Änderung“ aus. Alle Ansichten, die Modelldaten anzeigen, erhalten Benachrichtigungen über dieses Ereignis, und die Ansichten werden dann neu gerendert. Sie müssen das DOM nicht nach dem Element mit einer bestimmten ID durchsuchen, um den HTML-Code manuell zu aktualisieren. – Sobald sich das Modell ändert, ändert sich die Ansicht automatisch.
backbone.js bietet ein Webentwicklungs-Framework, das Modelle für die Schlüsselwertbindung und benutzerdefinierte Ereignisverarbeitung verwendet, Sammlungen verwendet, um einen umfangreichen Satz von APIs für Aufzählungsfunktionen bereitzustellen, und Ansichten für die Ereignisverarbeitung und Integration mit vorhandenen Anwendungen verwendet, die über RESTful JSON interagieren Schnittstelle. Es ist ein js-Framework, das auf jquery und underscore basiert.

Backbone ist von Natur aus nicht eigensinnig. Die grundlegendste Idee, die Sie der Dokumentation entnehmen können, ist: Verwenden Sie die von backbone.js bereitgestellten Tools, um zu tun, was Sie wollen.

Das ist großartig, weil es so viele verschiedene Anwendungsfälle gibt und es sehr einfach ist, mit dem Schreiben von Apps zu beginnen. Dieser Ansatz kann verhindern, dass wir zu Beginn möglichst wenige Fehler machen.

Wenn etwas nicht stimmt, müssen wir es entdecken und einen Weg finden, es zu korrigieren.

Die folgenden Tipps können Ihnen helfen, die Fehler zu vermeiden, die bei der Entwicklung von Backbone.js aufgetreten sind:

1. Ansichten sind datenlos

Daten gehören zu Modellen (Modellen), nicht zu Ansichten. Wenn Sie das nächste Mal feststellen, dass Sie Daten in einer Ansicht (oder schlimmer noch: im DOM) speichern, verschieben Sie sie sofort in das Modell.

Wenn Sie kein Modell haben, ist es ganz einfach, eines zu erstellen:

this.viewState = new Backbone.Model();

Es muss eigentlich nichts weiter getan werden.

Sie können auf Änderungsereignisse in Ihren Daten warten und diese sogar online mit Ihrem Server synchronisieren.

2. DOM-Ereignisse ändern nur das Modell

Wenn ein DOM-Ereignis ausgelöst wird, z. B. das Klicken auf eine Schaltfläche, darf die Ansicht selbst nicht geändert werden. Ändern Sie dieses Modell.

Wenn Sie das DOM ändern, ohne den Status zu ändern, wird Ihr Status weiterhin im DOM gespeichert. Mit dieser Regel bleiben Sie konsistent.

Wenn auf eine „Mehr laden“-Kante geklickt wird, erweitern Sie nicht die Ansicht, sondern ändern Sie einfach das Modell:

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

Okay, aber wann ändert sich die Ansicht? Gute Frage, beantwortet durch die nächste Regel.

3.DOM ändert sich nur, wenn sich das Modell ändert

Veranstaltungen sind großartig, nutzen Sie sie bitte. Der einfachste Weg besteht darin, es nach jeder Änderung auszulösen.

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

Ein besserer Ansatz besteht darin, Änderungen nur bei Bedarf auszulösen.

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

Diese Ansicht bleibt immer im Einklang mit ihrem Modell. Diese Ansicht wird immer aktualisiert, unabhängig davon, wie sich das Modell ändert: als Reaktion auf Aktionen von der Befehlsschnittstelle oder Debugging-Informationen.

4. Gebundene Dinge müssen ungebunden sein

Wenn eine Ansicht mit der Methode „remove“ aus dem DOM entfernt wird, muss sie von allen gebundenen Ereignissen entbunden werden.

Wenn Sie zum Binden „Ein“ verwenden, liegt es in Ihrer Verantwortung, zum Aufheben der Bindung „Aus“ zu verwenden. Ohne die Aufhebung der Bindung kann der Speicherkollektor den Speicher nicht freigeben, was zu einer Leistungseinbuße Ihrer Anwendung führt.

Daher kommt „listenTo“. Es verfolgt das Binden und Lösen von Ansichten. Backbone führt „stopListening“ aus, bevor es aus dem DOM verschoben wird.

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

5. Kettenschreiben fortsetzen

Gib immer „this“ von Render- und Remove-Methoden zurück. Dadurch können Sie Methodenketten schreiben.

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

Das ist die Methode, brechen Sie sie nicht.

6. Events sind besser als Rückrufe

Auf ein Antwortereignis zu warten ist besser als zurückzurufen

Backbone-Modelle lösen standardmäßig „Sync“- und „Fehler“-Ereignisse aus, sodass diese Ereignisse anstelle von Rückrufen verwendet werden können. Betrachten Sie diese beiden Szenarien.

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

Es spielt keine Rolle, wann das Modell abgerufen wird, handleSucess/handleError wird aufgerufen.

7. Ansichten haben Umfang

Eine Ansicht sollte niemals das DOM anders als sich selbst manipulieren.

View verweist auf sein eigenes DOM-Element, z. B. „el“ oder das JQuery-Objekt „$el“

Das bedeutet, dass Sie jQuery niemals direkt verwenden sollten:

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

Bitte beschränken Sie die Auswahl der DOM-Elemente auf Ihre eigene Domain:

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分钟的。

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