Tres marcos de front-end web convencionales: 1. Angular, un marco de front-end utilizado para crear una interfaz de aplicación única, con potentes funciones de módulo y comandos personalizados 2. React, un JavaScript utilizado para crear interfaces de usuario Marco de desarrollo, utilizado principalmente para construir UI; 3. vue, es un marco de JavaScript progresivo para crear interfaces de usuario. La biblioteca principal de Vue solo se centra en la capa de vista y es muy fácil de aprender e integrar con otras bibliotecas o proyectos existentes.
El entorno operativo de este tutorial: sistema Windows 7, computadora Dell G3.
En los últimos diez años, la industria de TI se ha desarrollado rápidamente y han surgido muchas profesiones nuevas, como diseñadores de UI, ingenieros de desarrollo, ingenieros de pruebas de software, etc. Entre las muchas nuevas profesiones de alto perfil, los ingenieros de front-end web son una de a ellos. Entonces, ¿cuáles son los tres marcos principales para el front-end web?
Los tres principales marcos de front-end web son Angular, React y Vue.
1. angulares
AngularJS fue creado en 2009 por Misko Hevery y otros, y luego fue adquirido por Google. Es un excelente marco JS front-end que se utiliza en muchos productos. No es solo un marco de desarrollo front-end con conceptos avanzados, sino también una solución de un extremo a otro. Sigue el patrón MVC en el diseño arquitectónico y aboga por un acoplamiento flexible de datos y componentes de procesamiento lógico. AngularJS implementa la extensión natural de HTML a través de tecnología de instrucción y realiza la sincronización automática bidireccional del modelo de datos y la vista de visualización a través de tecnología de compilación, aliviando operaciones DOM complejas. Además, también proporciona un buen soporte para la tecnología de pruebas automatizadas de front-end.
Angular es un marco de front-end para crear interfaces de aplicaciones únicas. Tiene muchas características principales, como enlace de datos, servicios, directivas, inyección de dependencias, etc. Tiene potentes funciones de módulo y tiene las ventajas de los comandos personalizados.
característica:
1. Buena estructura de aplicación
2. Enlace de datos bidireccional
3.Instrucciones
4.Plantilla HTML
5. Puede integrarse, inyectarse y probarse.
ventaja:
1. La plantilla es potente y rica en funciones, y viene con un conjunto extremadamente rico de instrucciones angulares.
2. Es un marco front-end relativamente completo, que incluye servicios, plantillas, enlace de datos bidireccional, modularización, enrutamiento, filtros, inyección de dependencia y otras funciones;
3. Personalice las instrucciones Después de personalizar las instrucciones, puede usarlas varias veces en el proyecto.
4. La modularización de ng introduce audazmente algunas cosas de Java (inyección de dependencia), lo que facilita la escritura de código reutilizable, lo cual es muy útil para los equipos de desarrollo ágiles.
5.angularjs es desarrollado por el gigante de Internet Google, lo que también significa que tiene una base sólida y apoyo de la comunidad.
defecto:
1. Comenzar con angular es fácil, pero una vez que profundizas, hay muchos conceptos que son difíciles de entender durante el aprendizaje.
2. Hay muy pocos ejemplos en la documentación. La documentación oficial básicamente solo habla de la API sin ningún ejemplo. En muchos casos, puede obtener instrucciones específicas de Google o preguntarle directamente a Misko, el autor de Angular.
3. La compatibilidad con IE6/7 no es particularmente buena, pero puedes usar jQuery para escribir tu propio código para resolver algunos problemas.
4. Hay algunos tutoriales de mejores prácticas sobre la aplicación de instrucciones. Angular es en realidad muy flexible. Si no sigue los principios de uso de algunos autores, es fácil escribir códigos diferentes. Por ejemplo, hay muchas operaciones DOM en js. que son similares a jQuery.
5. La inyección de dependencia DI requiere una declaración explícita si se requiere compresión de código.
2.Reaccionar
React, producido por Facebook, se lanzó oficialmente en 2013, 4 años después que angular. Sin embargo, gracias a su innovador VirtualDOM, superó a angularJS en rendimiento. Una vez lanzado, se volvió muy popular. Tiene muchas características, incluidas VirtualDOM, JSX, algoritmo Diff, etc., admite la sintaxis ES6 y utiliza programación funcional. El umbral es ligeramente más alto, pero también es más flexible, lo que permite más posibilidades de desarrollo.
característica
1. Diseño declarativo: React adopta un paradigma declarativo, lo que facilita la descripción de aplicaciones.
2. Eficiente: React minimiza la interacción con el DOM simulando el DOM.
3. Flexible: React funciona bien con bibliotecas o marcos conocidos.
ventaja:
1. Velocidad rápida: durante el proceso de renderizado de la interfaz de usuario, React implementa actualizaciones parciales del DOM real a través de microoperaciones en el DOM virtual.
2. Compatibilidad entre navegadores: Virtual DOM nos ayuda a resolver problemas entre navegadores. Nos proporciona una API estandarizada, que no es un problema incluso en IE8.
3. Modularización: escriba componentes de interfaz de usuario modulares independientes para su programa, de modo que cuando haya un problema con uno o algunos componentes, pueda aislarlo fácilmente.
4. Flujo de datos unidireccional: Flux es una arquitectura para crear una capa de datos unidireccional en aplicaciones JavaScript. 5. JavaScript puro e isomórfico: debido a que los rastreadores de los motores de búsqueda dependen de las respuestas del lado del servidor en lugar de la ejecución de JavaScript, pre-renderizar su aplicación. ayuda con el SEO. 6. Buena compatibilidad: por ejemplo, RequireJS se utiliza para cargar y empaquetar, mientras que Browserify y Webpack son adecuados para crear aplicaciones grandes. Hacen que esas difíciles tareas sean menos desalentadoras. Desventajas: React en sí es solo una V, no un marco completo, por lo que si desea un marco completo para un proyecto grande, básicamente necesita agregar ReactRouter y Flux para escribir aplicaciones grandes.
3.vista
Como el último marco lanzado (2014), Vue se basa en las características de sus predecesores angular y reaccionar (como VirtualDOM, enlace de datos bidireccional, algoritmo de diferencias, propiedades de respuesta, desarrollo de componentes, etc.) y realiza optimizaciones relevantes para hacerlo. utilizable. Más conveniente, más fácil de comenzar y menos adecuado para principiantes.
característica:
1.Marco ligero
2. Enlace de datos bidireccional
3.Instrucciones
4. Complemento
ventaja:
1. Simple: la documentación oficial es muy clara y más fácil de aprender que Angular.
2. Rápido: actualice DOM en procesamiento por lotes asincrónico.
3. Composición: Componga su aplicación con componentes desacoplados y reutilizables.
4. Compacto: ~18kbmin+gzip y sin dependencias.
5. Potente: las expresiones no necesitan declarar propiedades deducibles dependientes (propiedades calculadas).
6. Compatible con módulos: se puede instalar a través de NPM, Bower o Duo. No obliga a todo el código a seguir las diversas regulaciones de Angular y los escenarios de uso son más flexibles.
defecto:
1. Recién nacido: Vue.js es un proyecto nuevo, no tan maduro como angular.
2. La influencia no es muy grande: busqué en Google y descubrí que la diversidad o riqueza de Vue.js es menor que la de otras bibliotecas famosas.
3. No es compatible con IE8.
Conocimiento ampliado: ¿Cuál es la diferencia entre Vue.js y otros frameworks?
1. Diferencias con AngularJS
Puntos similares:
Ambas instrucciones de soporte: instrucciones integradas e instrucciones personalizadas.
Ambos admiten filtros: filtros integrados y filtros personalizados.
Ambos admiten el enlace de datos bidireccional.
Ninguno de los dos es compatible con navegadores de gama baja.
Diferencias:
1. El costo de aprendizaje de AngularJS es alto, como la adición de la función de inyección de dependencia, mientras que la API proporcionada por Vue.js es relativamente simple e intuitiva.
2. En términos de rendimiento, AngularJS se basa en la verificación sucia de datos, por lo que cuantos más observadores, más lento se vuelve.
Vue.js utiliza observación basada en seguimiento de dependencias y utiliza actualizaciones de cola asincrónicas. Todos los datos se activan de forma independiente.
Para aplicaciones grandes, esta diferencia de optimización es bastante obvia.
2. Diferencias con React
Puntos similares:
React utiliza una sintaxis JSX especial y Vue.js también recomienda escribir un formato de archivo especial .vue en el desarrollo de componentes. Existen algunas convenciones sobre el contenido del archivo y ambas deben compilarse para su uso.
La idea central es la misma: todo es un componente y las instancias de los componentes se pueden anidar.
Todos proporcionan funciones de enlace razonables, lo que permite a los desarrolladores personalizar sus necesidades.
La columna AJAX, Ruta y otras funciones no están integradas en el paquete principal, sino que se cargan como complementos.
Las características de los mixins están respaldadas en el desarrollo de componentes.
Diferencias:
React se basa en Virtual DOM, mientras que Vue.js usa plantillas DOM. El DOM virtual utilizado por React realizará comprobaciones sucias en los resultados renderizados.
Vue.js proporciona instrucciones, filtros, etc. en plantillas, que pueden operar el DOM de manera muy conveniente y rápida.
Lo anterior es el contenido detallado de los tres marcos front-end web principales. Para obtener más información, preste atención a otros artículos relacionados en este sitio.