Eine kurze Analyse des Unterschieds zwischen jQuery und 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

Code kopieren Der Code lautet wie folgt:

                                                                                                                             
In jQuery verwenden wir dieses Dropdown-Menü mit der folgenden Logik

Code kopieren

Der Code lautet wie folgt:

$('.main-menu').dropdownMenu(); Schauen wir uns diese Ansicht noch einmal an. Sie werden feststellen, dass ihre Funktion nicht sehr einfach ist, aber für große Anwendungen wird dieser Ansatz verwirrend und schwer zu warten sein. In AngularJS ist diese Ansicht tatsächlich eine ansichtsbasierte Funktion, wir können ul so definieren

Code kopieren

Der Code lautet wie folgt:

Die beiden Methoden machen eigentlich dasselbe, aber bei der AngularJS-Methode weiß jeder, der diese Ansichtsvorlage sieht, was als nächstes zu tun ist. Immer wenn ein neues Mitglied dem Entwicklungsteam beitritt, kann es hier nachschauen und feststellen, dass es eine Anweisung namens dropdownMenu gibt, um die Ansicht zu bedienen. Er muss nicht die richtige Antwort erraten oder anderen Code überprüfen, die Ansicht sagt uns direkt, was sie tut , es ist einfacher als jQuery.

Einige AngularJS-Neulinge stellen oft diese Frage: Wie kann ich alle Links eines bestimmten Typs finden und eine darauf basierende Direktive hinzufügen, aber wenn wir antworten: „Das sollten Sie nicht auf diese Weise machen, Sie sind halb jQuery, halb AngularJS-Idee.“ ", werden sie überrascht sein. 

Das Problem besteht darin, dass sie versuchen, etwas mit jQuery im Kontext von AngularJS zu tun, was im Allgemeinen keine gute Möglichkeit ist, dies zu tun. Sie müssen keine DOM-Manipulation außerhalb der hinzugefügten Direktive durchführen direkt zur Ansicht, die Absicht ist also schon klar. Denken Sie daran: Entwerfen Sie es nicht zuerst und ändern Sie es dann, sondern erstellen Sie zuerst eine Struktur und entwerfen Sie es dann innerhalb dieses Rahmens.

Datenbindung

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:

$.ajax({ URL: '/myEndpoint.json', Erfolg: Funktion (Daten, Status) { $('ul#log').append('

Daten empfangen!

'); } });

Relativ zu einer solchen Ansicht

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:

Code kopieren Der Code lautet wie folgt:

$http( '/myEndpoint.json' ).then( Funktion (Antwort) {

$scope.log.push( { msg: 'Daten empfangen!' } );

});

Unsere Ansicht sollte so aussehen

Code kopieren Der Code lautet wie folgt:

{{ enter.msg }}

In diesem Fall könnte unsere Ansicht auch so aussehen

Code kopieren Der Code lautet wie folgt:

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:

Code kopieren Der Code lautet wie folgt:

Hallo

Okay, jetzt können wir einen Test schreiben, um diese nicht vorhandene Anweisung zu testen, wenn sie aktiv ist

Code kopieren Der Code lautet wie folgt:

it( 'sollte "aktiv" hinzufügen, wenn sich die Route ändert', inject(function() {
var elm = $compile( 'Hello' )( $scope );

$location.path('/not-matching');
Expect( elm.hasClass('active') ).toBeFalsey();

$location.path( '/hello' );
Expect( elm.hasClass('active') ).toBeTruthy();
}));

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:

Code kopieren Der Code lautet wie folgt:

.directive( 'whenActive', function ( $location ) {

Geben Sie {
 zurück
Geltungsbereich: wahr,

Link: Funktion (Bereich, Element, Attribute) {

               Scope.$on( '$routeChangeSuccess', function () {

If ( $location.path() == element.attr( 'href' ) ) {

                      element.addClass( 'active' );

                }

                   sonst {

                         element.removeClass( 'active' );

                }

            });

}

};

});

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:

Code kopieren Der Code lautet wie folgt:

.directive( 'myDirective', function () {
Geben Sie {
zurück Vorlage: 'Toggle me!',
Link: Funktion (Bereich, Element, Attribute) {
var on = false;

$(element).click( function () {
on = !on;
$(element).toggleClass('active', on);
});
}
};
});

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.

Code kopieren Der Code lautet wie folgt:

.directive( 'myDirective', function () {

Geben Sie {
zurück Geltungsbereich: wahr,
Vorlage: 'Toggle me!',
Link: Funktion (Bereich, Element, Attribute) {
Scope.on = false;

Scope.toggle = Funktion () {
Scope.on = !scope.on;
};
}
};
});

Das Vorlagenelement befindet sich im Vorlagenattribut, Sie können seinen Stil einfach ersetzen und die Logik muss überhaupt nicht geändert werden, wodurch eine vollständige Wiederverwendung erreicht wird!

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?

Zusammenfassung

Verwenden 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.