Dans cet article, nous allons décomposer l'un des modèles de conception structurelle en JavaScript - l' éditeur de liens . En génie logiciel, l'éditeur de liens vous permet de faire référence à des groupes d'objets comme s'il s'agissait d'objets séparés, ce qui garantit la cohérence de la structure globale de ces objets et de leurs combinaisons.
La tâche principale d'un éditeur de liens est de combiner de nombreux objets en une seule arborescence . Cette arborescence représente une hiérarchie structurée du particulier au tout .
Pour mieux comprendre le fonctionnement de l'éditeur de liens, vous devez comprendre comment fonctionne la hiérarchie du particulier à l'ensemble et comment elle peut être visualisée.
Dans une hiérarchie du particulier au tout, chaque objet de la collection fait partie de la composition globale . Cette composition générale, à son tour, est une collection de ses parties . La hiérarchie du particulier au tout est construite comme une structure arborescente, où chaque "feuille" ou "nœud" individuel est perçu et traité de la même manière que toute autre feuille ou nœud dans n'importe quelle partie de l'arbre. Ainsi, un groupe ou une collection d'objets (un sous-arbre de feuilles / nœuds) est également une feuille ou un nœud.
Visuellement, cela peut être représenté quelque chose comme ceci:
maintenant que nous avons une compréhension plus claire de la relation entre le privé et le tout, revenons au terme linker... Nous avons défini que l'utilisation de l'éditeur de liens consiste à combiner les objets mentionnés (feuilles / nœuds) dans un arbre selon ce principe.
Ainsi, nous obtenons un modèle de conception dans lequel chaque élément d'une collection peut également inclure d' autres collections , ce qui permet de construire des structures profondément imbriquées.
Structure interne
Chaque nœud de l'arborescence partage un ensemble commun de propriétés et de méthodes qui lui permettent de gérer et d'interagir avec des objets individuels de la même manière qu'avec des collections d'objets. Cette interface suppose la construction d'algorithmes récursifs qui itèrent sur tous les objets de la collection composite.
Où ce modèle s'applique-t-il?
Sur les systèmes d'exploitation, ce modèle offre de nombreuses possibilités, telles que la création de répertoires dans des répertoires.
Les fichiers (pour plus de commodité, tous les objets d'un répertoire peuvent être considérés comme des «éléments» ) sont des feuilles / nœuds (parties) dans tout un composite (répertoire). Un sous-répertoire créé dans un répertoire est de même une feuille ou un nœud qui comprend d'autres éléments tels que des vidéos, des images, etc. Dans le même temps, les répertoires et sous - répertoires sont également composites , car ce sont des collections de parties distinctes (objets, fichiers, etc. etc.).
Les bibliothèques populaires comme React ou Vue utilisent largement ce modèle pour créer des interfaces fiables et réutilisables. Tous les éléments des pages Web que vous voyez sont représentés comme des composants . Chaque composant d'une page Web est une feuille d'un arbre, et il peut lui-même combiner de nombreux composants (dans ce cas, un composite est formé , mais il s'agit toujours d'une feuille d'arbre ). C'est un outil puissant qui simplifie considérablement le développement pour les utilisateurs de bibliothèques. De plus, il vous permet de créer des applications évolutives qui impliquent plusieurs objets.
Pourquoi ce modèle est-il intéressant?
En bref: c'est très puissant.
L'éditeur de liens est un modèle de conception si puissant car il permet à un objet d'être traité comme un composite en utilisant une interface commune pour tous les objets.
Cela signifie que vous pouvez réutiliser des objets sans craindre une éventuelle incompatibilité avec les autres.
Lors du développement d'une application, vous devrez peut-être travailler avec des objets qui ont une structure arborescente, auquel cas l'utilisation de ce modèle peut être très efficace.
Exemples de
Disons que nous développons une application pour une entreprise qui aide les médecins à obtenir la certification des plates-formes qui fournissent des services de santé à distance. Le processus comprend la collecte de signatures pour les documents statutaires.
Nous allons travailler avec une classe
Documentqui aura une propriété signatureavec une valeur par défaut de false. Si le médecin signe le document, la valeur de la signature sera remplacée par sa signature. Nous définissons également une méthode dans cette classe signqui implémente cette fonction.
Voici à quoi cela ressemblera
Document:
class Document {
constructor(title) {
this.title = title
this.signature = null
}
sign(signature) {
this.signature = signature
}
}Maintenant, en utilisant l'éditeur de liens, nous fournirons un support pour des méthodes similaires à celles définies dans
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)
})
}
}Maintenant, la grâce du modèle devient évidente. Faites attention aux deux derniers extraits de code: Jetons un coup d'œil au modèle visuellement:
Super! Il semble que nous soyons sur la bonne voie. Ce que nous avons obtenu correspond au schéma présenté ci-dessus.
Ainsi, notre structure arborescente contient deux feuilles / nœuds -
Documentet DocumentComposite. Ils partagent tous deux la même interface et agissent donc comme des «parties» d'un seul arbre composite .
Il convient de noter ici qu'un nœud feuille / arbre qui n'est pas un composite (
Document) n'est pas une collection ou un groupe d'objets et ne se ramifiera donc pas davantage. Cependant, la feuille / le nœud étantcomposite, contient une collection de pièces (dans notre cas, c'est le cas items). Rappelez-vous également que les Documentdeux DocumentCompositepartagent une interface commune et partagent donc la méthode de signe.
Alors, quelle est l'efficacité de cette approche? Bien que DocumentComposite utilise une interface unique car il utilise une méthode de signe comme Document, il adopte une approche plus efficace tout en atteignant son objectif ultime.
Donc, au lieu d'une structure comme celle-ci:
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')
})Nous pouvons modifier le code et le rendre plus efficace en tirant parti de l'éditeur de liens:
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)Avec cette approche, nous n'avons besoin d'exécuter la signature qu'une seule fois après avoir ajouté tous les documents nécessaires, et cette fonction signera tous les documents.
Vous pouvez le vérifier en regardant la sortie de la fonction
console.log(forms):
dans l'exemple précédent, nous devions ajouter manuellement des documents à un tableau, puis itérer indépendamment sur chaque document et exécuter la fonction
signpour le signer.
N'oubliez pas non plus que le nôtre
DocumentCompositepeut inclure une collection de documents.
Alors quand on a fait ça:
forms.add(pr2Form) //
forms.add(w2Form) // Notre schéma ressemble à ceci:
Nous avons ajouté deux formulaires, et maintenant ce schéma est presque complètement identique à l'original:
Néanmoins, notre arbre cesse de grandir, puisque sa dernière feuille n'a formé que deux feuilles, ce qui ne correspond pas tout à fait au diagramme de la dernière capture d'écran. Si à la place nous avons fait du w2form un composite, comme indiqué ici:
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)Ensuite, notre arbre pourrait continuer à pousser:
En fin de compte, nous aurions atteint le même objectif - tous les documents auraient été signés:
C'est là que l'éditeur de liens entre en jeu.
Conclusion
C'est tout pour le moment! J'espère que ces informations vous ont été utiles. En outre!
Trouvez-moi sur moyen
