Tutoriel sur l'utilisation de modèles de combinaison dans le développement de modèles de conception JavaScript (avancé)

Le mode combinaison peut être compris comme une structure arborescente, le mode combinaison est donc adapté pour faire fonctionner un grand nombre d'objets, en particulier ceux avec des hiérarchies claires. Jetons un coup d'œil au tutoriel sur l'utilisation du mode combinaison dans le développement de. le modèle de conception JavaScript dit orienté objet

Dans notre processus de développement quotidien, nous rencontrerons certainement cette situation : traiter en même temps des objets simples et des objets complexes composés d'objets simples. seront combinés dans une arborescence et ils seront traités sur le client. Soyez cohérent lors de la manipulation. Par exemple, pour les commandes de produits sur les sites Web de commerce électronique, chaque commande de produit peut comporter plusieurs combinaisons de sous-commandes, telles que des dossiers du système d'exploitation. Chaque dossier comporte plusieurs sous-dossiers ou fichiers. En tant qu'utilisateur, nous pouvons copier, supprimer, etc. . Lors de l'exploitation, qu'il s'agisse d'un dossier ou d'un fichier, c'est la même chose pour nous les opérateurs. Dans ce scénario, il est très approprié d’utiliser le mode combinaison.

Connaissances de base

Mode composition : combinez des objets dans une structure arborescente pour représenter la hiérarchie "partie-tout". Le mode combinaison permet aux utilisateurs de combiner des objets uniques et des combinaisons. Les objets sont utilisés de manière cohérente.
Le modèle de combinaison a principalement trois rôles :
(1) Composant abstrait (Component) : classe abstraite, qui définit principalement l'interface publique des objets participant à la combinaison
(2) Sous-objet (Leaf ) : forme l'objet combiné L'objet le plus basique
(3) Objet composite (Composite) : un objet complexe composé de sous-objets
La clé pour comprendre le mode combinaison est de comprendre la cohérence de l'utilisation du mode combinaison d'objets simples et d'objets combinés. Nous parlerons ensuite de la mise en œuvre du modèle de combinaison pour approfondir notre compréhension.
Le mode combinaison est conçu sur mesure pour créer dynamiquement une interface utilisateur 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 :
(1 ) permet de traiter un groupe d'objets comme un objet spécifique. Un objet composite (A composite) implémente la même opération que les sous-objets qui le composent. Effectuer une opération sur l'objet composite entraînera tous les sous-objets sous l'objet. pour effectuer la même opération. .Ainsi, vous pouvez non seulement remplacer de manière transparente un seul objet par un ensemble d'objets, mais aussi vice versa. Ces objets indépendants sont dits faiblement couplés
(2) Le mode combinaison combinera les. Le sous-objet est défini dans une structure arborescente et permet de parcourir l'ensemble de l'arborescence. Cela masque l'implémentation interne et vous permet d'organiser les sous-objets de n'importe quelle manière. Tout code dans cet objet (objet composite) ne dépendra pas de l'implémentation du. sous-objets internes

Implémentation du mode de combinaison

(1) Le mode de combinaison le plus simple

La structure DOM de Le document HTML est une arborescence naturelle, les éléments les plus basiques sont transformés en une arborescence DOM et enfin en un document DOM, très adapté au mode combinaison.
Nous utilisons couramment la bibliothèque de classes jQuery, dans laquelle le mode combinaison est encore plus fréquemment utilisé. Par exemple, le code suivant est souvent implémenté :

$(".test").addClass("noTest").remove("test");

Ce code simple permet d'obtenir l'élément dont. class contient test, puis effectue le traitement addClass et removeClass, que $(".test") soit un élément ou plusieurs éléments, il est finalement appelé via les interfaces unifiées addClass et removeClass.
Simulons simplement l'implémentation de addClass :

var addClass = function (eles, className) {
  if (eles instanceof NodeList) {
    for (var i = 0, length = eles.length; i < length; i++) {
      eles[i].nodeType === 1 && (eles[i].className += (&#39; &#39; + className + &#39; &#39;));
    }
  }
  else if (eles instanceof Node) {
    eles.nodeType === 1 && (eles.className += (&#39; &#39; + className + &#39; &#39;));
  }
  else {
    throw "eles is not a html node";
  }
}
addClass(document.getElementById("p3"), "test");
addClass(document.querySelectorAll(".p"), "test");

Ce code simule simplement l'implémentation de addClass (sans tenir compte de la compatibilité et de la polyvalence pour le moment). Il détermine simplement d'abord le type de nœud, puis). Ajoutez className selon différents types. Pour NodeList ou Node, les appels clients utilisent tous l'interface addClass. C'est l'idée la plus basique du mode combinaison, rendant l'utilisation des parties et de l'ensemble cohérente.

(2) Exemple typique

Nous avons mentionné plus tôt un exemple typique : une commande de produits contient plusieurs sous-commandes de produits, plusieurs sous-commandes de produits. les commandes forment une commande de produits complexe. En raison des caractéristiques du langage Javascript, nous simplifions les trois rôles du modèle de combinaison en deux rôles :
(1) Sous-objet : Dans cet exemple, le sous-objet est le sous-ordre du produit
( 2) Objet combiné : ici il s'agit de la commande totale du produit
Supposons que nous développions un site Web de produits de voyage, qui contient deux sous-produits : billets d'avion et hôtels. Nous définissons les sous-objets comme suit :

function FlightOrder() { }
FlightOrder.prototyp.create = function () {
  console.log("flight order created");
}
function HotelOrder() { }
HotelOrder.prototype.create = function () {
  console.log("hotel order created");
}

Ensuite, nous créons une classe de commande totale :

function TotalOrders() {
  this.orderList = [];
}
TotalOrders.prototype.addOrder = function (order) {
  this.orderList.push(order);
}
TotalOrders.prototype.create = function (order) {
  for (var i = 0, length = this.orderList.length; i < length; i++) {
    this.orderList[i].create();
  }
}

Lorsqu'il est utilisé côté client, il se présente comme suit :

var flight = new FlightOrder();
flight.create();

var orders = new TotalOrders();
orders.addOrder(new FlightOrder());
orders.addOrder(new HotelOrder());
orders.create();

Résumé Le mode combinaison n'est pas difficile à comprendre. Il résout principalement le problème de cohérence dans l'utilisation d'objets uniques et d'objets combinés. C'est un bon candidat pour utiliser le modèle Composite si vos objets ont une structure hiérarchique claire et que vous souhaitez travailler avec eux de manière uniforme. Dans le développement Web, ce type de structure hiérarchique est très courant et convient très bien à l'utilisation du mode combinaison, notamment pour JS. Il n'est pas nécessaire de s'en tenir à la forme des langages orientés objet traditionnels et aux caractéristiques du JS. le langage peut être utilisé de manière flexible pour obtenir une cohérence partielle et globale.
(1) Scénarios d'utilisation du mode combinaison Utilisez le mode combinaison uniquement lorsque vous rencontrez les deux situations suivantes
A. Une collection d'objets avec une certaine structure hiérarchique (la structure spécifique est en cours de développement Impossible de déterminer)
B. J'espère effectuer une opération sur ces objets ou certains d'entre eux
(2) Inconvénients du mode combinaisonCar toute opération sur l'objet combiné affectera tous les sous- objets Appelle la même opération, il y aura donc des problèmes de performances lorsque la structure combinée est volumineuse. De plus, lorsque vous utilisez le mode combiné pour encapsuler du HTML, vous devez choisir les balises appropriées. Par exemple, le tableau ne peut pas être utilisé en mode combiné et les nœuds feuilles ne sont pas évidents

Ce qui précède est ce que j'ai compilé pour tout le monde. j'espère que cela sera utile à tout le monde à l'avenir.

Articles associés :

L'application du motif d'apparence de façade dans les modèles de conception en développement JavaScript (avancé)

Interprétation détaillée dans Méthodes pour implémenter le modèle d'adaptateur dans les modèles de conception en JavaScript (tutoriel graphique)

Résumé de l'application du modèle d'adaptateur Adaptateur dans la programmation de modèles de conception JavaScript (tutoriel graphique)

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!