Heim > Artikel > Web-Frontend > Eine kurze Analyse des Unterschieds zwischen jQuery und AngularJS_AngularJS
Ich habe kürzlich AngularJS studiert. Das größte Gefühl ist, dass es sich völlig von den vorherigen jQuery- und verschiedenen auf jQuery basierenden Bibliotheksdesignkonzepten unterscheidet. Wenn Sie dies und Programmierer, die zuvor jQuery-Entwicklung durchgeführt haben, nicht erkennen können, lernen Sie AngularJS Wenn ja, ist es möglich, dass Sie nach längerem Studium immer noch nicht wissen, wofür dieses Ding verwendet werden kann, wie man es mit der Benutzeroberfläche kombiniert usw. Ich habe einen Artikel gefunden Darüber auf Stackoverflow, und es hat sich sehr gelohnt, es auf dieser Basis zu lesen, damit alle gemeinsam daraus lernen können.
Ursprüngliche Frage: Wenn ich mit der Verwendung von jQuery zum Entwickeln von Clientanwendungen vertraut bin, wie fange ich dann mit AngularJS an? Können Sie die erforderlichen Paradigmenänderungen beschreiben?
1. Was sind die Unterschiede beim Entwerfen von Client-Webanwendungen?2. Welche Technologien sollte ich nicht mehr verwenden und welche als Ersatz?
3. Gibt es serverseitig etwas oder Einschränkungen zu beachten?
Antwort:
1. Entwerfen Sie Ihre Seite nicht zuerst und ändern Sie sie dann durch DOM-Manipulation
In jQuery entwerfen Sie zunächst eine Seite und ändern dann deren Inhalt dynamisch. Dies liegt daran, dass jQuery unter dieser Prämisse darauf ausgelegt ist, den Inhalt erheblich zu erweitern und zu ändern. In AngularJS müssen Sie Ihre Struktur jedoch zuerst im Kopf entwerfen ,Von Anfang an müssen Sie auf „Ich habe ein DOM-Element und ich möchte, dass es etwas tut“ verzichten und es durch „Welche Aufgabe muss ich erfüllen“ ersetzen, dann Ihre Anwendung entwerfen und schließlich Ihre Ansichtsansicht entwerfen Schicht".
2. Verwenden Sie AngularJS nicht, um jQuery zu erweitern
Dementsprechend kommen Sie nicht auf die Idee, jQuery bestimmte Dinge tun zu lassen und dann die Funktionen von AngularJS hinzuzufügen, damit es das Modell und den Controller verwalten kann. Daher empfehle ich Anfängern in der AngularJS-Entwicklung generell nicht, gleichzeitig jQuery zu verwenden, zumindest nicht, bis sie sich an das AngularJS-Entwicklungsmodell gewöhnt haben. Wenn Sie jedoch wirklich anfangen, sich an die AngularJS-Methode anzupassen, werden Sie feststellen, dass dies sehr schwierig ist verlockend. Menschen Dinge.Ich habe viele Entwickler gesehen, die jQuery-Plugins mit AngularJS-Rückrufen und $apply-Methoden in 150 bis 200 Zeilen gekapselt haben. Diese Methode lässt den Code extrem kompliziert aussehen, aber tatsächlich lassen sie diese Plug-Ins laufen. Das Problem besteht darin, dass jQuery-Plugins in den meisten Fällen in AngularJS umgeschrieben werden können und möglicherweise nur eine sehr kleine Menge Code verwenden. Gleichzeitig wird der Code durch dieses Umschreiben intuitiv und leicht verständlich, was offensichtlich besser ist als das jQuery-Code direkt einkapseln.
Wenn Sie also auf ein Problem stoßen, müssen Sie zunächst in AngularJS denken. Wenn Sie keine Lösung finden, können Sie die Community um Hilfe bitten Denken Sie darüber nach. Verwenden Sie jQuery, lassen Sie jQuery nicht zu Ihrer Krücke werden, sonst werden Sie AngularJS nie beherrschen.
3. Denken Sie architekturzentriert
Zuallererst müssen Sie wissen, dass es sich bei einseitigen Anwendungen um Webanwendungen handelt. Es handelt sich nicht um herkömmliche mehrseitige Websites, daher müssen wir gleichzeitig als Server- und Client-Entwickler nachdenken wie wir unsere Anwendungen in unabhängige, erweiterbare und testbare Teile unterteilen.Wie nutzen wir das AngularJS-Denken als nächstes? Hier sind einige grundlegende Richtlinien nach dem Vergleich mit jQuery:
Das Folgende ist die Ansichtsebene einer Anwendung:
In jQuery ändern wir diese Ansicht dynamisch. Wir verwenden ul, um ein Dropdown-Menü zu definieren
Der Code lautet wie folgt:
Dies ist bei weitem die auffälligste Funktion von AngularJS. In Bezug auf die Datenbindung wird die Art und Weise der Bedienung des DOM aufgegeben, und all dies wird von AngularJS durchgeführt, um die Ansicht automatisch zu aktualisieren Schreiben Sie Code, um den Dom zu bedienen. In jQuery reagieren wir häufig auf Ereignisse und ändern Ansichten auf folgende Weise:
Code kopieren
Der Code lautet wie folgt:Zusätzlich zum Problem der Verwirrung haben wir auch das zuvor erwähnte Problem, wie man seine Absichten zum Ausdruck bringt. Aber was noch wichtiger ist: Wir müssen diesen DOM-Knoten manuell referenzieren und aktualisieren. Wenn wir eines davon löschen möchten, müssen wir dieses DOM-Element programmgesteuert bedienen. Wie testen wir den DOM-Knoten? Wollen wir die Anzeigemethode ändern?
Der obige Code scheint chaotisch und fragil, aber in AngularJS können wir Folgendes tun:
Unsere Ansicht sollte so aussehen
Jetzt verwenden wir nicht ul, sondern das Popup-Fenster von Bootstrap, aber wir müssen den Code im Controller nicht ändern. Noch wichtiger ist, dass sich die Ansichtsebene automatisch ändert, egal wie die Daten geändert werden dementsprechend, was sehr einfach ist!
Obwohl ich hier keine Demonstration durchführen werde, müssen Sie wissen, dass die Datenbindung bidirektional ist. Sie können die Daten bearbeiten, indem Sie die Direktive hinzufügen. und es gibt viele andere aufregende Orte.
Differenzmodellebene
In jQuery ähnelt DOM einem Modell, aber in AngularJS haben wir eine andere Modellebene als jQuery, sodass wir es auf jede gewünschte Weise verwalten können. Es ist völlig unabhängig von der Ansicht. Dieser Ansatz hilft uns bei der Datenbindung, bei der Wahrung der Trennung von Belangen und ermöglicht eine bessere Testbarkeit.
Belangetrennung
Das Obige hängt alles mit diesem Gesamtthema zusammen: Sie können sich auf die Trennung konzentrieren, Ihre Ansichtsebene zeigt Datensätze an, Ihre Modellebene stellt Daten dar und Sie verfügen über eine Serviceebene, um diese wiederverwendbaren Aufgaben auszuführen. Sie verwenden Direktiven, um DOM-Operationen auszuführen, Ihre Ansicht zu erweitern und sie mit dem Controller zu verbinden, weshalb ich an anderer Stelle die Verbesserung der Testbarkeit erwähnt habe.
Abhängigkeitsinjektion
Was uns bei der Lösung der Problemtrennung hilft, ist die Abhängigkeitsinjektion (DI). Wenn Sie ein serverseitiger Entwickler (Java oder PHP) sind, sind Sie möglicherweise bereits mit diesem Konzept vertraut, wenn Sie sich jedoch mit der Clientseite befassen Entwicklung, Man könnte meinen, dass dieses Konzept etwas überflüssig und rein modisch ist, aber in Wirklichkeit ist es das nicht.
Aus einer breiteren Perspektive bedeutet DI, dass Sie Komponenten frei deklarieren und dann von diesen Komponenten instanziieren können, was eine Selbstverständlichkeit ist. Sie müssen die Ladereihenfolge, die Dateispeicherorte usw. nicht kennen, die Magie ist nicht sofort ersichtlich, aber ich gebe ein Beispiel: Testen.
Wir sagten, dass wir in der Anwendung einen Dienst benötigen, der auf dem Anwendungsstatus und dem lokalen Speicher basiert, um die serverseitige Speicherung über eine Rest-API durchzuführen. Wenn wir unseren Controller testen, müssen wir danach nicht mehr mit dem Server kommunizieren Alles nur Testen des Controllers. Wir fügen lediglich einen Scheindienst hinzu, der mit unserer Originalkomponente identisch ist. Der Injektor stellt sicher, dass unser Controller einen Dummy-Dienst erhält. Der Controller selbst muss den Unterschied nicht kennen.
Lassen Sie uns über das Testen sprechen.
4. Testgetriebene Entwicklung
Dieser Teil ist der dritte Teil der Architektur, aber er ist so wichtig, dass ich ihn an der wichtigsten Position platzieren muss.
Wie viele von allen jQuery-Plugins, die wir gesehen, verwendet und geschrieben haben, verfügen über eine Testkomponente? Tatsächlich gibt es nicht viele. Dies liegt daran, dass jQuery beim Testen nicht einfach zu kontrollieren ist, aber AngularJS unterscheidet sich davon.
In jQuery besteht die einzige Möglichkeit zum Testen darin, eine Demoseite zu verwenden, um eine unabhängige Komponente zu erstellen, damit unser Test DOM-Operationen ausführen kann. Als nächstes müssen wir eine separate Komponente entwickeln und in unsere Anwendung integrieren. Wie umständlich ist das! Wenn wir jQuery zum Entwickeln verwenden, führen wir in vielen Fällen tatsächlich eine repetitive Entwicklung durch und nicht eine testgetriebene Entwicklung. Können Sie uns das verübeln?
Aber in AngularJS können wir uns auf Trennpunkte konzentrieren, sodass wir eine testgetriebene Entwicklung durchführen können. Zum Beispiel haben wir eine Anweisung, um unseren aktuellen Pfad im Menü zu beschreiben. Wir können ihn in der Ansicht wie folgt deklarieren:
Okay, jetzt können wir einen Test schreiben, um diese nicht vorhandene Anweisung zu testen, wenn sie aktiv ist
Wir führen den Testfall direkt aus und Sie werden feststellen, dass er fehlschlägt. Zu diesem Zeitpunkt müssen Sie diesen Befehl wie folgt erstellen:
Führen Sie diesen Testfall erneut aus. Sie werden feststellen, dass er erfolgreich war und das Menü wie gewünscht angezeigt wird. Unsere Entwicklung ist sowohl iterativ als auch testbar, was sehr cool ist!
5. Vom Konzept her handelt es sich bei Direktiven nicht um verpackte jQuery
Man hört oft, dass DOM-Operationen nur in Anweisungen durchgeführt werden können. Dies ist ein Muss und Sie müssen es ernst nehmen.
Lass uns eintauchen,
Einige Direktiven schmücken nur unsere Ansichten (z. B. ngClass), daher ist es manchmal in Ordnung, den Dom direkt zu manipulieren. Wenn eine Direktive jedoch einem Widget ähnelt und über eine eigene Vorlage verfügt, sollte sie als separates Anliegen behandelt werden Punkt, das bedeutet, dass seine Vorlage von der Ausführungslogik in der Verknüpfung und anderen Controller-Funktionen getrennt werden muss.
AngularJS verfügt über einen vollständigen Satz an Tools, die diese Trennung erleichtern können. Mit der ngClass-Direktive können wir Klassen dynamisch aktualisieren, mit ngBind können wir eine bidirektionale Datenbindung durchführen und mit ngShow und ngHide können wir
Sie können ein Element programmgesteuert ein- und ausblenden, einschließlich vieler Anweisungen, die wir selbst geschrieben haben. Mit anderen Worten: Je weniger DOM-Operationen erforderlich sind, desto einfacher ist es, Anweisungen zu testen, desto einfacher ist es, ihre Stilattribute anzugeben, desto einfacher ist es, sie in Zukunft zu ändern einfacher sind sie wiederzuverwenden und zu verteilen.
Ich habe viele AngularJS-Neulinge gesehen, die Direktiven verwenden, um eine große Sequenz von jQuery-Code zu kapseln. Mit anderen Worten, da ich keine Dom-Operationen im Controller ausführen kann, kann ich sie in die Direktive einfügen, obwohl dies viel besser ist Direkte Bedienung des Doms, aber immer noch falsch.
Sehen Sie sich unseren Datensatz oben an. Auch wenn wir ihn in eine Direktive einfügen, müssen wir ihn immer noch auf die Angular-Methode bedienen, die keine Dom-Operationen ausführt! Es gibt viele Fälle, in denen eine DOM-Manipulation erforderlich ist, aber diese Situation kommt viel seltener vor, als Sie denken. Wenn wir DOM-Operationen durchführen müssen, fragen wir uns zunächst, ob wir dies hier tun müssen.
Das Folgende ist ein einfaches Beispiel, um ein Muster zu veranschaulichen, das ich oft sehe und bei dem wir eine Umschalttaste benötigen:
Im obigen Beispiel gibt es den folgenden Fehler:
1. Erstens ist jQuery nicht erforderlich, jQuery ist überhaupt nicht erforderlich, um hier zu funktionieren!
2. Zweitens: Auch wenn wir jQuery in die Seite eingeführt haben, aber keinen Grund haben, es zu verwenden, können wir angle.element verwenden und unsere Komponenten können ausgeführt werden, auch wenn jQuery in diesem Projekt nicht eingeführt wird .
3. Unter der Annahme, dass in unseren Anweisungen jquery benötigt wird, können wir jqLite verwenden, um es zu ersetzen, sodass wir nicht $ verwenden müssen, sondern angle.element;
Viertens und eng mit dem dritten Punkt verbunden: jqLite-Elemente müssen nicht mit $ umschlossen werden. Das an die Link-Funktion übergebene Element ist bereits ein jQuery-Objekt
5. Wie wir bereits sagten, warum nicht unsere Vorlagen und Logik mischen?Der obige Befehl kann wie folgt umgeschrieben werden, sodass er selbst in den komplexesten Fällen so einfach aussieht.
Es gibt noch weitere Vorteile, zum Beispiel ist es einfach zu testen und die Befehls-API ändert sich nicht, egal was in der Vorlage enthalten ist, sodass es einfach ist, sie umzugestalten. Sie können Ihre Vorlage so oft ändern, wie Sie möchten, ohne die Anweisungen zu ändern, und ganz gleich, wie Sie sie ändern, Ihre Tests werden immer bestanden!
Die Anweisung ist also keine Sammlung von jQuery-Codes wie Funktionen usw., sondern eine Erweiterung des HTML-Codes. Wenn der HTML-Code die von Ihnen benötigte Funktion nicht erreichen kann, können Sie eine Anweisung schreiben, um sie zu implementieren Dann verwenden Sie es wie HTML. Verwenden Sie es.
Anders ausgedrückt: Wenn AngularJS keine zusätzlichen Dinge tut, überlegen Sie, wie wir die Anweisungen ngClick und ngClass verwenden können?
ZusammenfassungVerwenden Sie nicht immer jquery, verweisen Sie nicht einmal darauf, es wird Sie aufhalten, wenn wir auf das Problem zurückkommen – Sie wissen, wie Sie das Problem in AngularJS auf die jquery-Art lösen, aber wenn Sie es verwenden Selektoren wie $ usw. müssen darüber nachdenken, wie sie AngularJS tatsächlich einsperren. Wenn Sie nicht wissen, wie Sie es ohne jQuery implementieren, fragen Sie immer wieder nach. Der beste Weg ist, jQuery nicht zu verwenden führt nur zu einer Erhöhung der Lautstärke.