Avant d'implémenter l'onglet de style MVVM d'AngularJS, nous éloignons d'abord notre implémentation JQuery couramment utilisée.
1. JQUERY réalise un effet d'onglet simple et brut
var nav = $ (". onglets"); // onglet commutateur var box = $ (". box"); // contener nav.on ("click", function () {// cliquer event var this_index = $ (this) .index (); $ (this) .addclass ("active"). sileds (). renoveclass ("active"); box.eq (this_index) .show (). si frères (). hide ();});Seule la partie centrale de JS est donnée ici, et HTML et CSS ne sont pas détaillés.
Le code ci-dessus implémente simplement et grossièrement l'effet d'onglet et utilise l'événement de clic pour obtenir elem.index() , enchaîner l'index et le conteneur ensemble pour contrôler l'affichage et le masquer.
2. Angularjs implémente un effet d'onglet simple
Partie HTML
<section ng-app = "myApp"> <div ng-controller = "tabController as Tab"> <Av> <ul> <li ng-class = "{'current': tab.isset (1)}"> <a href = "#" ng-Click = "tab.setcurrent (1)"> <pan> home </pan> </a> 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-click = "tab.setCurrent (3)"> <span> blog </span> </a> </li> <li ng-class = "{'current': tab.isset (4)}"> <a href = "#" ng-click = "tab.setcurrent (4)"> <span> ng-class = "{'current': tab.isset (5)}"> <a href = "#" ng-click = "tab.setCurrent (5)"> <span> Contact </span> </a> </li> </av> <div> <section id = "section-1" ng-show = "section id =" 1) "> <p> 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-shew = "tab.isset (4)"> <p>. ng-show = "tab.isset (5)"> <p> 5 </p> </ section> </div> </ section> CSS Part (pour nous faciliter d'utiliser Less de syntaxe, les chaussures pour enfants peuvent personnaliser CSS pour obtenir des effets personnalisés)
* {margin: 0; rembourrage: 0;} corps {arrière-plan: # e7ecea; Police-poids: 600; Font-Family: «Raleway», Arial, Sans-Serif; Text-Align: Center;} a {Color: # 2CC185; Décoration du texte: aucune; Aperçu: aucun; &: Hover {Color: # 74777b; }}. Tabs {position: relative; Largeur: 100%; marge: 30px Auto 0 Auto; nav {ul {position: relative; Affichage: flex; largeur maximale: 1200px; marge: 0 auto; Style de liste: aucun; flexion-flux: enveloppement en rang; Justification-contenu: centre; li {flex: 1; & .Current a {couleur: # 74777b; }}}}} a {display: block; Position: relative; débordement: caché; hauteur de ligne: 2,5; Span {Vertical-Align: Middle; taille de police: 1.5EM; }}}. Contenu {position: relative; Section {/ * affichage: aucun; * / marge: 0 auto; largeur maximale: 1200px; & .Content-Current {/ * affichage: Block; * /} p {couleur: rgba (40,44,42, 0,4); marge: 0; rembourrage: 1.75em 0; Police-poids: 900; taille de police: 5EM; hauteur de ligne: 1; }}}.. * / ul li {a {overflow: visible; Border-Bottom: 1px RGBA solide (0,0,0,0,2); -Webkit-Transition: Couleur 0.2S; transition: couleur 0,2 s; }} ul li li.current a {&: after, &: avant {contenu: ''; Position: absolue; en haut: 100%; Gauche: 50%; Largeur: 0; hauteur: 0; Border: solide transparent; } &: après {margin-left: -10px; largeur de bordure: 10px; Border-top-Color: # E7ECEA; } &: avant {margin-left: -11px; largeur frontalière: 11px; Border-top-Color: RGBA (0,0,0,0,2); }}}}partie js
angular.module ('myApp', []) .Controller ('tabController', function () {this.current = 1; this.setCurrent = function (tab) {this.current = tab;}; this.isset = function (tab) {return this.current == tab;};});L'effet final est illustré dans la figure ci-dessous:
Grâce au code ci-dessus, nous pouvons constater que le noyau de l'implémentation est ng-class et ng-click et ng-show construites dans AngularJS.
En termes simples: le contrôleur définit les données actuelles. La valeur par défaut des données est 1. ng-click personnalise la fonction de l'événement de clic et modifie les données current . ng-class obtient current et ajoute un style current à l'index actuellement sélectionné. Le conteneur obtient également current dans controller et l'affiche cachée via ng-show .
3. AngularJS réalise un effet d'onglet mobile légèrement complexe
partie HTML
<script src = "http://cdn.bootcss.com/angular.js/1.3.8/angular.min.js"> </ script> <script src = "http://cdn.bootcss.com/angular.js/1.3.8/angular-touch.min.js"> </angar ng-app = 'myApp' ng-controller = "myController"> <div> <div ng-repeat = "item dans [1,2,3,4]" ng-Click = "ChangeIndex ($ index)"> onglet {{item}} </ div> </ div> <v> <div style = "Left: {{{25 * actif <div ng-swipe-right = "swipeRight ()" ng-swipe-left = "swipeleft ()"> <div style = "Left: {{-100 * IMTIFSIndex}}%"> <div ng-repeat = "item in [1,2,3,4]"> <br /> <br /> <br /> <br /> <br / br /> <h1> onglet {{item}} </h1> </div> </div> </div> </div> </div> </div> </div>Partie CSS
* {rembourrage: 0; marge: 0; Font-Family: 'Arial';}. Type-tabs {largeur: 100%; hauteur: 40px;}. Type-tabs div {float: Left; Largeur: 25%; hauteur de ligne: 40px; Texte-aligne: Centre; curseur: pointeur; utilisateur-sélection: aucun; -Webkit-user-Select: Aucun;}. Guid-Bar {position: relative; marge-top: -3px;}. Guid-Bar-content {largeur: 25%; hauteur: 3px; Color en arrière-plan: # 345; Position: absolue; Gauche: 50%; Transition: toutes les 400 ms facilité;}. Tab-content {largeur: 100%; hauteur: 500px; Color d'arrière-plan: #ccc; Overflow: Hidden;}. Tab-Content-inner {Width: 400%; Position: relative; Transition: tous les 400 ms;}. Tab-Content-Item {largeur: 25%; flottant: à gauche; Texte-aligne: Centre;}partie js
var myapp = angular.module ('myapp', ['ngtouch']); myApp.Controller ('MyController', fonction ($ scope) {$ scope.activeIndex = 0; $ scope.changeIndex = fonction (index) {$ scope. $ scope. if ($ scope.activeIndex <0) $ scope.activeIndex = 3;Les effets sont les suivants:
D'accord, aujourd'hui, nous donnerons ces deux exemples. Vous pouvez rapidement comprendre les chaussures des enfants que vous avez apprises sur AngularJS en regardant directement le code. Les chaussures pour enfants que vous n'avez jamais compris peuvent également découvrir la magie noire de MVVM et sa structure d'organisation du code à travers ces deux exemples.
4. Quoi de mieux dans le mode MVVM d'AngularJS que le fonctionnement DOM de jQuery?
1. Du point de vue macro, l'une consiste à faire fonctionner les données et les données de traitement, et l'autre consiste à faire fonctionner l'interaction DOM et UI.
Le processus d'un projet Web général peut être résumé en trois processus: 1) Vous souhaitez obtenir les données sur l'interface 2) Échangez des données en arrière-plan 3) Après avoir obtenu les données, renforcez l'interface. Dans ce processus, comment implémentez-vous l'échange de données avec le backend? JQUERY'S AJAX. Si l'API d'échange de données suppose plus de 20, combien de $ .get ou $ .ajax avez-vous besoin d'écrire pour tout inclure? De plus, tous les liens API ne sont pas au même endroit, ce qui est assez gênant à gérer. Et AngularJs configure simplement route .
Après avoir obtenu les données, comment gérez-vous ces données et comment rendez-vous les données à l'interface?
Comment gérer divers événements? JQuery lui-même est caractérisé par le déclenchement des événements. Plusieurs fois, c'est lorsque vous rédigez un processus pour déclencher des événements-> Traitement des données. De toute évidence, une fois qu'il y a plus de fonctions, le code sera entrelacé comme des nouilles. Il y a beaucoup de fronts JQuery traditionnels autour de moi pendant deux ou trois ans. Je n'ai pas étudié des recherches approfondies sur la délégation des événements, les opérations DOM, les processus de rendu de navigateur, l'emballage de composants plug-in, etc., afin que vous puissiez imaginer à quel point la qualité du code est mauvaise. En fait, JQuery est une bibliothèque de classe, pas un cadre de développement. JQ est une autre encapsulation des API natives JS, vous permettant d'effectuer des opérations DOM, des opérations d'animation et Ajax plus heureusement. C'est précisément parce qu'il est trop flexible qu'il est plus facile d'écrire du code difficile à maintenir.
2. Performance: l'opération DOM est lente, et l'objet Dom lui-même est également un objet JS. Si à proprement parler, ce n'est pas que l'exploitation de cet objet soit lent, mais qu'après avoir opéré cet objet, certains comportements du navigateur seront déclenchés, comme la disposition et la peinture.
Résumer
À mesure que les produits Web deviennent de plus en plus complexes, l'architecture hiérarchique est essentielle. Par conséquent, la liaison bidirectionnelle est utilisée comme antidote, combinée avec le cadre MVC qui est populaire depuis longtemps, l'artefact MVVM a été dérivé. Le blogueur estime fermement que MVVM sera la solution ultime pour le front-end. Du fonctionnement DOM à l'exploitation des données, il faut un processus pour s'adapter, mais tant que le résultat est bon, ces efforts en valent la peine. Dans ce processus, il s'agit également d'une amélioration de vos capacités professionnelles. Allez, mes amis! ! !