Este artículo explora las diferencias en la implementación de AngularJS y el control tradicional de JavaScript DOM mediante la implementación de dos requisitos comerciales simples, y trata de comprender las ideas de programación de marcos como MVW en el desarrollo popular del front-end.
Este requisito es muy común. Por ejemplo, un menú de dos niveles, cuando se hace clic en el elemento de menú de primer nivel, el elemento submenú correspondiente debe mostrarse o ocultarse.
Implementación de jQuery:
La copia del código es la siguiente:
<!-html->
<ul>
<li>
Artículo 1
<ul>
<li> item Child 1 </li>
</ul>
</li>
</ul>
// javascript
$ ('li.parent_item'). Click (function () {
$ (this) .children ('ul.child'). toggle ();
})
Implementación de AngularJS:
La copia del código es la siguiente:
<!-html->
<ul>
<li ng-click = "hide_child =! Hide_child">
Artículo 1
<ul ng-hide = "hide_child">
<li> item Child 1 </li>
</ul>
</li>
</ul>
La forma tradicional de operar DOM no se describirá en detalle. La implementación de AngularJS requiere mucho refinamiento del código, solo la versión HTML es suficiente. El código anterior utiliza estos puntos de conocimiento de AngularJS:
1.Directivos
2.expresiones
Ng-click y Ng-Hide son directivas (instrucciones) que vienen con el marco. El primero es equivalente a proporcionar un controlador de eventos a la etiqueta Li. Cuando se hace clic en el elemento HTML (li), se ejecutará la expresión hide_child =! Hide_child. Primero veamos la Directiva de Hide Ng, que controlará si el elemento HTML se va a mostrar (implementarse a través de CSS) en función del resultado de la expresión de la asignación (valor de Bolean). Es decir, si la variable Hide_Child es verdadera, entonces UL estará oculto, de lo contrario, el resultado será lo contrario.
Aquí Hide_child es en realidad una variable en $ alcance. Los cambios en su valor también se pueden implementar utilizando el controlador del controlador para envolver un método, pero la declaración actual es relativamente simple y se escribe directamente en la asignación de instrucciones.
A través del análisis de código simple anterior, podemos ver dos características más obvias de AngularJS:
1. Las operaciones DOM se bloquean a través de instrucciones y expresiones, y el código JavaScript adicional se guarda simplemente usando un código simple.
2. La aplicación de directivas y expresiones solo se anidada directamente en HTML, lo cual es algo contrario al estilo de código de JavaScript discreto que JQuery empuja.
Primero veamos otro requisito y luego expliquemos la conclusión anterior en detalle.
Requisito 2: haciendo clic en el DIV, activando la selección de un botón de radio en el formulario
El elemento de forma HTML tradicional no es muy amigable para operar en los dispositivos móviles de hoy. Por ejemplo, la caja de radio del botón de radio requiere una posición precisa en la pantalla táctil para controlar este componente, pero la posición designada manual es muy difícil. Una práctica común es agregar un control de etiqueta correspondiente, pero la relación de ocupación de pantalla del texto en sí no es ideal, y no tiene un efecto claro de comunicación de la información. Por lo tanto, una etiqueta Div o Li con un área más grande generalmente se opera indirectamente.
Implementación de jQuery:
La copia del código es la siguiente:
<!-html->
<ul>
<li>
<input type = "radio"
id = "opción1" />
<etiqueta for = "opción1"> opción 1 </seleting>
</li>
</ul>
// javascript
$ ('li.selection'). Click (function () {
$ (this) .children ('input [type = "radio"]'). Click ();
})
Implementación de AngularJS:
La copia del código es la siguiente:
<!-html->
<ul>
<li ng-repeat = "opción en opciones"
ng-click = "model.option = option.Value"
ng-class = "{activo: model.option == opción.value}">
<input type = "radio"
ng-model = "modelo.Option"
valor = "{{opción.value}}"
id = "opción1" />
<etiqueta for = "opción1"> opción 1 </seleting>
</li>
</ul>
En esta solución, tampoco implicamos un código JavaScript adicional y utilizamos varias instrucciones adicionales. Para comparación y referencia, solo nos importan las expresiones de las dos instrucciones Ng-Hick y Ng-Model.
Primero veamos la directiva NG-Model del elemento de entrada. La asignación aquí significa que asociamos la entrada en la plantilla con el atributo de opción del objeto $ scope.model. Para una comprensión más profunda de la vinculación de datos, puede consultar el enlace de datos. Esta asociación especificada hace que el control de la plantilla se une directamente al modelo de datos, y este enlace es bidireccional. Esto significa que una vez que el usuario modifica el valor en el control (verificación de la entrada de radio), el objeto del modelo correspondiente se reasignará (model.option); Al mismo tiempo, si el valor del objeto modelo cambia, el control de entrada en la plantilla también reflejará los cambios en consecuencia. Y esto en realidad no se logra en la implementación mencionada anteriormente de jQuery.
Por lo tanto, a través del enlace de datos AngularJS, hacer clic en el elemento LI para completar indirectamente el proceso de activación de la entrada es el siguiente:
1. Haga clic en la etiqueta Li para asignar un valor a model.option;
2. Modifique el objeto modelo y ubique el control de entrada correspondiente (el valor del valor es model.option);
3. Active la propiedad verificada del control de entrada
A través de los dos casos anteriores, tenemos una nueva comprensión de la operación del front-end web.
En primer lugar, en términos de implementación técnica, al introducir nuevos conceptos como instrucciones, expresiones, enlace de datos, etc., podemos operar DOM de una manera completamente nueva, en lugar de solo la implementación del código JavaScript que es interoperable con los usuarios y los componentes HTML. Este tipo de cambio en el pensamiento es enorme.
Desde principios de este siglo, el aumento de la programación web dinámica, la tecnología de programación del lado del servidor ha mejorado. Desde el principio, CGI/PHP/ASP produjo .NET vs. Java del idioma y la plataforma. La eficiencia del desarrollo y los procesos de software promovieron el marco MVC/ORM/AOP, etc., y el rendimiento y los grandes datos trajeron NodeJS/NoSQL/Hadoop, etc., mientras que los requisitos técnicos del front-end del navegador no parecían tan radicales. Por un lado, a través del lado del servidor y la base de datos, se pueden satisfacer la mayoría de las necesidades comerciales del modelo B/S; Por otro lado, el navegador en sí tiene diferencias entre las diferentes plataformas, la incompatibilidad con los estándares del lenguaje de secuencias de comandos y la tecnología de representación, así como la falta de potencia informática y consideraciones de seguridad.
En este caso, la mayoría de las veces, el navegador solo necesita considerar la representación de páginas e interacción simple del usuario. HTML/DOM Plus Javasript/CSS logra así el trabajo principal del front-end. Entonces, no había trabajadores front-end en el pasado, solo se necesitaban diseñadores web. Poco a poco, los requisitos para el front-end han aumentado, y JQuery se ha convertido en la biblioteca de paquetes más utilizada para JavaScript operando DOM. En esta etapa, la tarea principal de jQuery/JavaScript sigue siendo solo una herramienta para presentar e interactuar con el terminal del navegador del usuario.
Después de comprender el origen de jQuery, no es difícil encontrar que algunas de las reglas perseguidas en el pasado, como JavaScript discreto, se limitaran a los medios y métodos de implementación en ese momento. Para separar la lógica del código DOM y JavaScript, preferimos el método con un mayor mantenimiento. Después de que aumentó la demanda front-end de JavaScript, surgieron muchos marcos front-end de MVC/MVP, así como el llamado MVW (View-View-Wheling) de AngularJS, y el enfoque único de JavaScript y DOM ha cambiado. Originalmente, consideramos el funcionamiento directo de la visualización de la interfaz y la interacción del usuario, pero ahora tenemos datos de enlace del cliente, instrucciones ricas e inyección de dependencia. Lo que nos espera será un nuevo modelo de programación y una forma de pensar.