Vor der Implementierung der Registerkarte "AngularJS im MVVM-Stil" ziehen wir zunächst unsere häufig verwendete JQuery-Implementierung aus.
1. JQuery erreicht einen einfachen und rohen Tab -Effekt
var nav = $ (". tabs"); // tab switch var box = $ (". box"); // container nav.on ("klicken", function () {// klicken event var this_index = $ (this) .Index (); box.eq (this_index) .show (). selings (). hide ();});Hier wird nur der Kernteil von JS angegeben, und HTML und CSS sind nicht detailliert.
Der obige Code implementiert einfach und grob den Registerkarteffekt und verwendet das Klickereignis, um elem.index() zu erhalten, den Index und den Container zusammenzuziehen, um die Anzeige zu steuern und auszublenden.
2. AngularJs implementiert einen einfachen Tab -Effekt
HTML -Teil
<Abschnitt ng-App = "MyApp"> <div ng-controller = "tabcontroller als tab"> <nav> <ul> <li ng-class = "{'current': tab.isset (1)}"> <a href = "#" ng-klick ng-class="{'current':tab.isSet(2)}"> <a href="#" ng-click="tab.setCurrent(2)"><span>Work</span></a></li> <li ng-class="{'current':tab.isSet(3)}"> <a href="#" ng-klick = "tab.setCurrent (3)"> <span> blog </span> </a> </li> <li ng-class = "{current ': tab.isset (4)}"> <a href = "#" ng-klick = "tab.setcurent (4)"> </span> über </span> </span> </lin> </li> </li> </li> </li> </li> </li> </li> </li> </li> </li> </li> </li> </li> </li> </li> </li> </li> </li> </li> </li> </li> </li> </lin> </span> </span> ng-class = "{'current': tab.isset (5)}"> <a href = "#" ng-klick = "tab.setCurrent (5)"> <span> Kontakt </span> </a> </li> </nav> <div> <id = "Abschnitt-1" ng-show = "tab. ng-show="tab.isSet(2)"> <p>2</p> </section> <section id="section-3" ng-show="tab.isSet(3)"> <p>3</p> </section> <section id="section-4" ng-show="tab.isSet(4)"> <p>4</p> </section> <section id="section-5" ng-show = "tab.isset (5)"> <p> 5 </p> </abschnitt> </div> </Abschnitt> CSS -Teil (Um uns zu ermöglichen, Less Syntax zu verwenden, können Kinderschuhe CSS anpassen, um personalisierte Effekte zu erzielen).
* {Margin: 0; Polsterung: 0;} Körper {Hintergrund: #e7ecea; Schriftgewicht: 600; Schriftfamilie: 'Raleway', Arial, Sans-Serif; text-align: center;} a {color: #2cc185; Textdekoration: Keine; Umriss: Keine; &: Hover {Farbe: #74777b; }}. tabs {Position: relativ; Breite: 100%; Rand: 30px Auto 0 Auto; nav {ul {Position: relativ; Anzeige: Flex; Max-Breite: 1200px; Rand: 0 Auto; Listenstil: Keine; Flex-Flow: Zeilenverpackung; Justify-Content: Center; li {flex: 1; & .Current a {color: #74777b; }}}}} a {display: block; Position: Relativ; Überlauf: versteckt; Zeilenhöhe: 2.5; span {vertikal-align: Middle; Schriftgröße: 1,5EM; }}}. Inhalt {Position: relativ; Abschnitt { /* Anzeige: Keine; */ Margin: 0 Auto; Max-Breite: 1200px; & .Content-Strom { /* Anzeige: Block; */} P {Farbe: RGBA (40,44,42, 0,4); Rand: 0; Polsterung: 1,75em 0; Schriftgewicht: 900; Schriftgröße: 5EM; Linienhöhe: 1; }}}. tabs-style {nav { /* Hintergrund: RGBA (255,255,255,0,4); */ ul li {a {Überlauf: sichtbar; Grenzboden: 1PX Solid RGBA (0,0,0,0,2); -Webkit-Übergang: Farbe 0,2s; Übergang: Farbe 0,2s; }} ul li li.current a {&: nach acht &: vor {content: ''; Position: absolut; Oben: 100%; Links: 50%; Breite: 0; Höhe: 0; Grenze: solide transparent; } &: nach {margin -links: -10px; Randbreit: 10px; Border-Top-Color: #e7ecea; } &: vor {margin -links: -11px; Grenzbreit: 11px; Grenze-Top-Farben: RGBA (0,0,0,0,2); }}}}JS Teil
Angular.module ('myApp', []) .Controller ('tabController', function () {this.current = 1; this.setCurrent = Funktion (tab) {this.current = tab;}; isset = function (tab) {return this.current == tab;};};});Der endgültige Effekt ist in der folgenden Abbildung dargestellt:
Über den obigen Code können wir feststellen, dass der Kern der Implementierung ng-class und ng-click und ng-show Richtlinien ist.
In einfachen Worten: Der Controller definiert aktuelle Daten. Der Standardwert der Daten beträgt 1. ng-click passt die Funktion des Klickereignisses an und ändert die current Daten. ng-class erhält current Wertbindungsbedingung und fügt dem aktuell ausgewählten Index einen current Stil hinzu. Der Container erhält auch current Daten im controller und zeigt an, dass sie über ng-show Steuerung versteckt sind.
3.. AngularJs erzielt einen etwas komplexen mobilen Registerkarten -Effekt
HTML -Teil
<script src = "http://cdn.bootcss.com/angular.js/1.3.8/angular.min.js"> </script> <script src = "http://cdn.bootcs.com/angular.js/1.3.8/angular-min.min ng-app='myApp' ng-controller="myController"> <div> <div ng-repeat="item in [1,2,3,4]" ng-click="changeIndex($index)">Tab{{item}}</div> </div> <div> <div style="left:{{ 25*activeIndex}}%"></div> </div> <div ng-swipe-right="swipeRight()" ng-swipe-left="swipeLeft()"> <div style="left:{{ -100*activeIndex}}%"> <div ng-repeat="item in [1,2,3,4]" > <br /><br /><br /><br /><br /> <h1>Tab{{item}} FachkraftCSS -Teil
*{Padding: 0; Rand: 0; Schriftfamilie: 'Arial';}. Typ-tabs {Breite: 100%; Höhe: 40px;}. Typ-tabs div {float: links; Breite: 25%; Zeilenhöhe: 40px; Text-Align: Mitte; Cursor: Zeiger; Benutzer-Select: Keine; -Webkit-User-Select: Keine;}. Randtop: -3px;}. Höhe: 3px; Hintergrundfarbe: #345; Position: absolut; Links: 50%; Übergang: Alle 400 ms. Höhe: 500px; Hintergrundfarbe: #CCC; Überlauf: Hidden;}. Tab-Inner-Inner {Breite: 400%; Position: Relativ; Übergang: Alle 400 ms;}. Registerkarte Content-Item {Breite: 25%; float: links; Text-Align: Mitte;}JS Teil
var myapp = angular.module ('myapp', ['ngtouch']); MyApp.Controller ('MyController', Funktion ($ scope) {$ scope.activeIndex = 0; $ scope.activeIndex = ++ $ scope.activeIndex; if ($ scope.activeIndex <0) $ scope.activeIndex = 3;Die Effekte sind wie folgt:
Okay, heute werden wir diese beiden Beispiele geben. Sie können die Kinderschuhe, die Sie über AngularJs gelernt haben, schnell verstehen, indem Sie den Code direkt betrachten. Kinderschuhe, die Sie noch nie verstanden haben, können in diesen beiden Beispielen auch etwas über die schwarze Magie von MVVM und seine Codeorganisation lernen.
4. Was ist besser am MVVM -Modus von AngularJs als an der DOM -Operation von JQuery?
1. Aus Makro -Sicht besteht eine darin, Daten und Prozessdaten zu bedienen, und der andere ist die DOM- und UI -Interaktion zu betreiben.
Der Prozess eines allgemeinen Webprojekts kann in drei Prozesse zusammengefasst werden: 1) Sie möchten die Daten auf der Schnittstelle 2) Tauschen Sie Daten im Hintergrund aus 3) nach dem Erhalt der Daten die Schnittstelle neu rendern. Wie implementieren Sie in diesem Prozess den Datenaustausch mit dem Backend? JQuery ist Ajax. Wenn die Datenaustausch -API mehr als 20 annimmt, wie viele $ .get oder $ .Ajax müssen Sie schreiben, um alles einzuschließen? Darüber hinaus befinden sich alle API -Links nicht am selben Ort, was ziemlich problematisch zu verwalten ist. Und AngularJs konfigurieren nur route .
Wie verwalten Sie diese Daten nach dem Erhalt der Daten und wie rendern Sie die Daten an die Schnittstelle?
Wie kann man verschiedene Ereignisse verwalten? JQuery selbst ist durch Ereignisauslöser gekennzeichnet. Wenn Sie einen Prozess zum Auslösen von Ereignissen-> Daten verarbeiten. Sobald es mehr Funktionen gibt, wird der Code wie Nudeln miteinander verflochten. Es gibt zwei oder drei Jahre lang viele traditionelle JQuery-Frontendungen. Ich habe keine eingehende Untersuchungen zu Event-Delegation, DOM-Operationen, Browser-Rendering-Prozessen, Plug-in-Komponentenverpackungen usw. untersucht, sodass Sie sich vorstellen können, wie schlimm die Codequalität ist. Tatsächlich ist JQuery eine Klassenbibliothek, kein Entwicklungsrahmen. JQ ist eine weitere Verkapselung der nativen JS -APIs, mit der Sie DOM -Operationen, Animationsoperationen und Ajax glücklicher ausführen können. Genau deshalb ist es zu flexibel, dass es einfacher ist, schwer zu machenden Code zu schreiben.
2. Leistung: DOM -Operation ist langsam und das DOM -Objekt selbst ist auch ein JS -Objekt. Genau genommen ist es nicht so, dass das Betrieb dieses Objekts langsam ist, sondern dass nach dem Betrieb dieses Objekts einige Browserverhalten ausgelöst werden, wie z. B. Layout und Malerei.
Zusammenfassen
Da Webprodukte immer komplexer werden, ist hierarchische Architektur unerlässlich. Daher wird die Zwei-Wege-Bindung als Gegenmittel verwendet, kombiniert mit dem MVC-Gerüst, das seit langem populär ist. Das MVVM-Artefakt wurde abgeleitet. Der Blogger ist fest davon überzeugt, dass MVVM die ultimative Lösung für das Front-End sein wird. Vom DOM -Betrieb bis zur Datenoperation benötigt es einen Prozess, um sich anzupassen, aber solange das Ergebnis gut ist, sind diese Bemühungen wert. In diesem Prozess ist es auch eine Verbesserung Ihrer beruflichen Fähigkeiten. Komm schon, meine Freunde! ! !