Informe de análisis comparativo de la arquitectura técnica de jQuery y Vue

En el pasado desarrollo front-end, jQuery apareció en casi cualquier proyecto grande o pequeño, ya sea MS, comercio electrónico o varios portales, se puede decir que jQuery está en todas partes. En el pasado del desarrollo front-end, jQuery era una "configuración estándar".

En 2008, con el lanzamiento del motor V8 en el navegador Chrome, se mejoró cualitativamente la eficiencia de ejecución de JavaScript, un lenguaje de programación web general. El motor V8 está destinado a ser un hito glorioso en la historia del desarrollo de JavaScript. Proporciona una opción nueva y adecuada para Ryan Dahl, que ha estado estudiando el desarrollo de servidores de alto rendimiento durante mucho tiempo. Poco después, en la conferencia JSConf de 2009 en Berlín, se lanzó oficialmente el proyecto de servidor basado en JavaScript Node.js. El lanzamiento de Node.js no solo trajo servidores de alto rendimiento a los desarrolladores, sino que también promovió en gran medida el desarrollo de la ingeniería front-end y provocó un auge del front-end. Al mismo tiempo, debido a la mejora sustancial en la eficiencia de ejecución de JavaScript, se ha comenzado a implementar cada vez más lógica empresarial en los navegadores, la lógica front-end se ha vuelto cada vez más pesada y la arquitectura front-end también se ha incluido en la agenda. Por tanto, el patrón MVVM protagonista que vamos a comentar aparece en el diseño arquitectónico del front-end web.

El patrón MVVM, como su nombre indica, es el patrón modelo-vista-modelo de vista. Surgió de WPF, un marco de interfaz de usuario basado en Windows lanzado por Microsoft en 2005. El primer marco MVVM para el front-end se finalizó y lanzó en 2010. La versión Vue 2.0, el marco MVVM más popular, se lanzó en mayo de 2016.

Para resumir MVVM front-end web en una oración: operar datos significa operar vistas, lo que significa operar DOM (por lo que no es necesario operar DOM).

¡No se requiere manipulación DOM! Con el marco MVVM, los desarrolladores solo necesitan completar el enlace declarativo contenido en la plantilla de vista, escribir la lógica de cambio de datos comerciales en ViewModel y la capa de vista estará completamente automatizada. La característica más representativa de MVVM es el enlace de datos. El concepto central de MVVM es separar la capa de Vista de otras capas declarando el enlace de datos. Esta idea de desacoplar completamente la capa de vista también facilita la escritura de casos de prueba unitaria para el front-end web.

MVVM es, en última instancia, una arquitectura en capas. Su estratificación es la siguiente:

La capa de modelo corresponde a la capa de datos del modelo de dominio. Realiza principalmente la sincronización del modelo de dominio. Sincronización completa de modelos de negocio del lado del cliente y del lado del servidor a través de API como Ajax/fetch. En las relaciones entre capas, se utiliza principalmente para abstraer el modelo de vista en ViewModel.

La capa de vista existe como una plantilla de vista. En MVVM, toda la vista es una plantilla dinámica. Además de definir la estructura y el diseño, también muestra los datos y el estado de la capa ViewModel. La capa de Vista no es responsable del estado de procesamiento. La capa de Vista es responsable de las declaraciones de enlace de datos, las declaraciones de comandos y las declaraciones de enlace de eventos.

La capa ViewModel expone los datos de capa requeridos por la Vista y es responsable de las declaraciones de enlace de datos, declaraciones de instrucciones y declaraciones de enlace de eventos de la capa Vista, que se utilizan para manejar la lógica empresarial específica de la Vista. capa. El ViewModel subyacente hará el trabajo de escuchar las propiedades enlazadas. Cuando los datos en ViewModel cambian, la capa de Vista también se actualizará en consecuencia. Cuando se declara la vinculación bidireccional de datos (generalmente elementos de formulario) en la Vista, el marco también escuchará los cambios en los valores en la Vista; capa (forma). Una vez que el valor cambia, los datos en el ViewModel vinculado a la capa de Vista se actualizan automáticamente.

Como puede ver, en los marcos MVVM front-end, generalmente no existe una capa de modelo explícita e independiente. En el desarrollo empresarial real, generalmente seguimos la especificación de componentes web para desarrollar aplicaciones en forma de componentes, y el modelo de dominio de la capa Modelo a menudo se encuentra disperso en la capa ViewModel de uno o más Componentes para brindar un mejor servicio a la capa Vista. La capa ViewModel también introduce algunos estados intermedios relacionados con la capa View. Para servir mejor a la capa de vista, la capa ViewModel también introduce algunos estados intermedios relacionados con la capa de vista.

Los desarrolladores declaran el enlace de datos y el enlace de eventos en la plantilla de vista de la capa de Vista y luego realizan el procesamiento de datos de lógica empresarial en ViewModel. Cuando se activa el evento, los datos en ViewModel se actualizan automáticamente. Gracias a la introducción del marco MVVM, los desarrolladores solo necesitan centrarse en la lógica empresarial, la abstracción completa de datos y centrarse en los datos, mientras que el motor de visualización de MVVM le ayudará a manejar las Vistas.

¡Es innegable que el marco MVVM ha mejorado enormemente la eficiencia del desarrollo de aplicaciones!

Motor de vista: soy el motor de vista. Brindo un soporte poderoso para la capa de vista. Como plantilla de vista, desarrolladores, no necesitan operar el DOM, ¡déjenmelo a mí!

Accesores de datos: Soy un accesor de datos y puedo definir fácilmente accesores de datos a través de la API Object.defineProperty() o envolviendo mis propias funciones de acceso. Tiendo a encapsular el patrón de publicación/suscripción internamente para escuchar datos y notificar actualizaciones cuando los datos cambian. Estoy en la base de la implementación del enlace de datos.

Mecanismo de componentes. El marco MVVM proporciona definición de componentes, herencia, ciclo de vida y mecanismo de comunicación entre componentes, proporcionando a los desarrolladores una guía para el desarrollo futuro.

El auge del patrón de tipo de arquitectura MVVM ha logrado una verdadera separación de responsabilidades entre el front-end y el back-end, lo que mejora la eficiencia del desarrollo pero también tiene algunas deficiencias.

Se puede decir que la separación de front-end y back-end se ha convertido en el estándar de tendencia general, y el marco de desarrollo de patrones de diseño MVVM (Vue) es adecuado para cualquier escenario (excepto las versiones bajas de IE) .

jQuery opera directamente el DOM y utiliza una API simplificada para comunicarse directamente con el DOM (excelente compatibilidad);

Vue opera directamente los datos y deja que los datos hablen por sí mismos.