introduire
Le composite combine des objets dans une structure d'arbre pour représenter une hiérarchie "partielle". Le mode de combinaison rend les utilisateurs cohérents avec l'utilisation d'objets individuels et d'objets combinés.
Les scénarios courants incluent le mécanisme de contrôle dans ASP.NET (c'est-à-dire que le contrôle peut contenir le contrôle des enfants, qui peut fonctionner, ajouter et supprimer le contrôle des enfants), et de même, il existe un mécanisme DOM. Un nœud DOM peut contenir des nœuds enfants. Qu'il s'agisse d'un nœud parent ou d'un nœud enfant, il a les fonctions communes d'ajouter, de supprimer et de traverser les nœuds enfants. Par conséquent, la clé du modèle de combinaison est d'avoir une classe abstraite, qui peut représenter à la fois les éléments enfants et les éléments parents.
texte
Par exemple, il existe un restaurant qui fournit une variété de plats. Chaque table a un menu. Le menu répertorie les plats dont le restaurant est tout, y compris les pâtisseries, le déjeuner, le dîner, etc. Chaque repas dispose d'une variété d'articles de menu. En supposant que les éléments du menu et le menu entier doivent être imprimés, et que des sous-éléments peuvent être ajoutés, comme de nouveaux plats peuvent être ajoutés pour le déjeuner, et du sucre peut être ajouté pour des éléments de menu tels que le café.
Dans ce cas, nous pouvons utiliser la combinaison pour représenter ces contenus comme des hiérarchies. Décomposons nos étapes de mise en œuvre une par une.
La première étape consiste à implémenter notre fonction de "classe abstraite" MenuComponent:
La copie de code est la suivante:
var menuComponent = function () {
};
MenuComponent.prototype.getName = function () {
lancer une nouvelle erreur ("Cette méthode doit être réécrite!");
};
MenuComponent.prototype.getDescription = function () {
lancer une nouvelle erreur ("Cette méthode doit être réécrite!");
};
MenuComponent.prototype.getPrice = function () {
lancer une nouvelle erreur ("Cette méthode doit être réécrite!");
};
MenuComponent.prototype.isvegetarian = fonction () {
lancer une nouvelle erreur ("Cette méthode doit être réécrite!");
};
MenuComponent.prototype.print = fonction () {
lancer une nouvelle erreur ("Cette méthode doit être réécrite!");
};
MenuComponent.prototype.add = fonction () {
lancer une nouvelle erreur ("Cette méthode doit être réécrite!");
};
MenuComponent.prototype.remove = function () {
lancer une nouvelle erreur ("Cette méthode doit être réécrite!");
};
MenuComponent.prototype.getchild = function () {
lancer une nouvelle erreur ("Cette méthode doit être réécrite!");
};
Cette fonction fournit deux types de méthodes, l'une consiste à obtenir des informations, telles que le prix, le nom, etc., et l'autre est une méthode de fonctionnement générale, telle que l'impression, l'ajout, la suppression et l'obtention d'un sous-menu.
La deuxième étape consiste à créer des plats de base:
La copie de code est la suivante:
var menuitem = fonction (sname, sdescription, bvegetarian, nprice) {
MenuComponent.Apply (this);
this.sname = sname;
this.sdeScription = sdescription;
this.bvegetarian = bvegetarian;
this.nprice = nprice;
};
MenuItem.prototype = new MenuComponent ();
Menutem.prototype.getName = function () {
Renvoie ceci.sname;
};
Menutem.prototype.getDescription = function () {
Renvoyez ceci.sdescription;
};
Menutem.prototype.getprice = function () {
Renvoyez ce.nprice;
};
Menuitem.prototype.isvegetarian = fonction () {
Renvoyez ce.bvegetarian;
};
Menuitem.prototype.print = fonction () {
console.log (this.getName () + ":" + this.getDescription () + "," + this.getprice () + "euros");
};
Comme on peut le voir à partir du code, nous n'avons re-prototypé que 4 méthodes pour obtenir des informations et des méthodes d'impression, et nous n'avons pas surchargé les 3 autres méthodes de fonctionnement, car les plats de base n'incluent pas les moyens d'ajouter, de supprimer et d'obtenir des sous-diras.
Étape 3: Créez les plats:
La copie de code est la suivante:
var menu = function (sname, sdescription) {
MenuComponent.Apply (this);
this.amenuComponents = [];
this.sname = sname;
this.sdeScription = sdescription;
this.createiterator = function () {
Jetez une nouvelle erreur ("Cette méthode doit être écrasée!");
};
};
Menu.prototype = new MenuComponent ();
Menu.prototype.add = fonction (omenuComponent) {
// Ajouter le substitut
this.amenuComponents.push (omenuComponent);
};
Menu.prototype.reMove = function (omenuComponent) {
// Supprimer les substituts
var amenuuetems = [];
var nMenuem = 0;
var nlenMenUiUtems = this.amenuComponents.length;
var oitem = null;
pour (; nMenUitem <nlenMenuItems;) {
oitem = this.amenuComponents [nMenuItem];
if (oitem! == omenuComponent) {
amecutems.push (oitem);
}
nMenuItem = nMenuItem + 1;
}
this.AmenuComponents = amenuuitems;
};
Menu.prototype.getchild = fonction (nindex) {
// Obtenez le substitut spécifié
Renvoyez ceci.AmenuComponents [Nindex];
};
Menu.prototype.getName = function () {
Renvoie ceci.sname;
};
Menu.prototype.getDescription = function () {
Renvoyez ceci.sdescription;
};
Menu.prototype.print = function () {
// imprime les plats actuels et tous les sous-disques
console.log (this.getName () + ":" + this.getDescription ());
console.log ("--------------------------------------------");
var nMenuComponent = 0;
var nlenmenuComponents = this.AmenuComponents.length;
var omenuComponent = null;
pour (; nMenuComponent <nlenmenuComponents;) {
oMénuComponent = this.AmenuComponents [nMenUComponent];
omenUComponent.print ();
nMenuComponent = nMenuComponent + 1;
}
};
Notez qu'en plus de mettre en œuvre les méthodes d'ajout, de supprimer et d'obtenir, la méthode d'impression d'impression consiste à imprimer d'abord les informations actuelles du plat, puis à faire une boucle à travers l'impression de toutes les informations du sous-canal.
Étape 4: Créez le plat spécifié:
Nous pouvons créer plusieurs vrais plats, tels que le dîner, le café, les pâtisseries, etc. Ils utilisent tous le menu comme prototype, et le code est le suivant:
La copie de code est la suivante:
var dinnermenu = function () {
Menu.Apply (this);
};
Dinnermenu.prototype = nouveau menu ();
var cafemenu = function () {
Menu.Apply (this);
};
Cafemenu.prototype = nouveau menu ();
var pancakehousemenu = function () {
Menu.Apply (this);
};
Pancakehousemenu.prototype = new menu ();
Étape 5: Créez le conteneur du menu supérieur - Menu Book:
La copie de code est la suivante:
var matelas = fonction (amenus) {
this.amenus = amenus;
};
Matelas.prototype.printMenu = fonction () {
this.amenus.print ();
};
Cette fonction prend un tableau de menu en tant que paramètre, et la valeur fournit la méthode PrintMenu pour imprimer tous les contenus du menu.
Étape 6, Méthode d'appel:
La copie de code est la suivante:
Var OpancakeHouseMenu = nouveau menu ("menu de crêpes", "petit-déjeuner");
var odinnermernu = nouveau menu ("menu du dîner", "déjeuner");
var ocopeamemenu = nouveau menu ("menu de café", "dîner");
var oallmenus = nouveau menu ("tous les menus", "tous les menus combinés");
OALLMENUS.ADD (OpancakeHouseMemenu);
oallmenus.add (odinnermenu);
odinnermenu.add (nouveau menuitem ("pâtes", "spaghetti avec sauce marinara, et une tranche de pain au levain", vrai, 3.89));
odinnermenu.add (ocopeamemenu);
ocopememenu.add (new Menuitem ("express", "café de la machine", false, 0,99));
var omattress = nouveau matelas (oallmenus);
console.log ("----------------------------------------------");
Omattress.printMenu ();
console.log ("----------------------------------------------");
Les étudiants qui connaissent le développement du contrôle ASP.NET semblent-ils familiers?
Résumer
Le scénario d'utilisation du mode combinaison est très clair:
Lorsque vous souhaitez représenter la partie de l'objet - la hiérarchie globale;
Vous souhaitez que l'utilisateur ignore la différence entre un objet combiné et un seul objet, et l'utilisateur utilisera tous les objets de la structure combinée uniformément (méthodes)
De plus, ce modèle est souvent utilisé avec les décorateurs. Ils ont généralement une classe de parent commune (c'est-à-dire le prototype), de sorte que la décoration doit prendre en charge les interfaces de composants avec les opérations ADD, Supprimer et Getchild.