Das Rückgrat muss sich auf unterstriche.js verlassen, die verwendet werden sollen. Es muss Funktionen in Unterstrich verwenden, um die grundlegenden Vorgänge von Zugriff auf Seitenelemente und Verarbeitungselemente abzuschließen.
Hinweis: Backbone funktioniert gut mit anderen JS -Bibliotheken, daher handelt es sich um eine Bibliothek, kein Framework.
Unscore erweitert das native Objekt nicht, sondern ruft die _ () -Methode auf, um zu verkapulieren. Sobald die Kapselung abgeschlossen ist, wird das JS -Objekt zu einem Unterstrichobjekt. Sie können die Daten auch im nativen JS -Objekt über die Value () -Methode des Unterstrichobjekts abrufen. (JQuery erhält JQuery -Objekt über $ () Methode)
Unterstrich hat insgesamt mehr als 60 Funktionen. Gemäß den verschiedenen Verarbeitungsobjekten kann es in fünf Hauptmodule unterteilt werden: Sammlungsklasse, Array -Klasse, Funktionsfunktionsklasse, Objektklasse und Werkzeugfunktionsklasse.
Unterstriche Template () Funktionsbeschreibung:
Diese Funktion enthält drei Vorlagen:
(1) < % %>: Enthält logischen Code und wird nach dem Rendering nicht angezeigt.
(2) < %= %>: Datentyp, Daten nach dem Rendering anzeigen.
(3) < %- %>: Konvertieren Sie HTML-Tags in gemeinsame Zeichenfolgen, um Codeangriffe zu vermeiden.
Anrufformat:
_.Template (templatestring, [Daten], [Einstellung])
Es werden keine Zwei-Wege-Datenbindung implementiert.
1. Unterstriche Objekteinkapselung
Unscore erweitert den nativen Prototyp des nativen JavaScript -Objekts nicht, sondern verkauft Daten in einem benutzerdefinierten Objekt wie JQuery (im Folgenden als "Unterzählobjekt" bezeichnet).
Sie können native JavaScript -Daten abrufen, indem Sie die Value () -Methode eines Unterstrichobjekts aufrufen, z. B.:
// Definieren Sie ein JavaScript-integriertes Objekt var jsdata = {name: 'data'} // Erstellen Sie das Objekt über die _ () -Methode // Der Prototyp des unterstrichenen Objekts enthält alle in Unterstriche definierten Methoden. Sie können var unterstrichene _ (jsdata) verwenden; // native Daten über die Wertmethode abrufen, dh jsdata unterstrichene .value ();2. Prioritätsaufruf an JavaScript 1.6 integrierte Methoden
Es gibt viele Methoden in Unterstrichen, die in die Spezifikation in JavaScript 1.6 aufgenommen wurden. Daher werden innerhalb des Unterstrichobjekts integrierte Methoden, die von der Hostumgebung bereitgestellt werden (wenn die Hostumgebung diese Methoden implementiert hat), zuerst aufgerufen, um die Ausführungseffizienz der Funktion zu verbessern.
Für Hostumgebungen, die JavaScript 1.6 nicht unterstützen, wird Unscore sie auf seine eigene Weise implementieren, und für Entwickler sind diese völlig transparent.
Die hier genannte Hostumgebung kann die node.js -Ausführungsumgebung oder der Client -Browser sein.
3. Ändern Sie den Namespace
Unscore verwendet _ (Undercore) standardmäßig zum Zugriff auf und zum Erstellen von Objekten, aber dieser Name entspricht möglicherweise nicht unseren Namensschwerpunkten oder kann problemlos Konflikte verursachen.
Wir können den Namen von Unterstrich über die Noconflict () -Methode ändern und den Wert vor der Variablen _ (unterstrichen) wiederherstellen, zum Beispiel:
<script type = "text/javaScript"> var _ = 'benutzerdefinierte Variable'; </script> <script type = "text/javaScript" src = "Underscore/Underscore-min.js"> </script> <script type = "text/javaScript"> // Undercore-Objektkonsole.dir (_); // Benennen Sie uns das Unterstrich in uns um und greifen Sie dann auf das Unterstrich über uns zu und erstellen Sie über uns über uns var us = _.noconflict (). // Ausgabe "benutzerdefinierte Variable" console.dir (_); </script>
4. Kettenbetrieb
Erinnern Sie sich, wie wir Operationen in JQuery verknüpfen? Zum Beispiel:
$ ('a') .css ('Position', 'relative') .attr ('href', '#') .show ();Unscore unterstützt auch Kettenoperationen, aber Sie müssen die Kette () -Methode anrufen, um zu deklarieren:
var arr = [10, 20, 30]; _ (arr) .Chain () .MAP (Funktion (item) {return item ++;}) .First () .Value ();Wenn die Chain () -Methode aufgerufen wird, wird unterstrich die aufgerufene Methode in einem Verschluss zusammengefasst, den Rückgabewert in ein Unterstrahlungsobjekt einkapseln und Rückgabe: Rückgabe:
// Dies ist eine Schlüsselfunktion in Unterstriche zur Implementierung von Kettenoperationen. Es fördert den Rückgabewert in ein neues Unterstrichobjekt und ruft die Methode der chain () erneut auf, um die nächste Funktion in der Methodenkette zu unterstützen. var result = function (OBJ, Kette) {Rückkehrkette? _ (obj) .Chain (): obj; }5. Unterstrich erweitern
Wir können benutzerdefinierte Methoden problemlos über die MILIN () -Methode unterstrichen, beispielsweise über die MILIN () -Methode:
_.mixin ({method1: function (object) {// Todo}, method2: function (arr) {// Todo}, method3: function (fn) {// Todo}});Diese Methoden werden an das Unterstrichprototypobjekt angehängt, das von allen erstellten Unterstrichobjekten verwendet werden kann, und genießen dieselbe Umgebung wie andere Methoden.
6. Überqueren Sie die Sammlung
Jede () und MAP () -Methoden sind die beiden am häufigsten verwendeten Methoden. Sie werden verwendet, um eine Sammlung (Array oder Objekt) zu iterieren und jedes Element in der Sammlung zu verarbeiten, beispielsweise:
var arr = [1, 2, 3]; _ (arr) .MAP (Funktion (Element, i) {arr [i] = item + 1;}); var obj = {zuerst: 1, zweitens: 2} _ (obj) .each (Funktion (Wert, Schlüssel) {return obj [key] = value + 1;});Die MAP () -Methode hat die gleiche Rolle und Parameter wie jede () Methode, zeichnet jedoch das Ergebnis auf, das von jeder Iterationsfunktion in ein neues Array zurückgegeben und zurückgegeben wird.
7. Funktionsdrossung
Funktionsdrosseln bezieht sich auf die Kontrolle der Ausführungsfrequenz oder des Intervalls einer Funktion (genau wie das Tor, das den Wasserfluss steuert). Unscore bietet zwei Methoden: Debounce () und Throttle () für Funktionsdrosseln.
Um diese beiden Methoden klarer zu beschreiben, müssen wir zwei Anforderungen implementieren:
Anforderung 1: Wenn der Benutzer die Suchkriterien im Textfeld eingibt, werden die übereinstimmenden Schlüsselwörter automatisch abfragt und an den Benutzer aufgefordert (genau wie beim Eingeben des Suchschlüsselworts in Tmall)
Analysieren Sie zunächst die erste Anforderung. Wir können den Schlüsselpressereignis des Textfelds binden. Wenn sich der Inhalt des Eingangsfelds ändert, fragen Sie das übereinstimmende Schlüsselwort und zeigen Sie es an. Angenommen, ich möchte "Windows Phone" abfragen, das 13 Zeichen enthält, und es hat nur 1 Sekunde gedauert, bis ich die Eingabe abgeschlossen habe (es scheint etwas schnell, das ist es, was es bedeutet), und innerhalb dieser 1 Sekunde wurde die Abfragemethode 13 Mal bezeichnet. Dies ist eine sehr beängstigende Sache, und wenn Tmall so implementiert wird, mache ich mir Sorgen, dass es vor dem Singles -Tag sterben wird (natürlich ist es nicht so zerbrechlich, aber es ist definitiv nicht die beste Lösung).
Ein besserer Ansatz besteht darin, das übereinstimmende Schlüsselwort abzufragen, wenn der Benutzer die Eingabe beendet hat oder auf eine Eingabeaufforderung wartet (möglicherweise ist er zu faul, um den folgenden Inhalt einzugeben).
Schließlich stellten wir fest, dass der Benutzer in beiden Fällen erwartet hatte, dass der Benutzer die Eingabe vorübergehend stoppt. Deshalb haben wir uns für die Abfrage entschieden, nachdem der Benutzer die Eingabe für 200 Millisekunden in der Pause für 200 Millisekunden (wenn der Benutzer ständig Inhalte eingreift, dann glauben wir, dass er möglicherweise sehr klar über das Keyword ist, also warten Sie und fordern Sie ihn erneut auf).
Zu diesem Zeitpunkt können wir mit der Funktion debounce () in Unterstriche diese Anforderung problemlos implementieren:
<input type = "text" id = "such" name = "such" /> <script type = "text /javaScript"> var query = _ (function () {// Query -Operation hier}). Debounce (200); $ ('#search'). Bind ('Schlüsselpress', Abfrage); </script>Sie können sehen, dass unser Code sehr präzise ist und die Drosternskontrolle in der DEBOINC () -Methode implementiert wurde. Wir sagen nur, dass wir unseren Abfragebetrieb ausführen und dann die Abfragefunktion an das TastePress -Ereignis im Eingabefeld binden, wenn die Abfragefunktion nicht innerhalb von 200 Millisekunden aufgerufen wurde.
Wie kam es zu der Abfragefunktion? Wenn wir die Methode dabounce () nennen, werden wir eine Funktion übergeben, die den Abfragebetrieb und eine Zeit (Millisekunden) ausführt. Die Debounce () -Methode wird die Funktion basierend auf der Zeit, die wir übergeben, droselt und eine neue Funktion zurückgeben (d. H. Die Abfragefunktion). Wir können die Abfragefunktion mit Vertrauen und Kühnheit aufrufen, und die Dunoce () -Methode hilft uns, sie nach Bedarf zu kontrollieren.
Anforderung 2: Wenn der Benutzer die Browser -Scrollbar zieht, rufen Sie die Serverschnittstelle an, um zu überprüfen, ob neue Inhalte vorhanden sind
Lassen Sie uns die zweite Anforderung analysieren. Wir können die Abfragemethode an das Fenster zum Einkrollereignis binden, aber dies ist offensichtlich keine gute Praxis, da der Benutzer die Bildlaufleiste einmal schleppt und Dutzende oder sogar Hunderte von ONSCROLL -Ereignissen auslösen kann.
Können wir die oben genannte Dunounce () -Methode verwenden, um die Drosselsteuerung durchzuführen? Wenn der Benutzer die Bildlaufleiste beendet hat, dann nach neuen Inhalten abfragen? Dies steht jedoch nicht mit den Anforderungen nicht ab, und die Benutzer hoffen, während des Dragging -Prozesses Änderungen im neuen Inhalt zu erkennen.
Also haben wir uns dazu entschlossen: Wenn der Benutzer zieht, beträgt das Intervall zwischen zwei zwei Abfragen nicht weniger als 500 Millisekunden. Wenn der Benutzer 1 Sekunde lang zieht, kann dies möglicherweise 200 ONSCROLL -Ereignisse auslösen, aber wir machen höchstens 2 Abfragen.
Mit der Throttle () -Methode in Unterstrich können wir diese Anforderung auch problemlos implementieren:
<script type = "text/javaScript"> var query = _ (function () {// Abfrageoperation hier}). Drosselklaser (500); $ (Fenster) .bind ('Scroll', Abfrage); </script>Der Code ist immer noch sehr präzise, da in der Methode der Drosselklappe () alle von uns implementierten Steuerelemente bereits vorhanden sind.
Möglicherweise haben Sie festgestellt, dass die beiden Methoden von dunounce () und throttle () sehr ähnlich sind (einschließlich der Anrufmethode und der Rückgabewert), ihre Funktionen jedoch unterschiedlich sind.
Sie alle werden für Funktionsdrosseln verwendet, und Kontrollfunktionen werden nicht häufig aufgerufen, wodurch Client- und Serverressourcen gespeichert werden.
Die Debounce () -Methode konzentriert sich auf das Intervall zwischen Funktionsausführung, dh der Anrufzeit der Funktion zweimal nicht geringer als die angegebene Zeit.
Die Drosselklappenmethode konzentriert sich mehr auf die Ausführungsfrequenz der Funktion, dh die Funktion wird nur einmal innerhalb der angegebenen Frequenz aufgerufen.
8. Vorlagenanalyse
Unscore bietet eine leichte Vorlagen -Parsen -Funktion, mit der wir die Seitenstruktur und Logik effektiv organisieren können.
Ich werde es mit einem Beispiel vorstellen:
<!-Wird verwendet, um gerenderte Tags anzuzeigen-> <ul id = "element"> </ul> <!-Definieren Sie eine Vorlage und legen Sie den Vorlageninhalt in ein Skript-Tag-> <script type = "text/template" id = "tPl"> <%für (var i = 0; i <list.Length; <%=item.lastName%></span> <span><%-item.city%></span> </li> <% } %> </script> <script type="text/javascript" src="underscore/underscore-min.js"></script> <script type="text/javascript"> // Get rendering elements and template content var element = $('#element'), tpl = $ ('#tpl'). html (); // Daten erstellen, die die VAR -Daten sein können, die Sie aus dem Server = {Liste erhalten: [{FirstName: '<a href = "#"> Zhang </a>', Lastname: 'san', City: 'Shanghai'}, {FirstName: 'li', Lastname: 'Si', Stadt: '<a href =#"#"#"#"#"#"#"#"#"#"#"#"#"#"#"#"#"#"#"#"#"#"#"#"#"#"#"#"#"#"#"#"#"#"#"#"#" 'Wang', LastName: 'Wu', Stadt: 'Guangzhou'}, {FirstName: 'Zhao', Lastname: 'liu', Stadt: 'Shenzhen'}]} // die Vorlage analysieren, den Parsen -Inhalt var html = _.template (tpl, data) zurückgeben; // den analysierten Inhalt zum Rendering -Element -Element.html (HTML) füllen; </script>In diesem Beispiel geben wir den Vorlageninhalt in ein <skript> -Tag ein. Möglicherweise haben Sie festgestellt, dass der Typ des Tags Text/Vorlage anstelle von Text/JavaScript ist, da er nicht direkt als JavaScript -Skript ausgeführt werden kann.
Ich empfehle auch, dass Sie den Vorlageninhalt in <Script> einfügen, denn wenn Sie sie in einem <div> oder anderen Tags schreiben, können sie zum DOM -Baum zum Parsen hinzugefügt werden (auch wenn Sie dieses Tag ausblenden, wird er nicht vermieden).
_.Template -Vorlagenfunktion kann nur 3 Arten von Vorlagen -Tags analysieren (dies ist viel einfacher als Smarty und JSTL):
< % %>: Wird verwendet, um JavaScript -Code zu enthalten, der ausgeführt wird, wenn die Daten gerendert werden.
< %= %>: Zum Ausgabe von Daten kann es eine Variable, das Attribut eines Objekts oder ein Funktionsaufruf sein (um den Rückgabewert der Funktion auszugeben).
< %- %>: Wird verwendet, um Daten auszugeben und HTML-Zeichen, die in den Daten enthalten sind, in Entitätsformulare (z. B. doppelte Zitate in Formulare umwandeln), um XSS-Angriffe zu vermeiden.
Wenn wir HTML in den Daten als Text anzeigen möchten, verwenden wir häufig das < %- %> -Tag.
Mit Unscore können Sie auch diese 3 Formulare von Tags ändern. Wenn wir { %}, { %= %}, { %- %} als Tags verwenden wollen, können wir dies tun, indem wir Vorlagen modifizieren, genau wie diese:
_.Templatesettings = {evaluation: // {%([/s]+?)/%/}/g, interpolat: // {%= ([/s]+?)/%/}/g, Escape: // {%-([/s]+?)%/}/g}}}}}}In diesem Beispiel übergeben wir den Vorlageninhalt und die Daten, die an die Vorlagenmethode gefüllt werden sollen, die in der folgenden Reihenfolge verarbeitet wird:
(1) Analyse des Vorlageninhalts in ausführbare JavaScript (Parse Template -Tags) analysieren.
(2) Ändern Sie den analysierten JavaScript -Bereich in das Datenobjekt, das wir mit Anweisung übergeben haben, sodass wir über Variablen in der Vorlage direkt auf die Eigenschaften des Datenobjekts zugreifen können.
(3) Führen Sie an Parsen -JavaScript (Daten in die Vorlage aus) aus.
(4) Geben Sie das Ergebnis nach der Ausführung zurück
Wir stoßen häufig auf eine Situation, in der die Vorlagenmethode mehrmals aufgerufen wird, um die Daten in dieselbe Vorlage zu rendern.
Angenommen, wir haben eine Paging -Liste, und jedes Datenstück in der Liste wird durch eine Vorlage gerendert. Wenn der Benutzer die nächste Seite betritt, erhalten wir die Daten der nächsten Seite und rendern. Tatsächlich ist die Vorlage jedes Mal die gleiche, wenn sie wiedergegeben wird, aber alle Verarbeitungsprozesse der gerade beschriebenen Vorlage werden immer ausgeführt.
Tatsächlich bietet die Template -Methode von Unscore eine effizientere Aufrufmethode. Wir ändern die letzten beiden Sätze im obigen Code an:
// die Vorlage analysieren, den analysierten Inhalt var render = _.template (tpl) zurückgeben; var html = render (Daten); // den analysierten Inhalt in das Renderelement -Element.html (HTML) füllen;
Sie finden einen subtilen Unterschied: Wenn wir die Vorlagenmethode aufrufen, übergeben wir nur den Vorlageninhalt, jedoch nicht die Daten. Zu diesem Zeitpunkt analysiert die Vorlagemethode den Vorlageninhalt, generiert den analysierten ausführbaren JavaScript -Code und gibt eine Funktion zurück, und die Funktionsbehörde ist das analysierte JavaScript. Wenn wir diese Funktion aufrufen, um Daten zu rendern, lassen wir die Vorlage Parsing -Aktion weg.
Sie sollten die zurückgegebene Funktion speichern (genau wie ich sie in der Render -Variablen speichere) und dann die Daten durch Aufrufen der Funktion, insbesondere wenn dieselbe Vorlage mehrmals gerendert werden kann. Dies kann die Ausführungseffizienz verbessern (die spezifische Verbesserung sollte von der Länge und Komplexität Ihrer Vorlage abhängen, aber es ist trotzdem eine gute Angewohnheit).