Durante nuestro proceso de desarrollo normal, definitivamente encontraremos esta situación: procesamos objetos simples y objetos complejos compuestos de objetos simples al mismo tiempo. Estos objetos simples y objetos complejos se combinarán en una estructura de árbol, y el cliente debe mantener la consistencia al procesarlos. Por ejemplo, para los pedidos de productos en sitios web de comercio electrónico, cada pedido de productos puede tener múltiples combinaciones de suborden, como carpetas en el sistema operativo, cada carpeta tiene múltiples subcarpetas o archivos. Cuando los copiamos, los eliminamos, etc., ya sea una carpeta o un archivo, es lo mismo para los operadores estadounidenses. En este escenario, es muy adecuado usar el modo de combinación para lograrlo.
Conocimiento básico
Modo combinación: combinar objetos en una estructura de árbol para representar una jerarquía "parcial". El modo combinado permite a los usuarios tener consistencia en su uso de objetos individuales y objetos combinados.
Hay tres personajes principales en el modo combinado:
(1) Componente abstracto (componente): una clase abstracta que define principalmente la interfaz pública de los objetos que participan en la combinación
(2) Subobjeto (hoja): el objeto más básico que forma un objeto combinado
(3) Compuesto: objetos complejos combinados por objetos infantiles
La clave para comprender el patrón de combinación es comprender la consistencia del patrón de combinación para objetos individuales y objetos combinados. Hablemos sobre la implementación de patrones de combinación para profundizar nuestra comprensión.
El modo de combinación se adapta para crear una interfaz de usuario dinámicamente en la página. Puede usar solo un comando Life = para inicializar algunas operaciones complejas o recursivas para muchos objetos. El modo combinado proporciona dos puntos:
(1) Permitirle tratar a un grupo de objetos como objetos específicos. Un objeto compuesto implementa la misma operación que los subobjetos que lo hacen. Realizar una determinada operación en un objeto combinado hará que todos los subbjetos debajo de ese objeto realicen la misma operación. Por lo tanto, no solo puede reemplazar sin problemas un solo objeto en un conjunto de objetos, sino también lo mismo a su vez. Estos objetos independientes están llamados libremente acoplados.
(2) El patrón de combinación combinará el conjunto de subobjetos en una estructura de árbol y permitirá el recorrido de todo el árbol. Esto ocultará la implementación interna y le permitirá organizar los subobjetos de cualquier manera. Cualquier código para este objeto (objeto combinado) no dependerá de la implementación de los subbjetos internos.
Implementación del modo de combinación
(1) El modo de combinación más simple
La estructura DOM de los documentos HTML es una estructura de árbol natural. Los elementos más básicos se convierten en árboles DOM y eventualmente forman documentos DOM. Es muy adecuado para el modo combinado.
A menudo usamos la biblioteca de clases jQuery, donde el patrón de combinación se aplica con más frecuencia, por ejemplo, el siguiente código a menudo se implementa:
$ (". Test"). AddClass ("Notest"). Eliminar ("Test");Este código simple es obtener el elemento que la clase contiene prueba, y luego procesarlo con AddClass y eliminarLass. Ya sea $ (". Test") es un elemento o elementos múltiples, en última instancia se llama a través de las interfaces unificadas addClass y eliminar las interfaces.
Simulemos brevemente la implementación de AddClass:
var addClass = function (eles, className) {if (eles instanceOf nodelist) {for (var i = 0, longitud = eles.length; i <longitud; i ++) {eles [i] .nodeType === 1 && (eles [i] .className += (' +className +' '')); }} else if (eles instanceOf nodo) {eles.nodeType === 1 && (eles.classname + = ('' + classname + '')); } else {throw "Eles no es un nodo html"; }} addClass (document.getElementById ("div3"), "test"); addClass (document.querySelectorAll (". div"), "prueba");Este código simplemente simula la implementación de AddClass (la compatibilidad y la universalidad no se consideran por el momento), y es fácil juzgar primero el tipo de nodo, y luego agregar classname de acuerdo con diferentes tipos. Para Nodelist o Node, las llamadas al cliente usan la interfaz AddClass de la misma manera. Esta es la idea más básica del modo de combinación, que hace que el uso de la parte y todo sea consistente.
(2) Ejemplos típicos
Mencionamos un ejemplo típico: un pedido de producto contiene múltiples suborders de productos, y múltiples subordres de productos forman un orden de producto complejo. Debido a las características del lenguaje JavaScript, simplificamos los tres roles del patrón de combinación en 2 roles:
(1) Subobjeto: en este ejemplo, el suboBject es un suborden de producto
(2) Objeto combinado: este es el orden total del producto
Supongamos que desarrollamos un sitio web de productos turísticos que contiene dos subproductos: boletos de aire y hoteles. Definimos los subobjetos de la siguiente manera:
function flightOrder () {} flightOrder.prototyp.create = function () {console.log ("orden de vuelo creado");} function hotelOrder () {} hotelorder.prototype.create = function () {console.log ("Orden de hotel creado");};El código anterior define dos clases: clase de pedido de boletos aéreos y clase de pedido de hotel. Cada clase tiene su propio método de creación de pedidos.
A continuación creamos una clase de pedido total:
function TotalOrders () {this.OrderList = [];} TotalOrders.prototype.addorder = function (orden) {this.OrderList.push (orden);} totalorders.prototipo.create = function (orden) {for (var i = 0, longi = this.OrderList.length; i <longitud; i ++) {this.OrderList [IRDERLIST [I]. }}Este objeto tiene tres miembros principales: una lista de pedidos, un método para agregar un pedido y un método para crear un pedido.
Al usar el cliente, lo siguiente es el siguiente:
var Flight = new FlightOrder (); Flight.Create (); Var Orders = new TotalOrders (); Orders.addorder (new FlightOrder ()); Orders.addorder (new HotelOrder ()); Orders.Create ();
Las llamadas al cliente muestran dos maneras, una es crear pedidos de boletos aéreos, y el otro es crear múltiples pedidos, pero finalmente se crean a través del método Crear. Este es un escenario de aplicación muy típico del modo de combinación.
Resumir
El patrón de combinación no es difícil de entender. Principalmente resuelve el problema de consistencia de objetos individuales y objetos combinados en la forma en que se usan. Esto es ideal para usar patrones combinatorios si los objetos tienen jerarquías obvias y quieren usarlos de manera uniforme. En el desarrollo web, esta jerarquía es muy común y es muy adecuada para usar patrones de combinación. Especialmente para JS, no tiene que cumplir con la forma tradicional de lenguaje orientado a objetos y usar de manera flexible las características del lenguaje JS para lograr la consistencia en el uso en parte y general.
(1) Escenarios que usan el modo de combinación
Use el modo de combinación al encontrar las siguientes dos situaciones
A. una colección de objetos que contienen una cierta estructura jerárquica (la estructura específica no se puede determinar durante el proceso de desarrollo)
B. Desea realizar alguna operación en estos objetos o algunos de ellos
(2) Desventajas del modo combinado
Debido a que cualquier funcionamiento de un objeto combinado llamará la misma operación en todos los subobjetos, habrá problemas de rendimiento cuando la estructura combinada sea grande. Además, al usar el modo de combinación para encapsular HTML, debe seleccionar la etiqueta apropiada. Por ejemplo, la tabla no se puede usar en el modo de combinación, y los nodos de hoja no son obvios.