Antes de implementar la pestaña estilo MVVM de AngularJS, primero mudamos nuestra implementación de jQuery de uso común.
1. JQuery logra un efecto de pestaña simple y crudo
var nav = $ (". Tabs"); // Tab Switch var box = $ (". Box"); // Container Nav.on ("Click", function () {// Haga clic en Event var this_index = $ (this) .index (); $ (this) .addclass ("activo"). Siblings (). RemoveClassS ("Active"); box.eq (this_index) .show (). Siblings (). Hide ();});Aquí solo se da la parte central de JS, y HTML y CSS no se detallan.
El código anterior implementa simplemente y aproximadamente el efecto de pestaña y utiliza el evento de clic para obtener elem.index() , une el índice y el contenedor para controlar la pantalla y ocultarlo.
2. AngularJS implementa un simple efecto de pestaña
Parte html
<sección ng-app = "myApp"> <div ng-controller = "tabcontroller as pests"> <am> <ul> <li ng-class = "{'current': tab.isset (1)}"> <a href = "#" ng-click = "tab.setCurrent (1)"> <pan> home </span> </a> </li> </li> </li> ng-class = "{'actual': 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 = "{'actual': tab.isset (4)}"> <a href = "#" ng-click = "tab.setCurrent (4)"> <span> sobre </span> </a> </li> <li <li> <li <li> <li <li> <li <li> <li <li> <li <li> <li <li> <li <li> <li <li> <li <li> <li <li> <li <li> <li <li> <li> ng-class = "{{'actual': tab.isset (5)}"> <a href = "#" ng-chick = "tab.setCurrent (5)"> <span> contact </span> </a> </li> </ar 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> <secti = "Sección-5" ng-show = "tab.isset (5)"> <p> 5 </p> </section> </div> </section> Parte de CSS (para facilitarnos usar Less sintaxis, los zapatos para niños pueden personalizar CSS para lograr efectos personalizados)
* {margen: 0; Pading: 0;} cuerpo {fondo: #e7eCea; Font-peso: 600; Font-Family: 'Raleway', Arial, Sans-Serif; text-align: center;} a {color: #2cc185; Decoración de texto: ninguna; Esquema: ninguno; &: hover {color: #74777b; }}. Tabs {posición: relativo; Ancho: 100%; Margen: 30px Auto 0 Auto; Nav {UL {posición: relativo; Pantalla: Flex; Max-Width: 1200px; margen: 0 auto; Estilo de lista: Ninguno; Flex-flujo: envoltura de fila; Justify-Content: Center; li {flex: 1; & .Current A {Color: #74777b; }}}}} a {Display: Block; Posición: relativo; desbordamiento: oculto; Línea de altura: 2.5; span {vertical-align: middle; tamaño de fuente: 1.5em; }}}. contenido {posición: relativo; Sección { /* Display: None; */ margen: 0 auto; Max-Width: 1200px; & .Content-Current { /* Display: Block; */} P {color: RGBA (40,44,42, 0.4); margen: 0; relleno: 1.75em 0; Font-peso: 900; tamaño de fuente: 5em; Línea de altura: 1; }}}. Tabs-Style {Nav { /* Background: RGBA (255,255,255,0.4); */ ul li {a {desbordamiento: visible; Border-Bottom: 1px RGBA sólido (0,0,0,0.2); -Webkit-transición: color 0.2s; Transición: color 0.2s; }} ul li li.current a {&: después, &: antes {content: ''; Posición: Absoluto; arriba: 100%; Izquierda: 50%; Ancho: 0; Altura: 0; borde: sólido transparente; } &: después de {margen -izquierda: -10px; ancho fronterizo: 10px; border-top-color: #e7eCea; } &: antes {margen -izquierda: -11px; ancho fronterizo: 11px; border-top-color: RGBA (0,0,0,0.2); }}}}parte 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;};});El efecto final se muestra en la figura a continuación:
A través del código anterior, podemos encontrar que el núcleo de la implementación son ng-class y ng-click y ng-show incorporadas en AngularJS.
En términos simples: el controlador define los datos actuales. El valor predeterminado de los datos es 1. ng-click personaliza la función del evento de clic y cambia los datos current . ng-class obtiene current y agrega un estilo current al índice seleccionado actualmente. El contenedor también obtiene current en controller y los muestra ocultos a través ng-show .
3. AngularJS logra un efecto de pestaña móvil ligeramente complejo
parte 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"> </script> // a mobile touch para biblioteca para móviles para los móviles <diNGULET para la biblioteca de touch para móviles. ng-app = 'myApp' ng-concontroller = "myController"> <div> <div ng-depreat = "elemento en [1,2,3,4]" ng-click = "cambieindex ($ index)"> tab {{item}} </div> div> <divsy <iv style = "izquierda: {{{25*25*activo}}%" ng-swipe-right = "swiperight ()" ng-swipe-left = "swipeLeft ()"> <div style = "izquierda: {{-100*activoindex}}%"> <div ng-epeat = "elemento en [1,2,3,4]"> <Br /> <Br /> <Br /> <Br /> <Br /> <H-H1> </h1> </div> </div> </div> </div> </div> </div> </div>Parte de CSS
*{relleno: 0; margen: 0; Font-Family: 'Arial';}. Tipo-Tabs {ancho: 100%; altura: 40px;}. Tipo-Tabs div {float: izquierda; Ancho: 25%; Línea de altura: 40px; Text-Align: Center; cursor: puntero; Usuario-selección: ninguno; -webkit-user-select: none;}. Guid-bar {posición: relativo; margen-top: -3px;}. guía-bar-contenido {ancho: 25%; Altura: 3px; Color de fondo: #345; Posición: Absoluto; Izquierda: 50%; Transición: todos los 400 ms de facilidad;}. Tab-Content {ancho: 100%; Altura: 500px; Color de fondo: #CCC; desbordamiento: Hidden;}. Tab-Content-Inner {ancho: 400%; Posición: relativo; Transición: todos los 400 ms;}. Tab-Content-Item {ancho: 25%; flotante: izquierda; Text-Align: Center;}parte js
var myApp = angular.module ('myApp', ['ngTouch']); myApp.Controller ('myController', function ($ scope) {$ scope.activeIndex = 0; $ scope.changeindex = function (index) {$ scope.activeIndex = index;}; $ scope.swipeleft = function () $ Scope.ActiveIndex = ++ $ Scope.ActiveIndex; if ($ scope.activeIndex <0) $ scope.activeIndex = 3;Los efectos son los siguientes:
Bien, hoy daremos estos dos ejemplos. Puede comprender rápidamente los zapatos de los niños que ha aprendido sobre AngularJs mirando el código directamente. Los zapatos para niños que nunca has entendido también pueden aprender sobre la magia negra de MVVM y la estructura de su organización de código a través de estos dos ejemplos.
4. ¿Qué tiene de mejor el modo MVVM de AngularJS que la operación DOM de jQuery?
1. Desde una perspectiva macro, uno es operar datos y datos de procesos, y el otro es operar la interacción DOM y UI.
El proceso de un proyecto web general se puede resumir en tres procesos: 1) Desea obtener los datos en la interfaz 2) Intercambiar datos en el fondo 3) Después de obtener los datos, vuelva a renderizar la interfaz. En este proceso, ¿cómo implementa el intercambio de datos con el backend? JQuery's Ajax. Si la API de intercambio de datos asume más de 20, ¿cuántos $ .get o $ .AJAX necesita escribir para incluirlo todo? Además, todos los enlaces de API no están en el mismo lugar, lo cual es bastante problemático de administrar. Y Angularjs simplemente configuran route .
Después de obtener los datos, ¿cómo administra estos datos y cómo representa los datos en la interfaz?
¿Cómo administrar varios eventos? JQuery en sí se caracteriza por la activación del evento. Muchas veces, es cuando escribe un proceso para desencadenar eventos-> Datos de procesamiento. Obviamente, una vez que haya más funciones, el código se entrelazará como fideos. Hay muchos front-end tradicionales a mi alrededor durante dos o tres años. No he estudiado investigaciones en profundidad sobre delegación de eventos, operaciones DOM, procesos de representación del navegador, embalaje de componentes enchufables, etc., por lo que puede imaginar cuán mala es la calidad del código. De hecho, JQuery es una biblioteca de clase, no un marco de desarrollo. JQ es una encapsulación adicional de las API nativas de JS, lo que le permite realizar operaciones DOM, operaciones de animación y AJAX más felizmente. Es precisamente porque es demasiado flexible que sea más fácil escribir un código difícil de mantener.
2. Rendimiento: la operación DOM es lenta, y el objeto DOM en sí también es un objeto JS. Tan estrictamente hablando, no es que operar este objeto sea lento, pero que después de operar este objeto, se activarán algunos comportamientos del navegador, como el diseño y la pintura.
Resumir
A medida que los productos web se vuelven cada vez más complejos, la arquitectura jerárquica es esencial. Por lo tanto, la unión de dos vías se usa como antídoto, combinado con el marco MVC que ha sido popular durante mucho tiempo, se derivó el artefacto MVVM. El blogger cree firmemente que MVVM será la solución definitiva para el front-end. Desde la operación DOM hasta la operación de datos, se necesita un proceso para adaptarse, pero mientras el resultado sea bueno, estos esfuerzos valen la pena. En este proceso, también es una mejora para sus habilidades profesionales. ¡Vamos, mis amigos! ! !