In diesem Artikel werden die Unterschiede in der Implementierung von AngularJS und traditionellem JavaScript Control DOM durch die Implementierung von zwei einfachen Geschäftsanforderungen untersucht und versucht, die Programmierideen von Frameworks wie MVW in der populären Web-Front-End-Entwicklung zu verstehen.
Diese Anforderung ist sehr häufig. Beispielsweise sollte ein Menü mit zwei Ebenen, wenn das Menüelement der ersten Stufe geklickt wird, das entsprechende Untermenüelement angezeigt oder versteckt werden.
JQuery -Implementierung:
Die Codekopie lautet wie folgt:
<!-html->
<ul>
<li>
Punkt 1
<ul>
<li> Artikel Kind 1 </li>
</ul>
</li>
</ul>
// JavaScript
$ ('li.parent_item'). click (function () {
$ (this) .Children ('ul.child'). Toggle ();
})
AngularJS -Implementierung:
Die Codekopie lautet wie folgt:
<!-html->
<ul>
<li ng-klick = "hide_child =! hide_child">
Punkt 1
<ul ng-hide = "hide_child">
<li> Artikel Kind 1 </li>
</ul>
</li>
</ul>
Die traditionelle Art des DOM -Betriebs wird nicht im Detail beschrieben. Die Implementierung von AngularJs erfordert eine große Verfeinerung des Codes, nur die HTML -Version reicht aus. Der obige Code verwendet diese Wissenspunkte von AngularJs:
1. Direktiven
2. Expressionen
NG-Klick und NG-Hide sind beide Richtlinien (Anweisungen), die mit dem Framework ausgestattet sind. Ersteres entspricht der Bereitstellung eines Event -Handlers für das Li -Tag. Wenn das HTML -Element (li) geklickt wird, wird der Ausdruck hide_child =! Hide_child ausgeführt. Schauen wir uns zunächst die NG-Hide-Richtlinie an, die steuert, ob das HTML-Element basierend auf dem Ausdrucksergebnis der Zuordnung (Bolean-Wert) angezeigt werden soll (implementiert über CSS). Das heißt, wenn die Variable hide_child wahr ist, dann wird UL versteckt, andernfalls ist das Ergebnis das Gegenteil.
Hier ist Hide_Child tatsächlich eine Variable für $ Scope. Änderungen an seinem Wert können auch mit dem Controller -Controller implementiert werden, um eine Methode zu wickeln. Die aktuelle Anweisung ist jedoch relativ einfach und ist direkt in der Anweisungszuweisung geschrieben.
Durch die obige einfache Codeanalyse können wir zwei offensichtliche Merkmale von AngularJs sehen:
1. Die DOM -Operationen werden durch Anweisungen und Ausdrücke blockiert, und der zusätzliche JavaScript -Code wird durch einfacher Verwendung einfacher Code gespeichert.
2. Die Anwendung von Richtlinien und Ausdrücken ist nur direkt in HTML verschachtelt, was dem Codestil des unauffälligen JavaScript, den JQuery vorantreibt, etwas widerspricht.
Schauen wir uns zuerst eine andere Anforderung an und erläutern die obige Schlussfolgerung im Detail.
Anforderung 2: Durch Klicken auf die DIV, die die Auswahl eines Optionsfelds im Formular auslöst
Das traditionelle HTML -Formelement ist nicht sehr freundlich, um auf den heutigen mobilen Geräten zu arbeiten. Zum Beispiel erfordert das Optionsknopf -Radiofeld eine präzise Positionierung auf dem Touchscreen, um diese Komponente zu steuern. Die manuelle Position ist jedoch sehr rau. Eine übliche Praxis besteht darin, eine entsprechende Etikettskontrolle hinzuzufügen, aber das Bildschirmverhältnis des Textes selbst ist nicht ideal und hat keinen klaren Informationskommunikationseffekt. Daher wird ein DIV- oder Li -Tag mit einem größeren Bereich normalerweise indirekt betrieben.
JQuery -Implementierung:
Die Codekopie lautet wie folgt:
<!-html->
<ul>
<li>
<Eingabe type = "Radio"
id = "Option1" />
<Label für = "Option1"> Option 1 </label>
</li>
</ul>
// JavaScript
$ ('li.Selection'). Click (function () {
$ (this) .Children ('input [type = "radio"]'). click ();
})
AngularJS -Implementierung:
Die Codekopie lautet wie folgt:
<!-html->
<ul>
<li ng-repeat = "Option in Optionen"
ng-klick = "model.option = option.value"
ng-class = "{active: model.option == option.value}">
<Eingabe type = "Radio"
ng-model = "model.option"
value = "{{option.value}}"
id = "Option1" />
<Label für = "Option1"> Option 1 </label>
</li>
</ul>
In dieser Lösung haben wir auch keinen zusätzlichen JavaScript -Code einbezogen und mehrere zusätzliche Anweisungen verwendet. Zum Vergleich und zur Referenz kümmern wir uns nur um die Ausdrücke der beiden Anweisungen NG-Klick und NG-Model.
Schauen wir uns zunächst die NG-Model-Richtlinie des Eingabeelements an. Die Zuordnung hier bedeutet, dass wir die Eingabe in der Vorlage mit dem Optionsattribut des $ scope.model -Objekts in Verbindung bringen. Für ein tieferes Verständnis der Datenbindung können Sie sich auf die Datenbindung beziehen. Diese angegebene Assoziation macht die Vorlagenregelung direkt an das Datenmodell, und diese Bindung ist bidirektional. Dies bedeutet, dass das entsprechende Modellobjekt, sobald der Benutzer den Wert in der Steuerung im Steuerelement modifiziert (Funkeingang), neu zugewiesen wird (Modell.Option). Gleichzeitig spiegelt der Wert des Modellobjekts ändert, dass die Eingabesteuerung in der Vorlage auch die Änderungen entsprechend widerspiegelt. Und dies wird tatsächlich nicht in der oben genannten Umsetzung von JQuery erreicht.
Daher ist das Klicken auf das LI -Element durch AngularJS -Datenbindung, um den Prozess der Auslösen der Eingabe indirekt zu vervollständigen, wie folgt:
1. Klicken Sie auf das Li -Tag, um dem Modell einen Wert zuzuweisen.
2. Modifizieren Sie das Modellobjekt und lokalisieren die entsprechende Eingabesteuerung (der Wert des Wertes ist Modell.Option).
3. Aktivieren Sie die überprüfte Eigenschaft der Eingabesteuerung
In den beiden oben genannten Fällen haben wir ein neues Verständnis für den Betrieb des Web-Front-Ends.
In Bezug auf die technische Implementierung können wir durch Einführung neuer Konzepte wie Anweisungen, Ausdrücke, Datenbindung usw. DOM auf eine völlig neue Weise und nicht nur die Implementierung von JavaScript -Code betreiben, der mit Benutzern und HTML -Komponenten interoperabel ist. Diese Art von Veränderung im Denken ist riesig.
Seit Beginn dieses Jahrhunderts hat sich der Aufstieg der dynamischen Webprogrammierung und der serverseitigen Programmierungstechnologie verbessert. CGI/PHP/ASP produzierte von Anfang an .NET vs. Java aus Sprache und Plattform. Entwicklungseffizienz und Softwareprozesse förderten MVC Framework/ORM/AOP usw. sowie Leistung und Big Data brachten NodeJS/NoSQL/Hadoop usw., während die technischen Anforderungen des Browser-Front-Ends nicht so radikal erschienen. Einerseits können über die Serverseite und die Datenbank die meisten geschäftlichen Anforderungen des B/S -Modells erfüllt werden. Andererseits weist der Browser selbst Unterschiede zwischen verschiedenen Plattformen, der Inkompatibilität mit den Standards der Skriptsprache und der Rendering -Technologie sowie mangelnder Rechenleistung und Sicherheitsüberlegungen auf.
In diesem Fall muss der Browser die meiste Zeit nur in Betracht ziehen, Seiten und einfache Benutzerinteraktion zu rendern. HTML/DOM Plus Javasript/CSS erfüllt somit die Hauptarbeit des Front-Ends. In der Vergangenheit waren also keine Front-End-Arbeiter, nur Webdesigner waren benötigt. Allmählich haben sich die Anforderungen an das Front-End erhöht, und JQuery ist zur am häufigsten verwendeten Packungsbibliothek für JavaScript-Betriebsdom geworden. Zu diesem Zeitpunkt ist die Hauptaufgabe von JQuery/JavaScript immer noch nur ein Tool zum Präsentieren und Interaktion mit dem Browser -Terminal des Benutzers.
Nach dem Verständnis des Ursprungs von JQuery ist es nicht schwer festzustellen, dass einige der in der Vergangenheit verfolgten Regeln, wie z. B. unauffälliges JavaScript, auf die Mittelwerte und Methoden der Implementierung beschränkt waren. Um die DOM- und JavaScript -Codelogik zu trennen, haben wir die Methode mit höherer Wartung bevorzugt. Nachdem die Front-End-Nachfrage nach JavaScript zunahm, entstanden viele Front-End-Frameworks von MVC/MVP sowie der sogenannte MVW (Modell-View-Whatway) von AngularJs und der einheitliche Ansatz von JavaScript und DOM. Ursprünglich haben wir den direkten Betrieb der Schnittstellenanzeige und Benutzerinteraktion in Betracht gezogen, jetzt haben wir jedoch Client -Datenbindung, Reiche Anweisungen und Abhängigkeitsinjektion. Was uns erwartet, wird ein brandneues Programmiermodell und eine Denkweise sein.