En este artículo, analizaremos uno de los patrones de diseño estructural en JavaScript: el vinculador . En ingeniería de software, el enlazador le permite referirse a grupos de objetos como si fueran objetos separados, lo que asegura que la estructura general de estos objetos y sus combinaciones sea consistente.
La tarea principal de un enlazador es combinar muchos objetos en una sola estructura de árbol . Esta estructura de árbol representa una jerarquía que se estructura desde lo particular hasta el todo .
Para comprender mejor cómo funciona el vinculador, debe comprender cómo funciona la jerarquía de particular a completo y cómo se puede visualizar.
En una jerarquía de particular a total, cada objeto de la colección es parte de la composición general . Esta composición general, a su vez, es una colección de sus partes . La jerarquía de lo particular al conjunto se construye como una estructura en forma de árbol, donde cada "hoja" o "nodo" individual se percibe y procesa de la misma manera que cualquier otra hoja o nodo en cualquier parte del árbol. Entonces, un grupo o colección de objetos (subárbol de hojas / nodos) también es una hoja o un nodo.
Visualmente, se puede representar de esta manera:
ahora que tenemos una comprensión más clara de la relación entre lo privado y el todo, volvamos al término enlazador.... Hemos determinado que el uso del enlazador está destinado a combinar los objetos mencionados (hojas / nodos) en un árbol de acuerdo con este principio.
Así, obtenemos un patrón de diseño en el que cada elemento de la colección también puede incluir otras colecciones , lo que permite estructuras profundamente anidadas.
Estructura interna
Cada nodo del árbol comparte un conjunto común de propiedades y métodos que le permiten mantener e interactuar con objetos individuales de la misma manera que con colecciones de objetos. Esta interfaz asume la construcción de algoritmos recursivos que iteran sobre todos los objetos de la colección compuesta.
¿Dónde se aplica este patrón?
En los sistemas operativos, este patrón permite muchas posibilidades, como crear directorios dentro de directorios.
Los archivos (por conveniencia, todos los objetos de un directorio pueden considerarse "elementos" ) son hojas / nodos (partes) dentro de un compuesto completo (directorio). Un subdirectorio creado en un directorio es similarmente una hoja o un nodo que incluye otros elementos como videos, imágenes, etc. Al mismo tiempo, los directorios y subdirectorios también son compuestos , ya que son colecciones de partes separadas (objetos, archivos, etc. etc.).
Las bibliotecas populares como React o Vue usan este patrón ampliamente para construir interfaces confiables y reutilizables. Todos los elementos de las páginas web que ve están representados como componentes . Cada componente de una página web es una hoja de un árbol, y él mismo puede combinar muchos componentes (en este caso, se forma un compuesto , pero sigue siendo una hoja de un árbol ). Es una herramienta poderosa que simplifica enormemente el desarrollo para los usuarios de bibliotecas. Además, te permite crear aplicaciones escalables que involucran múltiples objetos.
¿Por qué es interesante esta plantilla?
En resumen: es muy poderoso.
El enlazador es un patrón de diseño tan poderoso porque permite que un objeto sea tratado como un compuesto usando una interfaz común para todos los objetos.
Esto significa que puede reutilizar objetos sin temor a una posible incompatibilidad con otros.
Al desarrollar una aplicación, es posible que deba trabajar con objetos que tengan una estructura de árbol, en cuyo caso el uso de este patrón puede resultar muy eficaz.
Ejemplos de
Digamos que estamos desarrollando una aplicación para una empresa que ayuda a los médicos a obtener la certificación para plataformas que brindan servicios de atención médica de forma remota. El proceso incluye la recopilación de firmas para documentos legales.
Vamos a trabajar con una clase
Documentque tendrá una propiedad signaturecon un valor predeterminado de falso. Si el médico firma el documento, el valor de la firma se cambiará por su firma. También definimos un método en esta clase signque implementa esta función.
Así es como se verá
Document:
class Document {
constructor(title) {
this.title = title
this.signature = null
}
sign(signature) {
this.signature = signature
}
}Ahora, utilizando el vinculador, proporcionaremos soporte para métodos similares a los definidos en
Document.
class DocumentComposite {
constructor(title) {
this.items = []
if (title) {
this.items.push(new Document(title))
}
}
add(item) {
this.items.push(item)
}
sign(signature) {
this.items.forEach((doc) => {
doc.sign(signature)
})
}
}Ahora la gracia de la plantilla se hace evidente. Preste atención a los dos últimos fragmentos de código: Echemos un vistazo a la plantilla visualmente:
¡Genial! Parece que vamos por buen camino. Lo que obtuvimos corresponde al esquema presentado anteriormente.
Entonces, nuestra estructura de árbol contiene dos hojas / nodos,
Documenty DocumentComposite. Ambos comparten la misma interfaz y, por lo tanto, actúan como "partes" de un único árbol compuesto .
Cabe señalar aquí que un nodo hoja / árbol que no es un compuesto (
Document) no es una colección o grupo de objetos y, por lo tanto, no continuará ramificándose. Sin embargo, la hoja / nodo secompuesto, contiene una colección de partes (en nuestro caso lo es items). Recuerde también que Documentambos DocumentCompositecomparten una interfaz común y, por lo tanto, comparten el método de firmar.
Entonces, ¿cuál es la efectividad de este enfoque? Aunque DocumentComposite utiliza una única interfaz porque utiliza un método de firma como Document, adopta un enfoque más eficiente sin dejar de alcanzar su objetivo final.
Entonces, en lugar de una estructura como esta:
const pr2Form = new Document(
'Primary Treating Physicians Progress Report (PR2)',
)
const w2Form = new Document(' (W2)')
const forms = []
forms.push(pr2Form)
forms.push(w2Form)
forms.forEach((form) => {
form.sign('Bobby Lopez')
})Podemos modificar el código y hacerlo más eficiente aprovechando el enlazador:
const forms = new DocumentComposite()
const pr2Form = new Document(
' (PR2)',
)
const w2Form = new Document(' (W2)')
forms.add(pr2Form)
forms.add(w2Form)
forms.sign(' ')
console.log(forms)Con este enfoque, solo necesitamos ejecutar firmar una vez después de agregar todos los documentos necesarios, y esta función firmará todos los documentos.
Puede verificar esto observando el resultado de la función
console.log(forms):
en el ejemplo anterior, tuvimos que agregar documentos manualmente a una matriz y luego iterar de forma independiente sobre cada documento y ejecutar la función
signpara firmarlo.
Además, no olvide que el nuestro
DocumentCompositepuede incluir una colección de documentos.
Entonces, cuando hicimos esto:
forms.add(pr2Form) //
forms.add(w2Form) // Nuestro esquema ha tomado la siguiente forma:
Hemos agregado dos formas, y ahora este esquema es casi completamente idéntico al original:
Sin embargo, nuestro árbol deja de crecer, ya que su última hoja ha formado solo dos hojas, lo que no se corresponde del todo con el diagrama de la última captura de pantalla. Si en cambio hicimos el w2form un compuesto, como se muestra aquí:
const forms = new DocumentComposite()
const pr2Form = new Document(
' (PR2)',
)
const w2Form = new DocumentComposite(' (W2)')
forms.add(pr2Form)
forms.add(w2Form)
forms.sign(' ')
console.log(forms)Entonces nuestro árbol podría seguir creciendo:
Al final, habríamos logrado el mismo objetivo: todos los documentos se habrían firmado:
Aquí es donde entra el enlazador.
Conclusión
¡Eso es todo por ahora! Espero que esta información te haya sido útil. ¡Además!
Encuéntrame en medio
