El modo Xiangyuan es diferente del modo de diseño general. Se utiliza principalmente para optimizar el rendimiento del programa. Es mejor resolver los problemas de rendimiento causados por una gran cantidad de objetos similares. El patrón de enciclopedia reduce el número de objetos y, por lo tanto, mejora el rendimiento de la aplicación analizando los objetos de la aplicación y los analizando en datos intrínsecos y externos.
Conocimiento básico
El modo Enciclopedia reduce el número de objetos al compartir una gran cantidad de objetos de grano fino, reduciendo así la memoria de los objetos y mejorando el rendimiento de las aplicaciones. La idea básica es descomponer la composición de objetos similares existentes y expandirlos en datos internos compartidos y datos externos no compartidos. Llamamos al objeto de los datos internos un meta objeto. Por lo general, también se necesita una clase de fábrica para mantener datos intrínsecos.
En JS, el modo Enciclopedia consiste principalmente en los siguientes caracteres:
(1) Cliente: una clase utilizada para llamar a la fábrica de Xiangyuan para obtener datos intrínsecos, generalmente el objeto requerido por la aplicación.
(2) Fábrica de Xiangyuan: Clase utilizada para mantener los datos de Xiangyuan
(3) Disfrute de la clase Yuan: una clase que mantiene datos internos
Implementación y aplicación del modo Xiangyuan
Implementación general
Demos un ejemplo para ilustrar: Apple produce iPhones. La mayoría de los datos, como los modelos y las pantallas, son los mismos, y algunas partes de los datos, como la memoria, se dividen en 16G, 32G, etc. Antes de usar el modo Enciclopedia, escribimos el código de la siguiente manera:
Funcionar iPhone (modelo, pantalla, memoria, sn) {esto. modelo = modelo; this.screen = pantalla; this.memory = memoria; this.sn = sn;} var phones = []; for (var i = 0; i <1000000; i ++) {var memoria = i % 2 == 0? 16: 32; phones.push (nuevo iPhone ("iPhone6s", 5.0, memoria, i));}En este código, se crean un millón de iPhones y cada iPhone se aplica para una memoria de forma independiente. Pero cuando miramos de cerca, podemos ver que la mayoría de los iPhones son similares, excepto que la memoria y los números de serie son diferentes. Si se trata de un programa con requisitos de alto rendimiento, debemos considerar optimizarlo.
Para una gran cantidad de programas con objetos similares, podemos considerar usar el modo Xiangyuan para optimizarlo. Analizamos que la mayoría de los modelos de iPhone, las pantallas y la memoria son los mismos, por lo que esta parte de los datos se puede utilizar para fines públicos, que son los datos internos en el modo Xiangyuan. La definición de la clase Xiangyuan es la siguiente:
función iPhoneflyweight (modelo, pantalla, memoria) {this.model = model; this.screen = pantalla; this.memory = memoria;}Definimos la clase disfrutar de iPhone, que contiene tres datos: modelo, pantalla y memoria. También necesitamos una fábrica de Xiangyuan para mantener estos datos:
var flylewightFactory = (function () {var iPhones = {}; return {get: function (modelo, pantalla, memoria) {var key = modelo + pantalla + memoria; if (! iPhones [key]) {iPhones [key] = new iPhoneFlyweight (modelo, pantalla, memoria);} return iPhones [Key];};}) ();En esta fábrica, definimos un diccionario para salvar el objeto de sacrificio, proporcionar un método para obtener el objeto de sacrificio de acuerdo con los parámetros, y si hay un sacrificio, se devolverá directamente, y si no hay sacrificio, se creará.
A continuación, creamos una clase de cliente, que se modifica desde la clase de iPhone:
Función iPhone (modelo, pantalla, memoria, sn) {this.flyweight = flywightfactory.get (modelo, pantalla, memoria); this.sn = sn;}Entonces todavía generamos múltiples iPhones como en el medio
Var Phones = []; for (var i = 0; i <1000000; i ++) {var memoria = i % 2 == 0? 16: 32; phones.push (nuevo iPhone ("iPhone6s", 5.0, memoria, i));} console.log (teléfonos);La clave aquí es esta.flyweight = FlyWeightFactory.get (modelo, pantalla, memoria) en el constructor de iPhone. Este código obtiene datos de Xiangyuan a través de la fábrica de Xiangyuan. En la fábrica de Xiangyuan, si ya existe un objeto con los mismos datos, devolverá directamente el objeto. Múltiples objetos de iPhone comparten esta parte de los mismos datos, por lo que los datos similares originales se han reducido considerablemente, reduciendo el uso de la memoria.
Aplicación de disfrutar del modo Yuan en DOM
Una aplicación típica del modo Xiangyuan es la operación del evento DOM, y el mecanismo de eventos DOM se divide en burbujas de eventos y captura de eventos. Presentemos brevemente estos dos:
Burbuja del evento: el evento límite comienza desde el elemento más interno y luego burbujas hasta la capa más externa
Captura del evento: el evento límite comienza desde el elemento más externo y luego pasa a la capa más interna.
Supongamos que tenemos una lista de menú en HTML
<ul> <li> Opción 1 </li> <li> Opción 2 </li> <li> Opción 3 </li> <li> Opción 4 </li> <li> Opción 5 </li> <li> Opción 6 </li> </ul>
Haga clic en el elemento del menú para realizar la operación correspondiente. Vinculamos eventos a través de jQuery, que generalmente lo hace:
$ (". Item"). on ("Click", function () {console.log ($ (this) .Text ());})Vincule los eventos para cada elemento de la lista y haga clic para generar el texto correspondiente. No hay problema en este momento, pero si se trata de una lista muy larga, especialmente si se trata de un teléfono móvil con una lista particularmente larga, habrá problemas de rendimiento, porque cada elemento está obligado a eventos y toma memoria. Pero estos manejadores de eventos son en realidad muy similares, por lo que necesitamos optimizarlos.
$ (". Menu"). On ("Click", ".Item", function () {console.log ($ (this) .Text ());})De esta manera, se puede reducir el número de controladores de eventos. Este método se llama delegación de eventos, que también utiliza el principio del modelo Xiangyuan. El controlador de eventos es una parte interna común, y el texto de cada elemento de menú es una parte externa. Hablemos brevemente sobre el principio de delegación de eventos: haga clic en el elemento del menú y el evento burbujee desde el elemento LI al elemento UL. Cuando vinculamos el evento a UL, en realidad unimos un evento y luego usamos el objetivo en el evento de parámetros del evento para determinar qué elemento es el clic. Por ejemplo, el primer elemento LI en el nivel bajo, Event.Target es Li. De esta manera, podemos obtener el elemento de clic específico y podemos manejar de manera diferente según diferentes elementos.
Resumir
El modo Enciclopedia es un medio para optimizar el rendimiento del programa y reducir la cantidad de objetos al compartir datos públicos para lograr programas de optimización. El modo Enciclopedia es adecuado para escenarios en los que hay una gran cantidad de objetos y requisitos de rendimiento similares. Debido a que el modo Xiangyuan necesita separar los datos internos y externos, aumenta la complejidad lógica del programa, se recomienda utilizar el modo Xiangyuan solo cuando hay requisitos de rendimiento.
Los beneficios de disfrutar del modelo yuan:
El cumplimiento de los recursos de las páginas web puede reducirse por órdenes de magnitud. Incluso si la aplicación del modo Xiangyuan no puede reducir el número de instancias a uno, aún puede beneficiarse mucho de él.
Este ahorro no requiere mucha modificación del código original. Después de crear el gerente, fábrica y xiangyuan, las modificaciones al código no son más que cambiar de instanciar directamente la clase de destino a llamar a un método del objeto del administrador.
Desventajas de disfrutar del modo Yuan:
Si se usa en lugares innecesarios, el resultado en realidad dañará la eficiencia en funcionamiento del código. Este patrón optimiza el código al tiempo que aumenta su complejidad, lo que puede causar dificultades en la depuración y el mantenimiento.
Obstaculiza la depuración porque ahora hay tres posibles errores: Gerente, Factory y Xiangyuan.
Esta optimización también puede dificultar el mantenimiento. Ahora no se enfrenta a una arquitectura clara compuesta de objetos que encapsulan datos, sino un montón de cosas desordenadas. Los datos en él se guardan en al menos dos lugares. Es mejor comentar sobre los datos internos y los datos externos.
Esta optimización solo debe hacerse cuando sea necesario. Se debe hacer una compensación entre la eficiencia operativa y la capacidad de mantenimiento. Si no está seguro de si necesita usar el modo Enciclopedia, lo más probable es que no lo necesite. El modo Xiangyuan es adecuado para ocasiones como los recursos del sistema se han utilizado casi y obviamente se necesita algún tipo de optimización.
Este patrón es especialmente útil para los programadores de JavaScript porque puede usarse para reducir el número de elementos DOM que se utilizarán en una página web, sabiendo que estos elementos consumen mucha memoria. El uso de este patrón y el tipo de organización, como los patrones de combinación, pueden desarrollar sistemas de aplicaciones web complejos ricos en funciones que pueden ejecutarse sin problemas en cualquier entorno moderno de JavaScript.
Ocasiones aplicables para el modo Xiangyuan:
Se debe utilizar una gran cantidad de objetos intensivos en recursos en la página web. Si solo se usan unos pocos de estos objetos, este tipo de optimización no es rentable.
Al menos una parte de los datos almacenados en el objeto puede convertirse en datos externos. Además, almacenar estos datos fuera del objeto debería tomar relativamente pocos recursos, de lo contrario, este enfoque no tiene sentido para las sugerencias de rendimiento. El tipo de objeto que contiene una gran cantidad de código básico y contenido HTML puede ser más adecuado para este tipo de optimización.
Después de separar los datos externos, el número de objetos únicos es relativamente pequeño.