Diskussion über Programmierideen des MVW-Klassenframeworks für einführende Kenntnisse in AngularJS_AngularJS

Durch die Implementierung zweier einfacher Geschäftsanforderungen untersucht dieser Artikel die Unterschiede zwischen AngularJS und der herkömmlichen JavaScript-Steuerungs-DOM-Implementierung und versucht, die Programmierideen von Frameworks wie MVW in der beliebten Web-Front-End-Entwicklung zu verstehen.

Diese Anforderung kommt sehr häufig vor, wenn beispielsweise in einem Menü mit zwei Ebenen auf den Menüpunkt der ersten Ebene geklickt wird, der entsprechende Untermenüpunkt angezeigt oder ausgeblendet werden soll.

jQuery-Implementierung:

Code kopieren Der Code lautet wie folgt:

• 
  Punkt 1
           
  
                                                                                                                                                                          
  • Item child 1
  
                                                                                   
  
  
  //javascript

  $('li.parent_item').click(function(){
  $(this).children('ul.child').toggle();
  })
  
  

AngularJS-Implementierung:

Code kopieren Der Code lautet wie folgt:

• 
  Punkt 1
           
  
                                                                                                                                                                                                              
  
  
  
  
  
  Die traditionelle Art und Weise, DOM zu betreiben, wird nicht noch einmal beschrieben. Die Implementierung von AngularJS ist viel ausgefeilter als der Code, und nur die HTML-Version ist ausreichend. Der obige Code verwendet diese Wissenspunkte von AngularJS:

1.

Richtlinien

2.Ausdrücke

ng-click

und

ng-hide sind Anweisungen, die mit dem Framework geliefert werden. Ersteres entspricht der Bereitstellung eines Event-Handlers für das li-Tag ) Beim Anklicken wird der Ausdruck (expression) hide_child = !hide_child ausgeführt. Werfen wir zunächst einen Blick auf die ng-hide-Direktive, die steuert, ob das HTML-Element basierend auf dem zugewiesenen Ausdrucksergebnis (boolescher Wert) (implementiert durch CSS) angezeigt werden soll. Mit anderen Worten: Wenn die Variable hide_child wahr ist, wird ul ausgeblendet, andernfalls ist das Ergebnis das Gegenteil. Hide_child ist hier eigentlich eine Variable auf $scope

. Das Ändern seines Werts kann auch durch Einbinden einer Methode in den Controller-Controller erreicht werden. Die aktuelle Anweisung ist jedoch relativ einfach und kann direkt in In geschrieben werden der Auftrag der Anweisung.

Durch die obige einfache Codeanalyse können wir zwei offensichtliche Merkmale von AngularJS erkennen:

1. Der Betrieb von DOM wird durch Anweisungen und Ausdrücke versiegelt, und nur einfacher Code kann zusätzlichen JavaScript-Code sparen

2. Die Anwendung von Anweisungen und Ausdrücken ist nur direkt in HTML verschachtelt, was etwas im Widerspruch zum unauffälligen JavaScript-Codestil steht, den jQuery fördert

Schauen wir uns zunächst eine weitere Anforderung an und erläutern dann die obige Schlussfolgerung im Detail.

Anforderung 2: Durch Klicken auf das Div die Auswahl eines Optionsfelds im Formular auslösen

Das herkömmliche HTML-Formularelement ist auf den heutigen mobilen Geräten nicht sehr benutzerfreundlich. Beispielsweise erfordert die Optionsschaltfläche „Radio Button“ eine präzise Positionierung auf einem Touchscreen, um diese Komponente zu steuern, die Fingerpositionierung ist jedoch sehr grob. Ein gängiger Ansatz besteht darin, ein entsprechendes Label-Steuerelement hinzuzufügen, aber das Bildschirmverhältnis des Textes selbst ist nicht ideal und es hat keinen klaren Informationsübertragungseffekt. Daher wird ein Div- oder Li-Tag mit einer relativ großen Fläche normalerweise indirekt betrieben.

jQuery-Implementierung:

Code kopieren Der Code lautet wie folgt:

   
• 
                      id="option1" />
          Option 1
     

// Javascript
$('li.selection').click(function(){
    $(this).children('input[type="radio"]').click();
})

AngularJS的实现：

复制代码 代码如下:

   
•         ng-click="model.option = option.value"
          ng-class="{active: model.option == option.value}" >
                      ng-model="model.option"
              value="{{option.value}}"
              id="option1" />
          Option 1
     

Bei dieser Lösung haben wir auch auf zusätzlichen JavaScript-Code verzichtet und ein paar Anweisungen mehr verwendet. Zum Vergleich und als Referenz interessieren uns nur die Ausdrücke der beiden Anweisungen ng-click und ng-model.

Sehen wir uns zunächst die ng-model-Direktive des Eingabeelements an. Die Zuweisung hier bedeutet, dass wir die Eingabe in der Vorlage mit dem Optionsattribut des $scope.model-Objekts verknüpfen, um ein In zu erhalten -Vertiefendes Verständnis der Daten finden Sie unter Datenbindung. Diese angegebene Zuordnung ermöglicht die direkte Bindung des Vorlagensteuerelements an das Datenmodell, und diese Bindung ist bidirektional. Dies bedeutet, dass, sobald der Benutzer den Wert im Steuerelement ändert (Radio-Eingabe prüfen), das entsprechende Modellobjekt neu zugewiesen wird (model.option). Wenn sich gleichzeitig der Wert des Modellobjekts ändert, wird das Eingabesteuerelement im Die Vorlage wird auch entsprechende Änderungen widerspiegeln. Dies wird in der obigen jQuery-Implementierung tatsächlich nicht erreicht.

Durch die Datenbindung von AngularJS ist der Prozess des indirekten Auslösens der Eingabe durch Klicken auf das li-Element also wie folgt:

1. Klicken Sie auf das li-Tag und weisen Sie model.option einen Wert zu 2. Ändern Sie das Model-Objekt und suchen Sie das entsprechende Eingabesteuerelement (der Wert von value ist der von model.option). 3. Aktivieren Sie das geprüfte Attribut des Eingabesteuerelements

Durch die beiden oben genannten Fälle haben wir ein neues Verständnis für die Funktionsweise des Web-Frontends gewonnen.

Zuallererst können wir im Hinblick auf die technische Implementierung durch die Einführung neuer Anweisungen, Ausdrücke, Datenbindungen und anderer Konzepte das DOM auf eine völlig neue Art und Weise betreiben, nicht nur den JavaScript-Code, der auf die Interaktion zwischen Benutzern beschränkt ist und HTML-Komponenten durchführen. Dieser Umdenken ist enorm.

Seit dem Aufkommen der dynamischen Webprogrammierung zu Beginn dieses Jahrhunderts hat sich die serverseitige Programmiertechnologie verbessert. Von den Anfängen von CGI/PHP/ASP an führten Sprache und Plattform zu .NET vs. Java, Entwicklungseffizienz und Softwareprozess förderten das MVC-Framework/ORM/AOP usw. und Leistung und Big Data brachten NodeJS/NoSQL/ Hadoop usw. und die technischen Anforderungen an das Browser-Frontend scheinen nicht so radikal gewesen zu sein. Einerseits können die meisten Geschäftsanforderungen des B/S-Modells über den Server und die Datenbank erfüllt werden, andererseits weist der Browser selbst Unterschiede zwischen verschiedenen Plattformen auf und ist nicht mit den Standards der Skriptsprache und des Renderings kompatibel Technologie und weist Einschränkungen hinsichtlich der Rechenleistung und Sicherheitsaspekten auf.

In diesem Fall müssen die Anforderungen auf der Browserseite meist nur das Rendern der Seite und eine einfache Benutzerinteraktion berücksichtigen. HTML/DOM plus JavaScript/CSS übernehmen somit die Hauptarbeit des Frontends. Daher gab es in der Vergangenheit keine Frontend-Mitarbeiter, sondern nur Webdesigner. Allmählich gibt es immer mehr Anforderungen an das Frontend, und jQuery hat sich zur am häufigsten verwendeten Paketbibliothek für JavaScript für den Betrieb von DOM entwickelt. Zu diesem Zeitpunkt besteht die Hauptaufgabe von jQuery/JavaScript immer noch darin, ein Werkzeug für die Darstellung und Interaktion des Benutzerbrowser-Terminals zu sein.

Wenn man den Ursprung von jQuery versteht, ist es nicht schwer festzustellen, dass einige der Regeln, die wir zuvor verfolgt haben, wie z. B. unaufdringliches JavaScript, auf die Mittel und Methoden der Implementierung beschränkt waren, um die DOM- und JavaScript-Codelogik zu trennen. Wir haben den wartbareren Wegen den Vorzug gegeben. Nachdem die Front-End-Nachfrage nach JavaScript gestiegen war, erschienen viele MVC/MVP-Front-End-Frameworks sowie das sogenannte

MVW (Model-View-Whatever)

von AngularJS und die One-Size-Fits- Die gesamte Herangehensweise an JavaScript und DOM hat sich geändert. Ursprünglich haben wir über die direkte Bedienung der Schnittstellenanzeige und Benutzerinteraktion nachgedacht. Jetzt haben wir eine clientseitige Datenbindung, umfangreiche Anweisungen und Abhängigkeitsinjektion. Was uns erwartet, ist ein neues Programmiermodell und eine neue Denkweise.