Au cours de notre processus de développement normal, nous rencontrerons certainement cette situation: nous traitons des objets simples et des objets complexes composés d'objets simples en même temps. Ces objets simples et objets complexes seront combinés dans une structure d'arbre, et le client doit maintenir la cohérence lors du traitement. Par exemple, pour les commandes de produits dans les sites Web de commerce électronique, chaque ordre de produit peut avoir plusieurs combinaisons de sous-commandes, telles que les dossiers du système d'exploitation, chaque dossier dispose de plusieurs sous-reprendurs ou fichiers. Lorsque nous les coprions, les supprimons, etc., qu'il s'agisse d'un dossier ou d'un fichier, c'est la même chose pour les opérateurs américains. Dans ce scénario, il est très adapté d'utiliser le mode combinaison pour l'atteindre.
Connaissances de base
Mode de combinaison: combinant des objets dans une structure d'arbre pour représenter une hiérarchie "partielle-totale". Le mode de combinaison permet aux utilisateurs d'avoir une cohérence dans leur utilisation d'objets individuels et d'objets combinés.
Il y a trois caractères principaux en mode combinaison:
(1) Composant abstrait (composant): une classe abstraite qui définit principalement l'interface publique des objets participant à la combinaison
(2) sous-objet (feuille): l'objet le plus basique qui forme un objet combiné
(3) Composite: objets complexes combinés par des objets enfants
La clé pour comprendre le modèle combiné est de comprendre la cohérence du modèle combiné pour les objets individuels et les objets combinés. Parlons de la mise en œuvre de modèles de combinaison pour approfondir notre compréhension.
Le mode de combinaison est adapté pour créer une interface utilisateur dynamiquement sur la page. Vous ne pouvez utiliser qu'une seule commande Life = pour initialiser certaines opérations complexes ou récursives pour de nombreux objets. Le mode combinaison fournit deux points:
(1) vous permettre de traiter un groupe d'objets comme objets spécifiques. Un objet composite implémente la même opération que les sous-objets qui le font. Effectuer une certaine opération sur un objet combiné provoquera tous les sous-objets sous cet objet pour effectuer la même opération. Par conséquent, vous pouvez non seulement remplacer de manière transparente un seul objet en un ensemble d'objets, mais aussi le même à son tour. Ces objets indépendants sont soi-disant couplés de manière lâche.
(2) Le motif de combinaison combinera l'ensemble des sous-objets dans une structure d'arbre et permettra la traversée de l'arbre entier. Cela masquera la mise en œuvre interne et vous permettra d'organiser les sous-objets de quelque manière que ce soit. Tout code pour cet objet (objet combiné) ne dépendra pas de l'implémentation des sous-objets internes.
Implémentation du mode combinaison
(1) le mode de combinaison le plus simple
La structure DOM des documents HTML est une structure d'arbre naturelle. Les éléments les plus élémentaires deviennent des arbres DOM et finissent par former des documents DOM. Il est très adapté au mode combinaison.
Nous utilisons souvent la bibliothèque de classe JQuery, où le modèle de combinaison est appliqué plus fréquemment, par exemple, le code suivant est souvent implémenté:
$ (". test"). addClass ("NotTest"). Supprime ("test");Ce code simple consiste à obtenir l'élément que la classe contient le test, puis à le traiter avec addClass et RemoveClass. Que $ (". Test") est un élément ou plusieurs éléments, il est finalement appelé via les interfaces Unified AddClass et RemoveClass.
Simulons brièvement la mise en œuvre de AddClass:
var addClass = function (eles, className) {if (eles instanceof nodelist) {for (var i = 0, longueur = eles.length; i <longueur; i ++) {eles [i] .nodeType === 1 && (eles [i] .classname + = ('' + className + ''); }} else if (eles instanceof node) {eles.nodeType === 1 && (eles.classname + = ('' + classname + '')); } else {throw "eles n'est pas un nœud html"; }} addClass (document.getElementById ("div3"), "test"); addClass (document.QuerySelector (". div"), "test");Ce code simule simplement l'implémentation de AddClass (la compatibilité et l'universalité ne sont pas prises en compte pour le moment), et il est simple de juger d'abord le type de nœud, puis d'ajouter un nom de classe en fonction de différents types. Pour NodeList ou Node, les appels clients utilisent l'interface AddClass de la même manière. C'est l'idée la plus élémentaire du mode combinaison, ce qui fait l'utilisation de la partie et de l'ensemble cohérent.
(2) exemples typiques
Nous avons mentionné un exemple typique: un ordre de produit contient plusieurs sous-ordres de produits et plusieurs sous-ordres de produits forment un ordre de produit complexe. En raison des caractéristiques de la langue JavaScript, nous simplifions les trois rôles du modèle de combinaison en 2 rôles:
(1) SubObject: Dans cet exemple, le sous-objet est un sous-ordre de produit
(2) Objet combiné: il s'agit de l'ordre total du produit
Supposons que nous développons un site Web de produit touristique qui contient deux sous-produits: les billets aériens et les hôtels. Nous définissons les sous-objets comme suit:
Function FlightOrder () {} FlightOrder.ProtyP.Create = Function () {Console.Log ("Flight Order Created");} Function HotelOrder () {} HotelOrder.Prototype.Create = Function () {Console.Log ("Order Hotel Created");};Le code ci-dessus définit deux classes: la classe de commande des billets d'avion et la classe de commande de l'hôtel. Chaque classe a sa propre méthode de création d'ordre.
Ensuite, nous créons une classe de commande totale:
fonction totalorders () {this.orderList = [];} totalorders.prototype.adDorder = function (ordre) {this.orderList.push (ordre);} totalorders.prototype.create = function (ordre) {pour (var i.OrderList = this.orderList.length; i <longueur; i ++) {this.OrderList [i]. }}Cet objet a trois membres principaux: une liste de commandes, une méthode pour ajouter une commande et une méthode pour créer un ordre.
Lorsque vous utilisez le client, ce qui suit est le suivant:
var flight = new FlightOrder (); flight.create (); var ordres = new totalorders (); orders.adorder (new flightOrder ()); orders.adorder (new HotelOrder ()); orders.create ();
Les appels clients affichent deux façons, l'une consiste à créer des commandes de billets d'avion, et l'autre est de créer plusieurs commandes, mais ils sont finalement créés via la méthode de création. Il s'agit d'un scénario d'application très typique du mode combinaison.
Résumer
Le modèle de combinaison n'est pas difficile à comprendre. Il résout principalement le problème de cohérence des objets uniques et des objets combinés dans la façon dont ils sont utilisés. C'est idéal pour utiliser des modèles combinatoires si les objets ont des hiérarchies évidentes et souhaitent les utiliser uniformément. Dans le développement Web, cette hiérarchie est très courante et est très adaptée à l'utilisation de modèles de combinaison. Surtout pour JS, vous n'avez pas à vous en tenir à la forme de langue orientée objet traditionnelle, et à utiliser de manière flexible les caractéristiques du langage JS pour atteindre la cohérence en partie et en partie à une utilisation.
(1) Scénarios utilisant le mode combinaison
Utilisez le mode combinaison lors de la rencontre des deux situations suivantes
A. Une collection d'objets contenant une certaine structure hiérarchique (la structure spécifique ne peut pas être déterminée pendant le processus de développement)
B. Je veux effectuer une opération sur ces objets ou certains d'entre eux
(2) Inconvénients du mode combinaison
Étant donné que toute opération d'un objet combiné appellera la même opération sur tous les sous-objets, il y aura des problèmes de performances lorsque la structure combinée sera grande. De plus, lorsque vous utilisez le mode combinaison pour encapsuler HTML, vous devez sélectionner la balise appropriée. Par exemple, le tableau ne peut pas être utilisé en mode combinaison et les nœuds de feuilles ne sont pas évidents.