1. Einführung
Vor kurzem mache ich die Front-End-Optimierung eines großen Online-Banking-Projekts. Ich muss eine Fat -Client -Optimierung verwenden. Die allgemeine Idee ist, dass das Front-End AJAX-Anforderung verwendet, um Daten aus dem Back-End zu erhalten, sie im Jason-Format zurückzugeben und dann auf der Seite anzuzeigen. Da dieses System sehr groß ist, erfordert die Fat -Client -Lösung zwangsläufig viel JS -Code auf den Client. Ich denke, es ist für jedes Team sehr unpraktisch, eine große Menge an unstrukturiertem Code aufrechtzuerhalten. Also kam mein Rückgrat in die Augen.
Es bietet eine Möglichkeit, Ihren JS-Code zu strukturieren, sodass Sie Ihren Front-End-JS-Code auf objektorientierte Weise organisieren können. Dies ist, als wenden wir domänengesteuertes Design am vorderen Ende an. Wir können ein sehr großes Projekt per Modul teilen. Jedes Modul kann gemäß den Anforderungen des Rückgrats in Sicht, Modell und Router unterteilt werden.
Mit Backbone können Sie Ihre Daten als Modelle behandeln. Mit Modellen können Sie Daten erstellen, Daten überprüfen, sie zerstören oder auf dem Server speichern. Wenn Operationen auf der Schnittstelle Änderungen der Eigenschaften im Modell verursachen, löst das Modell das Ereignis der Änderung aus. Diese zur Anzeige des Modellstatus verwendeten Ansichten empfangen die Nachricht, dass das Modell die Änderung auslöst, und dann die entsprechende Antwort ausgeben und neue Daten an die Schnittstelle neu rendern. In einer vollständigen Backbone -Anwendung müssen Sie keinen Klebercode schreiben, um Knoten über spezielle IDs aus dem DOM zu erhalten oder HTML -Seiten manuell zu aktualisieren, da sich die Ansichten bei der Änderung des Modells leicht aktualisieren.
2. Merkmale
Backbone ist ein leichtes Front-End-Frontwork, mit dem die Verwaltung einer großen Anzahl von JS auf Seiten strukturiert, eine nahtlose Verbindung zu Servern und Ansichten hergestellt und ein grundlegendes Rahmen für den Aufbau komplexer Anwendungen bereitgestellt wird.
Lassen Sie mich kurz die Hauptmerkmale und Eigenschaften von Backbone erklären:
2.1 Leicht
Der Quellcode von Backbone beträgt nur etwa 1000 Zeilen (nach Dekentierung und leeren Zeilen), die Dateigröße nur 16 KB und die Unterstriche der Abhängigkeitsbibliothek nur 29 KB.
Sie müssen nur ein wenig Zeit verbringen, um die interne Implementierung von Rückgrat leicht zu verstehen. Oder schreiben Sie eine kleine Menge Code, um einige der Rückgrat -Mechanismen zu überlasten. Wenn Sie eine sekundäre Entwicklung basierend auf Rückgrat durchführen möchten, ist dies keine komplizierte Sache.
2.2 strukturiert
Backbone kann die Daten, Logik und Ansichten auf der Seite problemlos entkoppeln und die Codestruktur gemäß Backbone organisieren. Sie können die Dateninteraktion, die Geschäftslogik, die Benutzeroberfläche und die anderen Arbeiten im Projekt mehreren Kollegen zuweisen, um sich gleichzeitig zu entwickeln und sie in geordneter Weise zusammen zu organisieren. Gleichzeitig ist dies sehr hilfreich für die Wartung und Entwicklung großer und komplexer Projekte.
2.3 Vererbungsmechanismus
Im Rückgrat können Module vererbt werden. Sie können die Datenmodelle, Sammlungen und Ansichten in Ihrer Anwendung auf objektorientierte Weise organisieren, um die gesamte Architektur klarer zu machen. Sie können benutzerdefinierte Methoden auch leicht überlasten und erweitern.
2.4 Stellen Sie eine nahtlose Verbindung mit dem Server her
Backbone verfügt über integrierte Interaktionsregeln mit Serverdaten (wenn Sie die REST-Architektur verstehen, können Sie sie leicht verstehen), und die Datensynchronisation werden automatisch im Modell durchgeführt. Front-End-Entwickler müssen nur mit Clientdaten arbeiten, und Backbone synchronisiert die Betriebsdaten automatisch mit dem Server.
Dies ist eine sehr interessante Sache, da die Server-Datenschnittstelle für Front-End-Entwickler transparent ist und sich nicht mehr darum kümmern müssen, wie sie mit dem Server interagieren.
Die vom Server bereitgestellte Datenschnittstelle muss jedoch auch mit den Backbone -Regeln kompatibel sein. Für ein neues Projekt können wir versuchen, diese Regeln zu verwenden, um die Schnittstelle zu erstellen. Wenn Sie jedoch bereits eine Reihe von Schnittstellen in Ihrem Projekt haben, machen Sie sich möglicherweise Sorgen über das Risiko einer Schnittstellenänderung.
Es spielt keine Rolle, dass wir uns an die vorhandene Datenschnittstelle anpassen können, indem wir das Backbone.SYNC -Methode überladen. Für verschiedene Client -Umgebungen können wir auch verschiedene Dateninteraktionsmethoden implementieren. Zum Beispiel: Wenn ein Benutzer einen Dienst über einen PC -Browser verwendet, werden die Daten in Echtzeit mit dem Server synchronisiert. Wenn ein Benutzer einen Dienst über ein mobiles Terminal unter Berücksichtigung der Netzwerkumgebungsprobleme verwendet, können wir die Daten zuerst in die lokale Datenbank synchronisieren und dann gegebenenfalls mit dem Server synchronisieren. Und diese können erreicht werden, indem eine Methode überlastet wird.
2.5 Schnittstellenereignismanagement
In MVC hoffen wir, die Schnittstellenpräsentation und Geschäftslogik vollständig zu trennen, aber für interaktive Ereignisse, die von Benutzern (z. B. Klickereignisse) generiert werden, erhalten und binden wir sie häufig durch Bindmethoden, die denen in JQuery ähneln.
Die Ansicht in Backbone hilft uns, Benutzerereignisse und Ausführungsmethoden ordentlich zu organisieren, wodurch wir nur einen einfachen Ausdruck deklarieren müssen, z. B.:
Ereignisse: {// Führen Sie beim Klicken auf ein Element mit ID "Speichern" die Methode hinzufügen der Ansicht 'Klick #Save' aus: 'hinzufügen', 'MouseDown .button': 'Show', 'Mouseover .button': 'Hide'}In einem Ausdruck kann der Ereignisname ein jedes DOM -Ereignis sein (z. B. Klicken, Mausover, TastePress usw.), und das Element kann jeder von JQuery unterstützte Selektor (z. B. Tag -Selektor, ID -Selektor, Klassenauswahl usw.).
Die Ansicht bindet die Ereignisse im Ausdruck automatisch an das Selektorelement. Wenn das Ereignis des Elements ausgelöst wird, ruft die Ansicht die gebundenen Methoden im Ausdruck automatisch auf.
2.6 Analyse der leichten Vorlagenanalyse
Vorlage Die Parsen ist eine Methode, die in Unterstriche bereitgestellt wird. Warum stelle ich die Methode in Unterstrich vor, wenn ich Backbone -Funktionen einführe? Da diese Methode uns helfen kann, eine bessere separate Ansichtsstruktur und Logik zu sein, und Unterstrich ist eine Bibliothek, auf die sich das Rückgrat verlassen muss.
Mit Templat -Parsing -Methoden können wir den JS -Code in HTML -Strukturen mischen und einbetten, genau wie den Java -Code in JSP -Seiten einbetten:
<ul> <%für (var i = 0; i <len; i ++) {%> <li> <%= Daten [i] .Title%> </li> <%}%> </li>Durch die Analyse von Vorlagen müssen wir keine Strings spleißen, wenn wir dynamisch HTML -Strukturen erzeugen. Noch wichtiger ist, dass wir die HTML -Struktur in der Ansicht unabhängig verwalten können (z. B.: Verschiedene Zustände können unterschiedliche HTML -Strukturen anzeigen. Wir können mehrere separate Vorlagendateien definieren, nach Bedarf laden und rendern).
2.7 benutzerdefinierte Eventmanagement
In Backbone können Sie die Ein- oder Aus -Methode verwenden, um benutzerdefinierte Ereignisse zu binden und zu entfernen. Überall können Sie die Triggermethode verwenden, um diese gebundenen Ereignisse auszulösen, und alle Methoden, die das Ereignis gebunden haben, werden ausgeführt, z. B.:
var model = neues backbone.model (); // Binden Sie zwei Funktionen an benutzerdefinierte Ereignisse im Modellobjektmodell. model.on ('benutzerdefiniert', Funktion (p1, p2) {// Todo}); // das benutzerdefinierte Ereignis auslösen, und die beiden oben genannten Funktionen werden als model.trigger ('benutzerdefiniert', 'value1', 'value2') bezeichnet. // alle im benutzerdefinierten Ereignismodell gebundenen Methoden entfernen. // das benutzerdefinierte Ereignis auslösen, aber es werden keine Funktionen ausgeführt. Die Funktionen des Ereignisses wurden im vorherigen Schrittmodell ('Custom') entfernt.Wenn Sie mit JQuery vertraut sind, werden Sie feststellen, dass sie den Methoden Bind, Unbind und Trigger in JQuery sehr ähnlich sind.
Darüber hinaus unterstützt Backbone eine besondere Veranstaltung "All". Wenn ein Ereignis namens "All" an ein Objekt gebunden ist, wird die in das "All" -Event gebundene Methode auch ausgelöst, wenn ein Ereignis ausgelöst wird. Manchmal kann diese Methode sehr nützlich sein, beispielsweise können wir durch das "All" -Ereignis auf Änderungen des Objektzustands zuhören.
3. Router
In einer einzelnen Seitenanwendung steuern wir das Schalten und Präsentieren der Schnittstelle über JavaScript und erhalten Daten vom Server über AJAX.
Das Problem, das sich möglicherweise ergeben kann, ist, dass der Benutzer, wenn er zur vorherigen Operation zurückkehren möchte, gewöhnlich die Schaltflächen "Back" und "Forward" des Browsers verwenden kann. Das Ergebnis ist jedoch, dass die gesamte Seite umgeschaltet ist, weil der Benutzer nicht weiß, dass er sich auf derselben Seite befindet.
Für dieses Problem verwenden wir häufig einen Hash (Anchor Point), um den aktuellen Standort des Benutzers aufzuzeichnen und die Aktionen des Benutzers durch das OnhasHchange -Ereignis "Forward" und "Return" zu hören. Wir haben jedoch festgestellt, dass einige niedrigere Versionen von Browsern (wie IE6) das Onhashchange -Ereignis nicht unterstützen.
Backbone bietet Routing -Steuerfunktion. Durch den von Backbone bereitgestellten Router können wir die Routing -Adresse und die Ereignisfunktion durch einen einfachen Ausdruck zusammenbringen, zum Beispiel:
var customrouter = backbone.router.extend ({Routes: {'': 'index', // Indexmethode ausführen, wenn url Hash im Stammverzeichnis ist: url# 'liste': 'getlist', // Ausführen von GetList -Methode ausführen, wenn Url -Hash in der Liste der Listen -Noten: url# detail. Detaillierte Daten als Parameter für Abfragemethode: URL#LISTE/1001 '*ERROR': 'Duschror' // Fehlermethode ausführen, wenn URL -Hash nicht mit den obigen Regeln übereinstimmt. Funktion (Fehler) {alert ('Fehler Hash:' + Fehler); var custom = new CustomRouter (); Backbone.history.start ();Bitte kopieren Sie diesen Code auf Ihre Seite und greifen nacheinander auf die folgende Adresse zu (wobei die URL Ihre Seitenadresse angibt):
Urlurl#listurl#detail/1001url#Hash1url#Hash2
Bitte versuchen Sie, die Schaltflächen "Back" und "Vorwärts" des Browsers zu verwenden, um die von Ihnen gerade eingegebene Adresse hin und her zu schalten.
Sie können sehen, dass die gebundene Methode ausgeführt wird, wenn sich der URL -Hash ändert. Wenn ein undefinierter Hash auftritt, wird die Duschror -Methode ausgeführt und der undefinierte Hash wird an die Methode übergeben.
Backbone erfasst die Adressänderungen standardmäßig über Hash. Für Browser mit niedrigerer Version, die OnhashChange nicht unterstützen, werden die Hash -Änderungen über den SetInterval -Herzschlag überwacht, sodass Sie sich keine Sorgen um die Kompatibilitätsprobleme von Browser machen müssen.
Bei Browsern, die die HTML5 -Pushstate -Funktion unterstützen, ermöglicht Backbone auch, personalisierte URLs über PushState zu erstellen. Dies erfordert jedoch eine Anpassung Ihres Webservers.
3. Anwendbarkeit von Rückgrat
Backbone ist nicht so anwendbar wie JQuery. Wenn Sie vorhaben, eine große oder komplexe einseitige Webanwendung zu erstellen, ist das Backbone besser geeignet.
Wenn Sie Backbone auf Ihre Website -Seite anwenden möchten und auf der Seite keine komplexe Logik und Struktur vorhanden sind, wird Ihre Seite nur umständlich und schwer zu pflegen.
Wenn Ihr Projekt nicht kompliziert ist, Sie jedoch zutiefst ein bestimmtes Merkmal von IT (möglicherweise ein Datenmodell, ein Ansichtsmanagement oder ein Router sein können), können Sie diesen Teil des Quellcodees aus dem Rückgrat extrahieren, da die Abhängigkeiten zwischen Modulen nicht sehr stark sind und Sie eine davon leicht erhalten und verwenden können.
4. Abhängigkeitsbibliothek
Sie können das Backbone nicht unabhängig voneinander verwenden, da seine grundlegenden Funktionen, DOM-Operationen und AJAX alle auf Bibliotheken von Drittanbietern beruhen.
4.1 Unterstrich
(Erforderlich)
Unscore ist eine grundlegende Funktionsbibliothek zur Verbesserung der Entwicklungseffizienz. Es fasst gemeinsame Operationen an Sätzen, Arrays, Objekten und Funktionen zusammen. Genau wie JQuery DOM -Objekte zusammenfasst, können Sie mit Unterstrichen leicht auf JavaScript -interne Objekte zugreifen und manipulieren.
Unscore bietet auch einige sehr praktische Funktionsmethoden wie Funktionsdrosseln, Vorlagenanalyse usw.
Ich werde im nächsten Kapitel Details zu einigen der Hauptmethoden in Unscore eingehen. Vorher müssen Sie jedoch verstehen: Unterstrich ist eine Bibliothek, auf die Backbone stützen muss, da viele Implementierungen in Backbone auf Unterstrich basieren.
4.2 JQuery und Zepto
(Optional)
Ich glaube, Sie werden auf jeden Fall mit JQuery vertraut sein, es ist ein Cross-Browser-Dom- und Ajax-Framework.
Für Zepto können Sie es als "mobile Version von JQuery" verstehen, da es kleiner, schneller und besser zum Ausführen von Browsern von mobilen Geräten geeignet ist. Es ist dieselbe Syntax wie JQuery, sodass Sie es so verwenden können, wie Sie es mit JQuery tun würden.
Zepto unterstützt derzeit nur Browser mit dem Webkit -Kernel und ist daher mit den meisten mobilen Systemen wie iOS, Adnroid, Symbian, Blackberry und Meego kompatibel, während es für Windows Phone oder Firefox OS noch nicht unterstützt wird.
Da JQuery und Zepto -Syntax für Backbone gleich sind, haben Sie kein Problem damit, JQuery oder Zepto zu verwenden (natürlich können Sie beides nicht gleichzeitig verwenden).
In Backbone verwenden der DOM -Selektor, DOM -Ereignis und AJAX die JQuery -Methode. Der Grund, warum sie hier optional sind, ist, dass Sie die Funktion der Ansicht und der AJAX -Datensynchronisationsfunktion in Backbone nicht verwenden, dann müssen Sie sie nicht importieren.
Wenn Sie nicht JQuery oder Zepto verwenden möchten, sondern andere oder benutzerdefinierte Bibliotheken verwenden, solange Ihre Bibliothek denselben DOM -Selektor-, Ereignismanagement- und AJAX -Methoden wie JQuery -Syntax implementiert, wird es kein Problem geben.
Mit Backbone können Sie die Bibliotheken von Drittanbietern dynamisch konfigurieren, die Sie über die SetDomLibrary-Methode verwenden müssen, die häufig für:
Obwohl Ihre benutzerdefinierte Bibliothek Methoden mit derselben Syntax wie JQuery enthält, ist die globale Variable nicht $ und Sie möchten den vorhandenen Namen behalten. Zu diesem Zeitpunkt können Sie es auf das von der SetDomlibrary -Methode intern verwiesene Objekt einstellen.
Sie möchten die Umgebung des Benutzers überprüfen, um zu entscheiden, welche Bibliothek besser für die Verwendung geeignet ist. Zum Beispiel: Wenn der Benutzer mit einem PC -Browser zugreift, laden Sie JQuery und laden Sie Zepto.