Cómo utilizar las ideas de programación de AngularJS
AngularJS es un excelente marco JS front-end que se ha utilizado en muchos productos de Google. AngularJS tiene muchas características, las más importantes son: MVC, modularización, enlace de datos bidireccional automatizado, etiquetas semánticas, inyección de dependencia, etc. En este artículo, compartimos principalmente con usted cómo usar jQuery y cómo usar las ideas de programación de AngularJS.
1. ¿Cómo puedo diseñar y diseñar aplicaciones web del lado del cliente de manera diferente? ¿Cuál es la mayor diferencia entre ellos? (Nota del traductor: se refiere a jQuery y Angular.js)
2. ¿Qué no debo hacer o usar y qué debo hacer o usar?
3. ¿Existen consideraciones/limitaciones del lado del servidor?
Lo que busco es una comparación detallada entre jQuery y Angular.js. ”
La siguiente es la mejor respuesta de Josh David Miller:
1 Nunca diseñe su página primero y luego use operaciones DOM para cambiarla
En jQuery. , primero diseñas una página y luego la haces dinámica. Esto se debe a que jQuery está diseñado para ser extensible y esta premisa se vuelve cada vez más inflada.
Pero en Angular.js, debes tener la. arquitectura en mente desde el principio. En lugar de comenzar con "Tengo un DOM y quiero que haga X", debe comenzar con lo que desea lograr, luego diseñar su aplicación y finalmente diseñar sus vistas.
2. No extiendas jQuery con Angular.js
Del mismo modo, no empieces con esta idea: jQuery puede hacer X, Y, Z, así que simplemente agrego. Angular.js además para modelos y controladores. Esto es realmente fácil de seducir al principio, por lo que siempre recomiendo que los novatos no utilicen jQuery en absoluto, al menos hasta que se acostumbren a ". angular way"
He visto muchos desarrolladores aquí (Nota del traductor: refiriéndose a stackoverflow) y en la lista de correo, y usan 150. O un complemento jQuery con 200 líneas de código, y luego usando un conjunto confuso de devoluciones de llamada y $apply para unirlo con Angular.js para construir estas soluciones elaboradas, al final funciona. ¡Pero en la mayoría de los casos este problema funciona! ¡A continuación, podemos usar una pequeña parte de Angular.js! código para reescribir el complemento jQuery, y este método hará que todo sea simple, claro y comprensible en un instante.
Creo que la conclusión de este tipo de problemas es: cuándo resuelves un problema. , primero use "pensamiento Angular.js"; si no puede encontrar una solución, pregunte en la comunidad; si todavía no hay una solución simple, no dude en usar jQuery. deja que jqeury se convierta en tu muleta, de lo contrario nunca podrás dominar verdaderamente Angular.js
3 Piensa siempre en términos de arquitectura
En primer lugar, debes conocer esa única página. La estructura también es una aplicación. No es una página web. Por lo tanto, necesitamos tener una mentalidad de desarrollador del lado del servidor más una mentalidad de desarrollador del lado del cliente.
Entonces, ¿cómo se hace? ¿Aprovechar el "pensamiento angularrjs"? Aquí hay algunos principios generales, en comparación con jQuery.
Las vistas son "registros oficiales"
En jQuery, cambiamos las vistas mediante programación.
Podemos definir un menú desplegable a través de la etiqueta ul de la siguiente manera:
En jQuery, según la lógica que aplicamos, Podemos Activarlo con una declaración similar a la siguiente.$('.main-menu').dropdownMenu();Cuando simplemente miramos la vista, no vemos inmediatamente su función. Para aplicaciones pequeñas, esto está bien. Pero para aplicaciones grandes, la situación de repente se vuelve confusa y difícil de mantener.
Pero en Angular.js, una vista es un registro formal de la funcionalidad basada en vistas. Nuestra ul se declara de la siguiente manera:
Ambos en realidad Haga lo mismo, pero en la versión Angular.js, cualquiera que vea esta plantilla sabe lo que va a pasar. Cada vez que un nuevo desarrollador se une al equipo, puede ver de un vistazo que se aplica una directiva llamada dropdownMenu a la vista; no tiene que adivinar ni estudiar el código para encontrar la respuesta correcta. La vista misma nos dice lo que sucederá. Mucho más claro.Los novatos en angularrjs suelen hacer esta pregunta: ¿Cómo encuentro todos los enlaces de un determinado tipo y les agrego un comando? Mis amigos se sorprendieron cuando vieron nuestra respuesta: No hagas esto en absoluto. Pero la razón por la que te aconsejo que no hagas esto es que es mitad jQuery, mitad angulrjs, y eso es realmente malo. El problema aquí es que el desarrollador quiere utilizar jQuery en el contexto de angualrjs. Y esto definitivamente no va a funcionar. Las vistas son registros oficiales. Nunca debes cambiar el DOM fuera del alcance de la directiva (más sobre esto a continuación). Además, las instrucciones se aplican en la vista y el propósito es naturalmente claro.
Recuerda: No diseñes primero y luego modifiques. Primero hay que diseñar y luego pensar en el diseño.
Enlace de datos
Esta es una de las características más interesantes de Angular.js actualmente y elimina instantáneamente todas las operaciones DOM requeridas que mencioné anteriormente.
No es necesario que lo haga usted mismo, ¡Angular.js actualizará automáticamente su vista!
En jQuery, respondemos a eventos y actualizamos contenido, algo como esto:
$. ajax({
url:'/myEndpoint.json',
éxito:función( datos, estado ) {
$('ul#log' ) .append('
}
});La vista se ve así:
Además del problema de las preocupaciones mixtas, también existe el problema del propósito de representación mencionado anteriormente. Es más, tenemos que hacer referencia y actualizar manualmente el nodo dom. Y si queremos eliminar un registro, tenemos que operar programáticamente en el dom nuevamente. ¿Cómo podemos dejar de lado el dom para probar la lógica? Además, ¿y si queremos cambiar la presentación?Es realmente complicado. .
Pero en Angular.js, podemos hacer esto:
$pile('Hello')( $ alcance );
$location.path('/not-matching');
expect( elm.hasClass('active') ).toBeFalsey();
$location.path('/hola');
expect( elm.hasClass('active') ).toBeTruthy();
}));us Ejecutar la prueba y confirme que está fallando. Así que escribamos nuestra directiva:
.directive( 'whenActive',function( $ubicación ) {
return{
alcance:true,
enlace:función( alcance, elemento, atributos ) {
alcance.$on('$routeChangeSuccess',función() {
if( $ubicación. ruta() == element.attr('href') ) {
element.addClass('active');
}
else{
elemento.removeClass('activo');
}
});
}
};
});Ahora nuestra prueba pasa y nuestro menú funciona según lo solicitado. Nuestro desarrollo es iterativo y basado en pruebas, ¡lo cual es genial!
5. Conceptualmente, las instrucciones no están empaquetadas en jQuery.
A menudo escucharás "solo haz operaciones DOM en las instrucciones". Esto es necesario. ¡Por favor muéstrale algo de respeto!
Pero hablemos un poco más profundamente. .
Algunas instrucciones simplemente decoran las existentes en la vista (piense en ngClass), por lo que a veces puede realizar operaciones dom directamente, y básicamente se puede hacer. Pero si una directiva es como un "widget" y tiene una plantilla,
entonces también debe cumplir con el principio de separación de intereses. Es decir, la plantilla también debe mantener la máxima independencia de su implementación en las funciones de enlazador y controlador.
Angular.js viene con un conjunto de herramientas para facilitar esto; usando ngClass podemos actualizar clases dinámicamente; ngBind permite el enlace de datos bidireccional; ngShow y ngHide muestran u ocultan mediante programación un elemento; more_incluidos los que hemos escrito nosotros mismos. En otras palabras, podemos hacer todas las cosas interesantes sin manipulación DOM. Con menos operaciones DOM, las instrucciones son más fáciles de probar, más fáciles de diseñar, más fáciles de cambiar en el futuro y se vuelven más reutilizables y distribuibles.
Veo muchos desarrolladores nuevos de Angular.js usando directivas como un lugar para colocar un montón de jQuery. En otras palabras, piensan: "Como no puedo manipular DOM en el controlador, pondré este código en la directiva". Por supuesto, esto se ve mejor, pero a menudo sigue estando mal.
Piense en el registro que escribimos en la Sección 3. Incluso si lo incluimos en una directiva, todavía queremos hacerlo al "estilo anggualjs". ¡Esto todavía no realiza ninguna manipulación DOM! En muchos casos, la manipulación DOM es necesaria, ¡pero esta situación es mucho menos común de lo que piensas! Antes de utilizar operaciones DMO en todas partes de su aplicación, pregúntese si esto es realmente necesario. Puede que haya una mejor manera.
Aquí hay un ejemplo sencillo para mostrar un patrón que vemos a menudo. Necesitamos un botón de alternancia. (Nota: este ejemplo es un poco artificial y detallado, pero muchas situaciones más complejas se pueden resolver de acuerdo con este ejemplo).
.directive( 'myDirective', function() {
return{
plantilla:'¡Alternarme!',
enlace:función (alcance, elemento, atributos) {
varon =false;
$(elemento).click(función() {
if( on ) {
$(elemento ).removeClass('active');
}
else{
$(element).addClass(' active');
}
on = !on;
});
}
} ;
} );Hay algunos errores aquí. Primero, no se requiere jQuery. ¡Todo lo que hacemos aquí no requiere jQuery! En segundo lugar, incluso si ya tenemos jQuery en la página, no hay razón para usarlo aquí; simplemente podemos usar angular.element y nuestro componente seguirá funcionando incluso en un proyecto sin jQuery. En tercer lugar, incluso si asumimos que jQuery es necesario para que esta directiva funcione, si jqury está cargado, entonces jqLite (angler.element) definitivamente usará jQuery. Por lo tanto, no necesitamos usar $ (Nota del traductor: un identificador de jQuery, que es un alias de la función jQuery). Podemos usar angular.element.
Cuarto, siguiendo el tercer punto, los elementos jqLite no necesitan estar envueltos en $_¡el elemento pasado a la función de enlace ya es un elemento jQuery! Quinto, como mencioné en la sección anterior, ¿por qué mezclamos plantillas en nuestra lógica?
Esta directiva se puede reescribir de forma más compacta (incluso en ejemplos más complejos):
.directive( 'myDirective',function() {
return{
alcance: verdadero,
plantilla:'Alternarme !',
enlace:función( alcance, elemento, atributos ) {
alcance.on =false;
alcance.toggle =función () {
alcance.on = !$scope.on;
};
}
} ;
}); nuevamente, el código de la plantilla está en la plantilla, por lo que usted o sus usuarios pueden cambiarlo fácilmente a un estilo que satisfaga cualquier necesidad y, al mismo tiempo, la lógica no se puede cambiar. Eso es reutilización, ¡sí!
Por supuesto, hay muchos otros beneficios, como realizar pruebas, ¡es fácil! No importa lo que haya en la plantilla, la API interna de la directiva nunca se toca, por lo que la refactorización resulta sencilla. Puedes cambiar tu plantilla a voluntad sin tocar la directiva. Y no importa lo que cambies, tu prueba seguirá pasando.
¡Sí!
Entonces, si las directivas son más que un simple conjunto de funciones estilo jQuery, ¿qué son? Las instrucciones son en realidad extensiones de HTML. Si html no puede hacer algo que usted desea, escribe una directiva para hacerlo y la usa como parte de html.
En otras palabras, si Angular.js de repente no puede hacer el trabajo en cuestión, piense si su equipo puede usar ngClick, ngClass, etc. para hacerlo.