Angular ist im MVVM -Framework gut, aber mit einem so großen und umfassenden Rahmen ist es nicht gering zu lernen, und es wird mindestens ein oder zwei Wochen dauern, bis er losgeht. KnockoutJs konzentriert sich auf die Datenbindung und kann in nur einem oder zwei Tagen verwendet werden, sodass die Lernkosten nicht zu niedrig sein sollten! In einer Zeit, in der die Front-End-Evolution so schnell ist, sind Lernkosten auch ein Faktor, der berücksichtigt werden muss. Oft sind unsere Projekte nicht so kompliziert und benötigen keinen universellen Rahmen. Sie brauchen einfache und einfache Werkzeuge.
Vor Knockoutjs
Angenommen, wir erstellen ein Auftragssystem und müssen den Einheitspreis des Produkts angezeigt werden. Anschließend können wir den Gesamtpreis basierend auf der Eingangsmenge berechnen und ihn anzeigen. Mit nativem Code ist es auch leicht zu erreichen, der Effekt ist:
Der Code ist wie folgt:
<!-HTML-Code-> Preis: <span id = "price"> < /span> <br /> Konto: <Eingabe type = "text" id = "account" value = "" placeholder = "Bitte geben Sie die Menge ein. document.getElementById ('Konto'), sumnode = document.getElementById ('sum'), price = 100, account = 11, sum = preis * Konto; // Initialize. Pricenode.InNerText = price; accountNode.Value = account; sumnode.textContent = sum; // Benutzereingabe von View Layer AccountNode.Nun, es ist ganz einfach! Übrigens zeigen wir jeweils 50 Elemente an, und es gibt 10 Arten von Displays sowie verschiedene Werbeaktionen wie den Kauf von 5 Kartons Okamoto und das Erhalten eines gebratenen Teigstocks ...
Sie kennen also das Problem der nativen Implementierung:
• Mit der Zunahme der UI und der Dateninteraktion ist die Codemenge schnell gewachsen und ist schwer zu warten
• Namen basierend auf DOM -Abfragen, ID oder Klasse sind schwer zu verwalten
• Hohe Code -Kopplung, schwer wiederverwenden
Einführung in Knockoutjs
Knockoutjs (im Folgenden als KO bezeichnet) schien die oben genannten Probleme zu lösen. Es handelt sich um eine leichte MVVM -Bibliothek, die sich auf die Implementierung der Bindung von Daten und Ansichten konzentriert. Es bietet keine UI -Kurse und Routing -Funktionen, und es ist sehr schnell, loszulegen. Gleichzeitig ist KO seit einigen Jahren zu einem relativ ausgereiften Rahmen geworden. Bei einigen Seiten, die dynamischer anzeigen, ist KO zweifellos eine bessere Wahl. Ich werde nicht viel über MVVM sagen, nur ein Bild, um zu verwechseln:
KO basiert auf drei Kernfunktionen (Einführung in die offizielle Website):
1. Observables und Abhängigkeitsverfolgung: Verwenden Sie Observables, um eine implizite Beziehungskette zwischen Modelldaten für die Datenumwandlung und -bindung einzurichten.
2. Deklarative Bindungen: Verwenden Sie einfache und leicht zu lesende Syntax, um Modelldaten einfach an DOM-Elemente zu binden.
3. Vorlagen: Integrierte Template Engine, schreiben Sie schnell komplexe UI-Präsentationen für Ihre Modelldaten.
KO zu verwenden ist sehr einfach. Laden Sie es einfach direkt auf die offizielle Website (http://knockoutjs.com/index.html) herunter und stellen Sie es mit <Script> vor.
Beobachtbare Objekte
Schreiben Sie das obige Beispiel mit KO (benutzerdefinierter Preis, der einer meiner Kindheitserwünsche war) neu:
Der Code sieht so aus:
<!-HTML-Code-> <div id = "ein"> Preis: <Eingabe type = "text" data-bind = "Wert: Preis" Placeholder = "Bitte eingeben Sie Einheitspreis" /> <br /> Konto: <Eingabe type = "text" data-bind = "Wert: account" placeholder = "bitte eingeben" /> <br /> summe: <span-sum: = Funktion (p, a) {// als beobachtbares Objekt festgelegt und initialisieren. this.sum = ko.PureComputed (function () {// Da das beobachtbare Objekt ein Funktionsobjekt ist, müssen Sie Price () verwenden, um den aktuellen Wert zu lesen. // Setzen Sie den Wert mit Price (newValue) und unterstützt Kettenschreiben: this.price (12). Account (3) zurück. 10); // anwenden Sie diese Bindung an, und die Bindung beginnt, Ko.Applybindings (VM) wirksam zu werden;1) Schauen wir uns zuerst den HTML -Code an:
Sie können sehen, dass ein Schlüsselwertpaar wie data-bind = "xx: oo" zu jedem Tag hinzugefügt wird. Dies ist die Bindungssyntax von KO. Was repräsentiert XXOO? (Xxoo? Der Autor ist immer noch ein Kind ...) Aus dem Beispiel können wir sehen, dass die Attribute von xx Tags sind, die Tag -Attribute wie Text, Wert, Klasse, Überprüfung usw. sein können, und tatsächlich können sie auch Klick-, Fokussierungs-, Lade- und andere DOM -Ereignisse sein. OO sieht aus wie eine Variable, ist aber keine Variable, sondern ein Funktionsobjekt. Das Ausführen dieser Funktion (mit einem ()) kann den entsprechenden gebundenen Wert erhalten. Durch XXOO können die Attribute oder Ereignisse eines Elements an die Funktionsobjekte in JS gebunden werden (wenn xxoo, müssen Sie für einander verantwortlich sein), ist dies die deklarative Bindung von KO. Die Definition der Bindung ist eigentlich ein Beobachtermodus, aber dies ist eine Zwei-Wege-Bindung. Der Herausgeber und der Abonnent abonnieren die Nachrichten des anderen. Dies ist die Zwei-Wege-Bindung von MVVM. Das Ergebnis der KO -bidirektionalen Bindung ist, dass eine Partei die andere Partei automatisch durch Änderung aktualisieren kann, dh die Daten- und Präsentationsschicht sind durch ViewModel eng miteinander verbunden. Der Bindungseffekt ähnelt:
2) Schauen wir uns den JS -Code an:
Sie können sehen, dass ein ViewModel -Objekt in JS definiert ist und das in HTML gebundene OO im Objekt betrieben wird. Hier gibt es zwei Hauptoperationen: Ko.Observable () und Ko.Purecomputer ().
• Ko.Observable (P): Siehe den Namen, dies ist die Methode, um beobachtbare Objekte festzulegen. Der übergebene Parameter P ist der initialisierte Wert. Die Parameter hier können der grundlegende Datentyp oder ein JSON -Objekt sein. Nachdem dies als beobachtbar eingestellt wurde, bedeutet dies, dass das System diesen Wert ständig beobachtet. Unabhängig davon, ob das P im ViewModel oder das P in den Änderungen des gebundenen Objekts ein Aktualisierungsereignis verursacht und alle Orte, die diesen Wert verwenden, werden auf den neuesten Zustand aktualisiert. Offensichtlich sind beobachtbare Objekte relativ leistungsverwendet, so dass für Werte, die keine dynamischen Änderungen (wie Preise) erfordern, nicht als beobachtbare Objekte festlegen. Natürlich muss es für die zentralisierte Initialisierung noch in ViewModel gestellt werden.
• Hinweis: Das von Ko.Observable (P) zurückgegebene Objekt ist ein Funktionsobjekt, daher müssen Sie Price () verwenden, um das beobachtbare Objekt zu lesen. In ähnlicher Weise erfordert das Festlegen des beobachtbaren Objekts einen Preis (NEWVALUE), um den Preis (NewValue) zu verwenden. Rücksichtsvoller ist, dass es beim Einstellen das Schreiben von Ketten unterstützt: ViewModel.Price (100). Account (10).
• Ko.Purecomputed () ist die sogenannte Abhängigkeitsverfolgung. Hier ist der Einheitspreis * Menge entspricht dem Gesamtpreis. Beachten Sie, dass Sie dies nicht direkt verwenden können. Summe angeben. Diese Schreibmethode kann das gebundene Objekt nicht dynamisch aktualisieren, verändert jedoch die Summenvariable dynamisch, aber andere Vorgänge sind erforderlich, um das gebundene Objekt zu aktualisieren. Daher müssen die Bindungswerte, die sich auf Berechnungen beziehen, unter Verwendung der Berechnungsfunktion von KO festgelegt werden. Natürlich ist das zurückgegebene Funktionsobjekt auch ein Funktionsobjekt. Darüber hinaus verfügt KO über eine berechnete Funktion, die ebenfalls festgelegt werden kann. Es wird jedoch empfohlen, Pure zu verwenden, um die Leistung zu verbessern.
• Achten Sie hier auf die Schreibmethode: Ko.Purecomputer (fn, this), dh Fn an den ViewModel -Bereich, der tatsächlich der Anruf/Antrag in JS ist. Da dies ein KO -Objekt bei der Ausführung von KO -internen Funktionen ist, muss dies an die obige Schreibmethode übergeben werden, um den Umfang des ViewModel -Objekts zu erhalten. Natürlich können Sie das auch verwenden, um das ViewModel -Objekt außerhalb der KO -Funktion zu speichern und diese in der KO -Funktion dann zu verwenden, um das ViewModel -Objekt aufzurufen. So was:
var that = this; this.sum = ko.PureComputed (function () {return that.price () * that.account ();});Nach dem Definieren des ViewModel -Konstruktors wird ein ViewModel -Objekt instanziiert, und dann wird die Ko.Applybindings () -Methode verwendet, um die Bindung zu wirken. Verpassen Sie diesen Schritt nicht.
Einfacher Seitenmodus mit KO:
<!-HTML-Code-> <span data-bind = "text: bindText"> </span> // js codevar viewModel = {bindText: ko.observable ('initvalue')}; ko.applybindings (viewModel);Zusammenfassend ist es: Verwenden Sie Daten-Bind = "xx: oo", um die Bindung in HTML zu deklarieren, ein ViewModel in JS zu erstellen und ein beobachtbares Objekt festzulegen und schließlich die Bindung anzuwenden.
Beobachtbares Objektarray
Schauen wir uns die Verwendung beobachtbarer Objektarrays an. In KO können Arrays und Variablen nicht wie JS gemischt werden. Für Array -Objekte müssen Sie Ko.observablearray ([…,…]) auf die gleiche Weise verwenden. In ähnlicher Weise können Array -Elemente grundlegende Typen oder JSON -Objekte sein. Das beobachtbare Objektarray in KO verfügt über eine Reihe von Array -Betriebsmethoden wie Slice (), Sort (), Push () usw. Der Effekt ist der gleiche wie die nativen JS -Array -Betriebsmethoden. Der einzige Unterschied zwischen Änderungen, die über die KO -Methode vorgenommen wurden, wird dem Abonnenten zur Aktualisierung der Schnittstelle mitgeteilt, aber die JS -Methode aktualisiert die Schnittstelle nicht. Hier ist ein einfaches Beispiel:
<!-HTML-Code-> <select data-Bind = "Optionen: list"> </select> // js codevar vm = {// liste: ko.obserservablearray () liste: ko.obserservablearray (['luffy', 'zoro', 'sanji']};Schlüsselpunkt: KO überwacht den Zustand des Arrays, nicht den Zustand des Elements selbst. Das heißt, wenn sich das Array -Status ändert (Hinzufügen von Elementen), wird das KO -Ereignis ausgelöst, um das gebundene Objekt zu aktualisieren, aber die Änderungen in den Elementen im Array (z. B. Wertänderungen) werden nicht überwacht und kann das KO -Ereignis nicht auslösen. Zum Beispiel:
Wenn Sie native Methoden verwenden, um Luffy in Lucy in der Konsole dynamisch zu ändern, aktualisiert die UI -Seite nicht, während das Array von KO zur Änderung des Arrays die Seite sofort aktualisiert wird. Es ist erwähnenswert, dass beim Erfrischen auch die vorherigen Änderungen aktualisiert werden (Luffy> Lucy). Mit anderen Worten, die Variablen im JS -Gedächtnis haben sich tatsächlich geändert, aber es fehlt immer noch eine Aktion, um das DOM zu aktualisieren. Wie Sie hier sehen können, ist die Methode zum Lesen eines Arrays vm.list () [0], da die Liste auch ein Funktionsobjekt ist und der Rückgabewert der gewünschte Listeninhalt ist. In ähnlicher Weise können Sie das beobachtbare Objektarray durch VM.List (["Mädchen", "Mädchen"] zurücksetzen und die Benutzeroberfläche sofort aktualisieren.
Wenn Sie die Änderungen der Array -Elemente in die Benutzeroberfläche dynamisch reagieren müssen, müssen Sie die Array -Elemente auf beobachtbare Objekte einstellen und dann die KO -Methode verwenden, um den Array -Elementwert zu ändern. Beachten Sie, dass die Methodenliste von KO () [0] ("Lucy") verwendet wird!
Es gibt zwei Arten von Methoden zum Betrieb beobachtbarer Objektarrays. Sie sind der gleiche Name wie die native JS -Array -Methode: Pop, Push, Verschiebung, Entschaltung, Rückwärts, Sortieren, Spleiß. Dieser Teil entspricht der Verwendung und den Auswirkungen der nativen JS -Methode, sodass ich sie nicht wieder wiederholen werde.
Einige andere Methoden sind in JS nicht verfügbar, hauptsächlich wie folgt:
• Entfernen Sie (einigeInitem) - Löschen Sie alle Elementelemente mit gleichem Werten zu einem gewissen Anitem und geben Sie sie in einem Array -Formular zurück. Dies bedeutet hier, dass Sie die erste Elementliste nicht direkt löschen können. Kurz gesagt, der übergebene Parameter muss der Wert des Elementelements sein. Es kann in Form von list () [0] verwendet werden oder Sie können die Wertschöpfungszeichenfolge (z. B. "Luffy") direkt eingeben.
• Entfernen (Funktion (Element) {Return item.age <18;}) - Löschen Sie alle Elementelemente mit Altersattributen von weniger als 18 und geben Sie sie als Array zurück. Diese Verwendung unterscheidet sich nicht von den Funktionen des normalen Arrays höherer Ordnung. Das Element wird als Parameter einer Funktion höherer Ordnung übergeben. Beim Iterieren des Arrays wird das Element gelöscht, wenn der Rückgabewert der Funktion höherer Ordnung der wahre Wert ist, andernfalls wird er zum nächsten Element verläuft.
• removeall (['chad', 132, und undefined]) - Entfernen Sie alle Elementelemente mit Werten, die "chad" oder 123 oder undefiniert sind, und geben Sie sie als Array zurück.
• removeall () - Entfernt alle Elemente und kehrt als Array zurück.
Tipps: Wenn es sich um beobachtbare Objekte handelt, wird das Erfrischenden mit jeder Änderung die Leistung verbraucht. Zu diesem Zeitpunkt können Sie die Erweiterung myobservablearray.extend ({ratelimit: 1000}) verwenden, um eine verzögerte Aktualisierung festzulegen. Wenn Sie beispielsweise Elemente kontinuierlich in das beobachtbare Array einfügen, können Sie eine Zykluszeit von 1000 ms festlegen, um alle Vorgänge innerhalb von 1000 ms in eine Aktualisierung zu konzentrieren, um die durch häufige DOM -Operationen verursachte Leistungsverschlechterung zu vermeiden.
Zusammenfassen
In diesem Artikel wird hauptsächlich das wichtigste Konzept in KnockoutJs vorgestellt: Beobachtbare Objekte (Arrays). Ein beobachtbares Objekt ist im Wesentlichen ein Funktionsobjekt. Beim Betrieb beobachtbarer Objekte über die KO -Methode kann die Benutzeroberfläche dynamisch aktualisiert werden. Dies ist die empfohlene Methode. Gleichzeitig können Sie auch beobachtbare Objekte über die native JS -Methode bedienen, aber die native Methode aktualisiert die UI -Anzeige nicht und Sie müssen bis zum nächsten Aktualisierungsereignis warten, um die Benutzeroberfläche aktualisiert zu werden.