1. Introducción
Recientemente, estoy haciendo la optimización frontal de un gran proyecto de banca en línea. Necesito usar una optimización del cliente gordo. La idea general es que el front-end usa la solicitud AJAX para obtener datos del back-end, devolverlos en formato Jason y luego mostrarlo en la página. Debido a que este sistema es muy grande, la solución del cliente FAT inevitablemente requiere escribir mucho código JS en el cliente. Creo que es muy inconveniente que cualquier equipo mantenga una gran cantidad de código no estructurado. Entonces Backbone entró en mi vista.
Proporciona una forma de estructurar su código JS, lo que le permite organizar su código JS frontal de manera orientada a objetos. Esto es como si aplicamos un diseño impulsado por el dominio en la parte delantera. Podemos dividir un proyecto muy grande por módulo. Cada módulo se puede dividir en la vista, el modelo y el enrutador de acuerdo con los requisitos de la columna vertebral.
Con Backbone, puede tratar sus datos como modelos. Con los modelos, puede crear datos, verificar datos, destruir o guardarlos en el servidor. Cuando las operaciones en la interfaz causan cambios en las propiedades en el modelo, el modelo activará el evento de cambio; Esas vistas utilizadas para mostrar el estado del modelo recibirán el mensaje de que el modelo desencadena el cambio y luego emitirá la respuesta correspondiente, y volver a renderizar nuevos datos a la interfaz. En una aplicación de columna vertebral completa, no necesita escribir código de pegamento para obtener nodos a través de ID especiales del DOM, o actualizar manualmente las páginas HTML, porque cuando el modelo cambia, las vistas se actualizarán fácilmente.
2. Características
Backbone es un marco frontal ligero utilizado para estructurar la gestión de una gran cantidad de JS en las páginas, establecer una conexión perfecta con servidores y vistas, y proporcionar un marco básico para construir aplicaciones complejas.
Permítanme explicar brevemente las características y características principales de la columna vertebral:
2.1 Ligero
El código fuente de Backbone es de solo aproximadamente 1000 líneas (después del descomposición y las líneas en blanco), el tamaño del archivo es de solo 16 kb y el bajo servicio de biblioteca de dependencia es de solo 29 kb.
Solo necesita pasar un poco de tiempo para comprender fácilmente la implementación interna de la columna vertebral; o escriba una pequeña cantidad de código para sobrecargar algunos de los mecanismos de la columna vertebral; Si desea hacer un desarrollo secundario basado en la columna vertebral, no es algo complicado.
2.2 estructurado
La columna vertebral puede desacoplar fácilmente los datos, la lógica y las vistas en la página, y organizar la estructura del código de acuerdo con Backbone. Puede asignar la interacción de datos, la lógica comercial, la interfaz de usuario y otros trabajos en el proyecto a múltiples colegas para desarrollar simultáneamente, y organizarlos juntos de manera ordenada. Al mismo tiempo, esto es muy útil para el mantenimiento y el desarrollo de proyectos grandes y complejos.
2.3 Mecanismo de herencia
En la columna vertebral, los módulos se pueden heredar. Puede organizar los modelos de datos, colecciones y vistas de su aplicación de manera orientada a objetos para aclarar toda la arquitectura; También puede sobrecargar y extender fácilmente métodos personalizados.
2.4 Establecer una conexión perfecta con el servidor
Backbone tiene un conjunto incorporado de reglas de interacción con datos del servidor (si comprende la arquitectura REST, puede comprenderlas fácilmente), y la sincronización de datos se realizará automáticamente en el modelo. Los desarrolladores frontales solo necesitan operar en los datos del cliente, y Backbone sincronizará automáticamente los datos operativos al servidor.
Esto es algo muy interesante porque la interfaz de datos del servidor es transparente para los desarrolladores frontales y ya no necesitan preocuparse por cómo interactuar con el servidor.
Sin embargo, la interfaz de datos proporcionada por el servidor también debe ser compatible con las reglas de la red troncal. Para un nuevo proyecto, podemos intentar usar este conjunto de reglas para construir la interfaz. Pero si ya tiene un conjunto estable de interfaces en su proyecto, puede estar preocupado por el riesgo de modificación de la interfaz.
No importa, podemos adaptarnos a la interfaz de datos existente sobrecargando el método Backbone.sync. Para diferentes entornos de clientes, también podemos implementar diferentes métodos de interacción de datos. Por ejemplo: cuando un usuario usa un servicio a través de un navegador de PC, los datos se sincronizarán con el servidor en tiempo real; Cuando un usuario usa un servicio a través de un terminal móvil, teniendo en cuenta los problemas del entorno de red, primero podemos sincronizar los datos con la base de datos local y luego sincronizarlo con el servidor cuando sea apropiado. Y estos se pueden lograr sobrecargando solo un método.
2.5 Gestión de eventos de interfaz
En MVC, esperamos separar completamente la presentación de la interfaz y la lógica de negocios, pero para los eventos interactivos generados por los usuarios (como los eventos de clic), a menudo los obtenemos y los vinculamos a través de métodos de enlace similares a los de JQuery.
La vista en Backbone nos ayuda a organizar eventos de usuario y métodos de ejecución de manera ordenada, que solo requiere que declaremos una expresión simple, como:
Eventos: {// Al hacer clic en un elemento con ID "Guardar", ejecute el método Agregar de la vista 'Haga clic #save': 'ADD', 'Mousedown .Button': 'Show', 'MouseOver .Button': 'Hide'}En una expresión, el nombre del evento puede ser cualquier evento DOM (como Click, Mouseover, KeyPress, etc.), y el elemento puede ser cualquier selector admitido por jQuery (como selector de etiquetas, selector de identificación, selector de clases, etc.).
La vista vinculará automáticamente los eventos en la expresión al elemento selector. Cuando se activa el evento del elemento, la vista llamará automáticamente los métodos unidos en la expresión.
2.6 Análisis de plantillas livianas
El análisis de la plantilla es un método proporcionado en un bajo. ¿Por qué introdujo el método en un bajo costo cuando introdujo las funciones de la red troncal? Debido a que este método puede ayudarnos a una mejor estructura y lógica de vista, y el subrayado es una biblioteca en la que debe confiar.
Los métodos de análisis de plantilla nos permiten mezclar e incrustar el código JS en estructuras HTML, al igual que la incrustación del código Java en las páginas JSP:
<ul> <%para (var i = 0; i <len; i ++) {%> <li> <%= data [i] .title%> </li> <%}%> </li>A través del análisis de la plantilla, no necesitamos empalmar las cadenas al generar dinámicamente estructuras HTML. Más importante aún, podemos administrar la estructura HTML en la vista de forma independiente (por ejemplo: diferentes estados pueden mostrar diferentes estructuras HTML, podemos definir múltiples archivos de plantilla separados, cargar y renderizar según sea necesario).
2.7 Gestión de eventos personalizados
En Backbone, puede usar el método ON o OFF para unir y eliminar eventos personalizados. En cualquier lugar, puede usar el método de activación para activar estos eventos vinculados, y todos los métodos que han limitado el evento se ejecutarán, como:
modelo var = new Backbone.model (); // Atar dos funciones a eventos personalizados personalizados en el objeto modelo modelo.on ('personalizado', función (p1, p2) {// tODO}); model.on ('Custom', function (p1, p2) {// tODO}); // activar el evento personalizado, y las dos funciones unidas anteriormente se llamarán model.rigger ('personalizado', 'valor1', 'value2'); // eliminar todos los métodos vinculados en el modelo de evento personalizado.Off ('Custom'); // activar el evento personalizado, pero no se ejecutarán funciones. Las funciones en el evento se han eliminado en el paso anterior Model.Rigger ('Custom');Si está familiarizado con JQuery, encontrará que son muy similares a los métodos de enlace, desatado y activador en jQuery.
Además, Backbone admite un evento especial "All". Cuando un evento llamado "All" está vinculado a un objeto, el método unido en el evento "Todos" también se activará cuando se active cualquier evento. A veces, este método puede ser muy útil, por ejemplo, podemos escuchar los cambios en el estado del objeto a través del evento "All".
3. Enrutador
En una aplicación de una sola página, controlamos la conmutación y la presentación de la interfaz a través de JavaScript, y obtenemos datos del servidor a través de AJAX.
El problema que puede surgir es que cuando el usuario quiere volver a la operación anterior, puede usar habitualmente los botones "retraso" y "reenviados" del navegador, pero el resultado es que la página completa se cambia porque el usuario no sabe que está en la misma página.
Para este problema, a menudo usamos un hash (punto de anclaje) para grabar la ubicación actual del usuario y escuchar las acciones "reenviantes" y "devolver" del usuario a través del evento de cambio, pero descubrimos que algunas versiones más bajas de los navegadores (como IE6) no admiten el evento de cambio de cambio.
Backbone proporciona función de control de enrutamiento. A través del enrutador proporcionado por Backbone, podemos unir la dirección de enrutamiento y la función del evento a través de una expresión simple, por ejemplo:
var customRouter = backbone.router.extend ({rutas: {'': 'index', // Ejecutar el método de índice cuando URL hash está en el directorio raíz: url# 'list': 'getList', // ejecutar getList Method cuando URL hash está en el nodo de la lista:# list# 'detalle': id ':' consulta ', // Método de ejecución de la URL está en el nodo de la lista: Url# Lista' Detalle/: Id ':' Query ', // Execute Method When Url está en el nodo de la lista: el nodo de la lista está en la lista de detalles'. Pase los datos detallados como parámetros para consultar el método de consulta: URL#List/1001 '*Error': 'ducha' // Ejecutar el método de error cuando URL hash no coincide con función (error) {alerta ('error hash:' + error); var Custom = new CustomRouter (); Backbone.history.start ();Intente copiar este código en su página y acceda a la siguiente dirección a su vez (donde la URL indica la dirección de su página):
Urlurl#listurl#detalle/1001URL#hash1url#hash2
Intente usar los botones "Atrás" y "Reenviar" del navegador para cambiar de ida y vuelta a la dirección que acaba de ingresar.
Puede ver que cuando cambia el hash URL, se ejecutará el método límite. Cuando se encuentra un hash indefinido, se ejecutará el método de ducha y el hash indefinido se pasa al método.
Backbone registrará los cambios de dirección a través de hash de forma predeterminada. Para los navegadores de versión inferior que no admiten OnhashChange, los cambios hash serán monitoreados a través de SetInterval Heartbeat, por lo que no tiene que preocuparse por los problemas de compatibilidad del navegador.
Para los navegadores que admiten la función HTML5 PushState, Backbone también le permite crear URL personalizadas a través de PushState, pero esto requiere alguna adaptación de su servidor web.
3. Aplicabilidad de la columna vertebral
Backbone no es tan aplicable como jQuery, y si planea construir una aplicación web de una sola página grande o compleja, Backbone es más adecuado.
Si desea aplicar la columna vertebral a la página de su sitio web, y no hay una lógica y estructura compleja en la página, entonces esto solo hará que su página sea más engorrosa y difícil de mantener.
Si su proyecto no es complicado, pero le gusta profundamente una determinada característica (puede ser un modelo de datos, ver gestión o enrutador), entonces puede extraer esta parte del código fuente de la red troncal porque en la columna vertebral, las dependencias entre los módulos no son muy fuertes, y puede obtener y usar fácilmente una de ellas.
4. Biblioteca de dependencia
No puede usar Backbone de forma independiente porque sus funciones básicas, operaciones DOM y AJAX confían en bibliotecas de terceros.
4.1 subrayado
(Requerido)
Underscore es una biblioteca de funciones básicas para mejorar la eficiencia del desarrollo. Encapsula operaciones comunes en conjuntos, matrices, objetos y funciones. Al igual que JQuery encapsula los objetos DOM, puede acceder fácilmente y manipular objetos internos de JavaScript a través de un bajo.
Subscore también proporciona algunos métodos de función muy prácticos, como el estrangulamiento de funciones, el análisis de plantillas, etc.
Entraré en detalles sobre algunos de los métodos principales en el subscore en el próximo capítulo, pero antes de eso debe entender: el subrayamiento es una biblioteca en la que debe confiar en la columna vertebral, porque muchas implementaciones en la columna vertebral se basan en un bajo.
4.2 jQuery y Zepto
(Opcional)
Creo que definitivamente estarás familiarizado con JQuery, es un marco de DOM y Ajax de navegador cruzado.
Para Zepto, puede entenderlo como "versión móvil de jQuery", porque es más pequeña, más rápida y más adecuada para ejecutar navegadores de dispositivos móviles, es la misma sintaxis que jQuery, por lo que puede usarlo como lo haría con jQuery.
Actualmente, Zepto solo admite navegadores con el kernel WebKit, por lo que es compatible con la mayoría de los sistemas móviles como iOS, Adnroid, Symbian, BlackBerry y Meego, mientras que para Windows Phone o Firefox OS, aún no es compatible.
Debido a que la sintaxis de jQuery y Zepto son las mismas, para la columna vertebral, no tiene problemas para usar jQuery o Zepto (por supuesto, no puede usar ambos al mismo tiempo).
En Backbone, el Selector DOM, el evento DOM y AJAX usan el método jQuery. La razón por la que son opcionales aquí es que no usa la función de sincronización de datos View y Ajax en Backbone, entonces no necesita importarlos.
Si no desea usar jQuery o Zepto, pero use otras bibliotecas o bibliotecas personalizadas, siempre que su biblioteca implementa el mismo selector DOM, gestión de eventos y métodos AJAX que JQuery Syntax, entonces no habrá ningún problema.
Backbone le permite configurar dinámicamente las bibliotecas de terceros que necesita usar a través del método SetDomLibrary, que a menudo se usa para:
Aunque su biblioteca personalizada contiene métodos con la misma sintaxis que jQuery, la variable global no es $, y desea mantener el nombre existente. En este momento, puede configurarlo en el objeto referenciado internamente por el método SetDomLibrary.
Desea verificar el entorno del usuario para decidir qué biblioteca es más adecuada para su uso. Por ejemplo: si el usuario accede a un navegador de PC, cargue jQuery, y si el usuario accede a través de un terminal móvil, cargue Zepto.