1. Einleitung
Kürzlich führe ich eine Front-End-Optimierung für ein großes Online-Banking-Projekt durch, das die Verwendung eines Thick-Clients erfordert. Die allgemeine Idee ist, dass das Front-End Daten über Ajax an das Back-End anfordert und zurückgibt im Jason-Format und zeigt es dann auf der Seite an. Da dieses System sehr groß ist, erfordert die Thick-Client-Lösung zwangsläufig das Schreiben einer großen Menge JS-Code auf der Clientseite. Ich denke, dass es für jedes Team sehr unpraktisch ist, eine große Menge unstrukturierten Codes zu verwalten. Also kam BackBone in mein Blickfeld.
Es bietet Ihnen die Möglichkeit, Ihren JS-Code zu strukturieren und Ihren Front-End-JS-Code objektorientiert zu organisieren. Das ist so, als würde man Domain Driven Design auf das Frontend anwenden. Wir können ein sehr großes Projekt in Module unterteilen. Jedes Modul kann entsprechend den Anforderungen von BackBone in Ansicht, Modell und Router unterteilt werden.
Über das Backbone können Sie Ihre Daten als Modelle behandeln. Mithilfe von Modellen können Sie Daten erstellen, Datenvalidierungen durchführen, vernichten oder auf dem Server speichern. Wenn Operationen an der Schnittstelle zu Änderungen an Attributen im Modell führen, löst das Modell das Änderungsereignis aus. Die zur Anzeige des Modellstatus verwendeten Ansichten empfangen die vom Modell ausgelöste Änderungsnachricht, geben dann eine entsprechende Antwort aus und rendern sie erneut neue Daten zur Schnittstelle. In einer vollständigen Backbone-Anwendung müssen Sie keinen Glue-Code schreiben, um Knoten über spezielle IDs aus dem DOM abzurufen, oder die HTML-Seite manuell aktualisieren, da sich die Ansichten einfach selbst aktualisieren, wenn sich das Modell ändert.
2. Funktionen
Backbone ist ein leichtes Front-End-Framework, das verwendet wird, um eine große Menge an JS in Seiten strukturell zu verwalten, nahtlose Verbindungen mit Servern und Ansichten herzustellen und ein grundlegendes Framework für die Erstellung komplexer Anwendungen bereitzustellen.
Lassen Sie mich kurz die Hauptmerkmale und Eigenschaften von Backbone erläutern:
2.1 Leichtgewicht
Der Quellcode von Backbone umfasst nur etwa 1.000 Zeilen (nach Entfernen von Kommentaren und Leerzeilen) und die Dateigröße beträgt nur 16 KB. Einschließlich der abhängigen Bibliothek Underscore beträgt sie nur 29 KB.
Sie müssen nur ein wenig Zeit aufwenden, um die interne Implementierung von Backbone zu verstehen, oder eine kleine Menge Code schreiben, um einige der Backbone-Mechanismen zu überschreiben. Dies ist keine komplizierte Angelegenheit.
2.2 Struktur
Backbone kann die Daten, Logik und Ansichten auf der Seite einfach entkoppeln und die Codestruktur entsprechend Backbone organisieren. Sie können die Dateninteraktion, Geschäftslogik, Benutzeroberfläche usw. im Projekt mehreren Kollegen zuweisen Gleichzeitige Entwicklung. Und kann in geordneter Weise organisiert werden. Gleichzeitig ist dies sehr hilfreich für die Wartung und Entwicklung großer und komplexer Projekte.
2.3 Vererbungsmechanismus
In Backbone können Sie die Datenmodelle, Sammlungen und Ansichten in der Anwendung objektorientiert organisieren, um die gesamte Architektur übersichtlicher zu gestalten.
2.4 Stellen Sie eine nahtlose Verbindung mit dem Server her
Backbone verfügt über eine Reihe integrierter Interaktionsregeln mit Serverdaten (wenn Sie die REST-Architektur verstehen, können Sie sie leicht verstehen), und die Datensynchronisierungsarbeit wird automatisch im Modell und nur vom Front-End-Entwickler durchgeführt Wenn Sie Vorgänge an Clientdaten ausführen, synchronisiert Backbone die bearbeiteten Daten automatisch mit dem Server.
Dies ist eine sehr interessante Sache, da die Serverdatenschnittstelle für Front-End-Entwickler transparent ist und sie sich keine Gedanken mehr über die Interaktion mit dem Server machen müssen.
Allerdings muss die vom Server bereitgestellte Datenschnittstelle auch mit den Backbone-Regeln kompatibel sein. Für ein neues Projekt können wir versuchen, diesen Regelsatz zum Aufbau der Schnittstelle zu verwenden. Wenn Ihr Projekt jedoch bereits über einen stabilen Satz an Schnittstellen verfügt, sind Sie möglicherweise besorgt über die Risiken einer Schnittstellenänderung.
Es spielt keine Rolle, wir können uns an die vorhandene Datenschnittstelle anpassen, indem wir die Backbone.sync-Methode überladen. Wir können auch verschiedene Dateninteraktionsmethoden für verschiedene Clientumgebungen implementieren. Wenn Benutzer beispielsweise Dienste über einen PC-Browser nutzen, werden die Daten in Echtzeit mit dem Server synchronisiert. Wenn Benutzer Dienste über mobile Endgeräte nutzen, können wir die Daten unter Berücksichtigung von Netzwerkumgebungsproblemen zunächst mit der lokalen Datenbank synchronisieren Synchronisieren Sie es dann zum richtigen Zeitpunkt mit dem Server. Und diese können durch einfaches Überladen einer Methode erreicht werden.
2.5 Schnittstellen-Ereignismanagement
In MVC hoffen wir, die Schnittstellendarstellung und die Geschäftslogik vollständig zu trennen. Für benutzergenerierte interaktive Ereignisse (z. B. Klickereignisse) erhalten und binden wir sie jedoch häufig über die Bind-Methode in jQuery.
Ansichten in Backbone helfen uns dabei, Benutzerereignisse und Ausführungsmethoden geordnet zu organisieren, sodass wir lediglich einen einfachen Ausdruck deklarieren müssen, z. B.:
events: {
// 单击id为”save”的元素时，执行视图的add方法
'click #save': 'add',
'mousedown .button': 'show',
'mouseover .button': 'hide'
}
在表达式中，事件名称可以是任意的DOM事件（如click、mouseover、keypress等），元素可以是jQuery支持的任意选择器（如标签选择器、id选择器、class选择器等）。
视图会自动将表达式中的事件绑定到选择器元素，当元素的事件被触发后，视图会自动调用表达式中绑定的方法。
2.6 轻量级模板解析
模板解析是Underscore中提供的一个方法。为什么我要在介绍Backbone特性时引入Underscore中的方法？因为该方法能帮助我们更好地分离视图结构和逻辑，且Underscore是Backbone必须依赖的库。
模板解析方法能允许我们在HTML结构中混合嵌入JS代码，就像在JSP页面中嵌入Java代码一样：
<ul>
<% for(var i = 0; i < len; i++) { %>
<li><%=data[i].title%></li>
<% } %>
</li>
通过模板解析，我们不需要在动态生成HTML结构时拼接字符串，更重要的是，我们可以将视图中的HTML结构独立管理（例如：不同的状态可能会显示不同的HTML结构，我们可以定义多个单独的模板文件，按需加载和渲染即可）。
2.7 自定义事件管理
在Backbone中，你可以使用on或off方法绑定和移除自定义事件。在任何地方，你都可以使用trigger方法触发这些绑定的事件，所有绑定过该事件的方法都会被执行，如：
var model = new Backbone.Model();
// 在model对象中向自定义事件custom绑定两个函数
model.on('custom', function(p1, p2) {
// todo
});
model.on('custom', function(p1, p2) {
// todo
});
// 触发custom事件，将调用上面绑定的两个函数
model.trigger('custom', 'value1', 'value2');
// 移除custom事件中绑定的所有方法
model.off('custom');
// 触发custom事件，但不会执行任何函数，已经事件中的函数已经在上一步被移除
model.trigger('custom');
如果你熟悉jQuery，你会发现它们与jQuery中的bind、unbind和trigger方法非常类似。
另外，Backbone支持一个特殊事件”all”，当在一个对象中绑定了名为”all”的事件后，该对象在触发任何事件时，都会同时触发”all”事件中绑定的方法。有时这种方法会非常有用，例如我们可以通过”all”事件监听对象状态的变化。
3.路由器
在单页应用中，我们通过JavaScript来控制界面的切换和展现，并通过AJAX从服务器获取数据。
可能产生的问题是，当用户希望返回到上一步操作时，他可能会习惯性地使用浏览器“返回”和“前进”按钮，而结果却是整个页面都被切换了，因为用户并不知道他正处于同一个页面中。
对于这个问题，我们常常通过Hash（锚点）的方式来记录用户的当前位置，并通过onhashchange事件来监听用户的“前进”和“返回”动作，但我们发现一些低版本的浏览器（例如IE6）并不支持onhashchange事件。
Backbone提供了路由控制功能，通过Backbone提供的路由器，我们能通过一个简单的表达式将路由地址和事件函数绑定在一起，例如：
var CustomRouter = Backbone.Router.extend({
routes : {
'' : 'index', // 当URL Hash在根目录时执行index方法：url#
'list' : 'getList', // 当URL Hash在list节点时执行getList方法：url#list
'detail/:id' : 'query', // 当URL Hash在detail节点时执行query方法，并将detail后的数据作为参数传递给query方法：url#list/1001
'*error' : 'showError' // 当URL Hash不匹配以上规则时, 执行error方法
},
index : function() {
alert('index');
},
getList : function() {
alert('getList');
},
query : function(id) {
alert('query id: ' + id);
},
showError : function(error) {
alert('error hash: ' + error);
},
});
var custom = new CustomRouter();
Backbone.history.start();
请尝试将这段代码复制到你的页面中，并依次访问以下地址（其中URL表示你的页面地址）：
URL URL#list URL#detail/1001 URL#hash1 URL#hash2
Bitte versuchen Sie es erneut, indem Sie mit den Schaltflächen „Zurück“ und „Vorwärts“ des Browsers zwischen den soeben eingegebenen Adressen hin und her wechseln.
Sie können sehen, dass die gebundene Methode ausgeführt wird, wenn sich der URL-Hash ändert. Wenn ein undefinierter Hash auftritt, wird die showError-Methode ausgeführt und der undefinierte Hash an diese Methode übergeben.
Backbone zeichnet Adressänderungen standardmäßig über Hash auf. Bei Browsern niedrigerer Versionen, die onhashchange nicht unterstützen, werden Hash-Änderungen über setInterval Heartbeat überwacht, sodass Sie sich keine Sorgen über Browserkompatibilitätsprobleme machen müssen.
Für Browser, die die HTML5-PushState-Funktion unterstützen, ermöglicht Backbone auch die Erstellung personalisierter URLs über pushState, dies erfordert jedoch einige Anpassungen auf Ihrem Webserver.
3. Anwendbarkeit von Backbone
Backbone ist nicht so anpassungsfähig wie jQuery. Wenn Sie die Erstellung einer großen oder komplexen einseitigen Webanwendung vorbereiten, ist Backbone perfekt.
Wenn Sie Backbone auf die Seite Ihrer Website anwenden möchten und die Seite keine komplexe Logik und Struktur aufweist, wird Ihre Seite dadurch nur umständlicher und schwieriger zu warten.
Wenn Ihr Projekt nicht komplex ist, Ihnen aber eine bestimmte Funktion davon wirklich gefällt (vielleicht das Datenmodell, die Ansichtsverwaltung oder der Router), können Sie diesen Teil des Quellcodes aus Backbone extrahieren, da in Backbone jeweils die Abhängigkeiten zwischen Module sind nicht sehr stark und Sie können eines der Module problemlos erwerben und verwenden.
4. Abhängige Bibliotheken
Sie können Backbone nicht unabhängig verwenden, da seine Grundfunktionen, DOM-Operationen und AJAX alle auf Bibliotheken von Drittanbietern basieren.
4.1 Unterstrich
(erforderlich)
Underscore ist eine grundlegende Funktionsbibliothek zur Verbesserung der Entwicklungseffizienz. Sie kapselt allgemeine Vorgänge für Sammlungen, Arrays, Objekte und Funktionen. Genauso wie jQuery DOM-Objekte kapselt, können Sie über Underscore problemlos auf JavaScript-interne Objekte zugreifen und diese bedienen.
Underscore bietet auch einige sehr praktische Funktionsmethoden, wie z. B. Funktionsdrosselung, Vorlagenanalyse usw.
Einige der Hauptmethoden in Underscore werde ich im nächsten Kapitel ausführlich vorstellen, aber vorher müssen Sie verstehen: Underscore ist eine Bibliothek, auf die sich Backbone verlassen muss, da viele Implementierungen in Backbone auf Underscore basieren.
4.2 jQuery und Zepto
(optional)
Ich glaube, Sie kennen jQuery. Es handelt sich um ein browserübergreifendes DOM- und AJAX-Framework.
Für Zepto kann man es sich als die „mobile Version von jQuery“ vorstellen, da es kleiner, schneller und besser für die Ausführung im Browser mobiler Endgeräte geeignet ist. Es hat die gleiche Syntax wie jQuery, sodass Sie es wie folgt verwenden können jQuery.
Zepto unterstützt derzeit nur Webkit-basierte Browser und ist daher mit den meisten mobilen Systemen wie iOS, Adnroid, Symbian, Blackberry und Meego kompatibel. Windows Phone oder Firefox OS werden jedoch noch nicht unterstützt.
Da jQuery und Zepto die gleiche Syntax haben, gibt es für Backbone kein Problem, ob Sie jQuery oder Zepto verwenden (natürlich können Sie nicht beide gleichzeitig verwenden).
In Backbone verwenden DOM-Selektoren, DOM-Ereignisse und AJAX alle jQuery-Methoden. Der Grund dafür, dass sie hier optional sind, besteht darin, dass Sie sie nicht importieren müssen, wenn Sie die Ansichten und AJAX-Datensynchronisierungsfunktionen in Backbone nicht verwenden.
Wenn Sie nicht jQuery oder Zepto verwenden möchten, sondern eine andere oder benutzerdefinierte Bibliothek verwenden möchten, ist dies kein Problem, solange Ihre Bibliothek dieselben DOM-Selektoren, Ereignisverwaltung und AJAX-Methoden wie die jQuery-Syntax implementiert.
Mit Backbone können Sie die Bibliotheken von Drittanbietern, die Sie verwenden müssen, dynamisch über die setDomLibrary-Methode konfigurieren. Diese Situation wird häufig verwendet:
Obwohl Ihre benutzerdefinierte Bibliothek Methoden mit derselben Syntax wie jQuery enthält, sind die globalen Variablen nicht $ und Sie möchten die vorhandene Benennung beibehalten. Zu diesem Zeitpunkt können Sie es über die setDomLibrary-Methode auf das Objekt festlegen, auf das Backbone intern verweist.
Sie möchten entscheiden, welche Bibliothek besser geeignet ist, indem Sie die Umgebung des Benutzers untersuchen. Zum Beispiel: Wenn der Benutzer über einen PC-Browser zugreift, wird jQuery geladen; wenn der Benutzer über ein mobiles Endgerät zugreift, wird Zepto geladen.
