L'utilisation de modèles de combinaison dans les modèles de conception dans la construction de programmes JavaScript (avancé)-js tutoriel-php.cn

Le modèle de combinaison combine généralement une série de petits objets similaires en un grand objet. Ce grand objet fournit une interface pour faire fonctionner les petits objets à l'intérieur. Examinons en détail le modèle de combinaison dans le modèle de conception. 🎜>

dans la construction d'un programme JavaScript définit une combinaison

, comme son nom l'indique, pour créer une seule entité à partir d'objets contenant plusieurs composants. Cette entité unique servira de point d'accès à toutes ces parties, et même si cela simplifie grandement les choses, cela peut aussi être assez trompeur, car il n'existe aucun moyen implicite d'indiquer clairement le nombre de parties que contient la combinaison.

Le but du modèle de combinaison est de découpler le programme client de l'architecture interne des éléments complexes, afin que le programme client traite tous les sous-éléments de la même manière.

Chaque nœud enfant peut créer une existence complexe. Pour le nœud parent, il n'est pas nécessaire de connaître la complexité du nœud enfant ou la complexité de la mise en œuvre du nœud enfant. Il vous suffit de prêter attention aux méthodes spécifiques. du nœud enfant et vous pouvez l'utiliser. Relation simplifiée entre père et fils.

Il en va de même pour les nœuds enfants. Une exposition excessive à l'interface est parfois un abus, et elle réduit également la dépendance externe.

ExempleNous expliquons mieux les combinaisons à l'aide d'exemples. Dans l'image ci-dessous, vous pouvez voir deux types d'objets différents : les conteneurs et les bibliothèques sont des compositions, et les images sont des feuilles. Une composition peut accueillir des enfants, mais ne met généralement pas en œuvre d’autres comportements. Les feuilles contiennent la plupart des comportements, mais ne peuvent pas accueillir d'enfants, du moins pas dans l'exemple de composition traditionnel.

2016518103600142.png (550×341)

Cet exemple crée une galerie d'images comme exemple de mode combiné. Il n'y a que trois niveaux : albums, bibliothèques et images. Les albums et les bibliothèques seront constitués de groupes et les images seront les feuilles, comme le montre l'image ci-dessus. Il s'agit d'une structure plus explicite que celle requise par la composition elle-même, mais pour cet exemple, il est logique de limiter ces couches aux seules compositions ou lames. La composition standard ne limite pas les niveaux structurels pouvant avoir des pales, ni le nombre de pales.

Pour commencer, vous devez d'abord créer la "classe" GalleryComposite pour les albums et les bibliothèques. Notez que j'utilise jQuery pour effectuer la manipulation DOM afin de simplifier le processus.

var GalleryComposite = function (heading, id) {
  this.children = [];

  this.element = $(&#39;<p id="&#39; + id + &#39;" class="composite-gallery"></p>&#39;)
  .append(&#39;<h2>&#39; + heading + &#39;</h2>&#39;);
}

GalleryComposite.prototype = {
  add: function (child) {
    this.children.push(child);
    this.element.append(child.getElement());
  },

  remove: function (child) {
    for (var node, i = 0; node = this.getChild(i); i++) {
      if (node == child) {
        this.children.splice(i, 1);
        this.element.detach(child.getElement());
        return true;
      }

      if (node.remove(child)) {
        return true;
      }
    }

    return false;
  },

  getChild: function (i) {
    return this.children[i];
  },

  hide: function () {
    for (var node, i = 0; node = this.getChild(i); i++) {
      node.hide();
    }

    this.element.hide(0);
  },

  show: function () {
    for (var node, i = 0; node = this.getChild(i); i++) {
      node.show();
    }

    this.element.show(0);
  },

  getElement: function () {
    return this.element;
  }
}

Copier après la connexion

Cette position est un peu délicate, pourriez-vous s'il vous plaît me permettre de l'expliquer un peu plus ? Nous construisons cette combinaison en utilisant à la fois les méthodes add, delete et getChild getChild. Cet exemple n'utilisera pas réellement Remove et GetChild, mais ils sont utiles pour créer des combinaisons dynamiques. Les méthodes hide, show et getElement sont utilisées pour manipuler le DOM. La composition est destinée à être affichée à l'utilisateur sur la page en tant que représentation de la bibliothèque. Cette combinaison contrôle ces éléments de bibliothèque via masquer et afficher. Si vous appelez hide sur un album, l'album entier disparaîtra, ou vous pouvez simplement l'appeler sur une seule image afin que seule cette image disparaisse.

Maintenant, créez une classe GalleryImage. Notez qu'il utilise exactement la même approche que GalleryComposite. En d’autres termes, ils implémentent la même interface, sauf que l’image est une feuille et ne fait donc rien avec les méthodes liées aux enfants, tout comme elle n’a pas d’enfants. La composition doit être exécutée en utilisant la même interface car l'élément de composition ne sait pas s'il ajoute un autre élément de composition ou une feuille, donc si vous essayez d'appeler ces méthodes sur ses enfants, elle doit s'exécuter parfaitement sans aucune erreur.

var GalleryImage = function (src, id) {
  this.children = [];

  this.element = $(&#39;<img />&#39;)
  .attr(&#39;id&#39;, id)
  .attr(&#39;src&#39;, src);
}

GalleryImage.prototype = {
  // Due to this being a leaf, it doesn&#39;t use these methods,
  // but must implement them to count as implementing the
  // Composite interface
  add: function () { },

  remove: function () { },

  getChild: function () { },

  hide: function () {
    this.element.hide(0);
  },

  show: function () {
    this.element.show(0);
  },

  getElement: function () {
    return this.element;
  }
}

Copier après la connexion

Maintenant que vous avez construit le prototype objet, vous pouvez désormais l'utiliser. Ci-dessous, vous pouvez voir le code qui construit réellement la bibliothèque d'images.

var container = new GalleryComposite(&#39;&#39;, &#39;allgalleries&#39;);
var gallery1 = new GalleryComposite(&#39;Gallery 1&#39;, &#39;gallery1&#39;);
var gallery2 = new GalleryComposite(&#39;Gallery 2&#39;, &#39;gallery2&#39;);
var image1 = new GalleryImage(&#39;image1.jpg&#39;, &#39;img1&#39;);
var image2 = new GalleryImage(&#39;image2.jpg&#39;, &#39;img2&#39;);
var image3 = new GalleryImage(&#39;image3.jpg&#39;, &#39;img3&#39;);
var image4 = new GalleryImage(&#39;image4.jpg&#39;, &#39;img4&#39;);

gallery1.add(image1);
gallery1.add(image2);

gallery2.add(image3);
gallery2.add(image4);

container.add(gallery1);
container.add(gallery2);

// Make sure to add the top container to the body,
// otherwise it&#39;ll never show up.
container.getElement().appendTo(&#39;body&#39;);
container.show();

Copier après la connexion

Avantages du mode combinaison : Des opérations simples peuvent également produire des résultats complexes. Il vous suffit d'effectuer des opérations sur l'objet de niveau supérieur et de laisser chaque sous-objet passer l'opération. par lui-même. Ceci est particulièrement utile pour les opérations répétées.

En mode composition, le couplage entre les objets individuels est très lâche. Tant qu'ils implémentent la même interface, changer leur emplacement ou les échanger est un jeu d'enfant. Cela favorise la réutilisation du code et facilite également la refactorisation du code.

Chaque fois qu'une opération est effectuée sur un objet composite de niveau supérieur, une recherche en profondeur de toute la structure est en fait effectuée pour trouver des nœuds, et le programmeur qui a créé l'objet composite n'a aucune idée de ces détails. Il est très simple d'ajouter, de supprimer et de rechercher des nœuds dans cette hiérarchie.

Inconvénients du modèle de composition : La facilité d'utilisation d'un objet de composition peut masquer le coût de chaque opération qu'il supporte. Puisque toute opération appelée par un objet composite sera transmise à tous ses objets enfants, si la hiérarchie est grande, les performances du système seront affectées. Le bon fonctionnement du modèle composite nécessite une certaine forme d’interface.

Lorsque des objets composites et des classes de nœuds sont utilisés comme outils de packaging pour des éléments HTML, l'objet composite doit être conforme aux règles d'utilisation du HTML. Par exemple, un tableau est difficile à convertir en objet composite.

Plus la vérification de l'interface est stricte, plus la classe d'objets composites sera fiable.

J'ai compilé ce qui précède pour vous, j'espère que cela vous sera utile à l'avenir.