Compréhension approfondie de la série JavaScript (29) : Explication détaillée du modèle de décorateur des compétences de design patterns_javascript

Présentation

Les décorateurs offrent une alternative plus flexible à l’héritage. Les décorateurs sont utilisés pour envelopper des objets avec la même interface. Ils vous permettent non seulement d'ajouter un comportement aux méthodes, mais également de définir des méthodes à appeler par l'objet d'origine (comme le constructeur du décorateur).

Les décorateurs sont utilisés pour ajouter de nouvelles fonctions sous forme de méthodes surchargées. Ce mode peut ajouter votre propre comportement avant ou après le décorateur pour atteindre un objectif spécifique.

Texte

Alors quels sont les avantages du motif décorateur ? Comme évoqué précédemment, les décorateurs sont une alternative à l’héritage. Lorsque le script est exécuté, l'ajout d'un comportement à la sous-classe affectera toutes les instances de la classe d'origine, mais pas les décorateurs. Au lieu de cela, il peut ajouter de nouveaux comportements à différents objets individuellement. Comme indiqué dans le code suivant :

Copier le code Le code est le suivant :

//Classe (fonction) à décorer
fonction Macbook() {
This.cost = function () {
Renvoyez 1000 ;
};
>

fonction Mémoire(macbook) {
This.cost = function () {
         return macbook.cost() 75;
};
>

fonction BlurayDrive(macbook) {
This.cost = function () {
         return macbook.cost() 300;
};
>

fonction Assurance(macbook) {
This.cost = function () {
         return macbook.cost() 250;
};
>

// Utilisation
var myMacbook = nouvelle assurance (nouveau BlurayDrive (nouvelle mémoire (nouveau Macbook ())));
console.log(myMacbook.cost());

Ce qui suit est un autre exemple. Lorsque nous appelons performTask sur l'objet décorateur, il a non seulement certains comportements de décorateur, mais appelle également la fonction performTask de l'objet sous-jacent.

Copier le code Le code est le suivant :

fonction ConcreteClass() {
This.performTask = function () {
This.preTask();
console.log('faire quelque chose');
This.postTask();
};
>

fonction AbstractDecorator(décoré) {
This.performTask = function () {
          décoré.performTask();
};
>

function ConcreteDecoratorClass(décoré) {
This.base = AbstractDecorator;
This.base(décoré);

décoré.preTask = function () {
console.log('pré-appel..');
};

décoré.postTask = function () {
console.log('post-appel..');
};

}

var béton = new ConcreteClass();
var decorator1 = new ConcreteDecoratorClass(béton);
var decorator2 = new ConcreteDecoratorClass(decorator1);
decorator2.performTask();

Autre exemple approfondi :

Copier le code Le code est le suivant :

var arbre = {};
arbre.decorate = fonction () {
console.log('Assurez-vous que l'arbre ne tombe pas');
};

tree.getDecorator = fonction (déco) {
Arbre[deco].prototype = this;
Retourner le nouvel arbre[déco];
};

tree.RedBalls = fonction () {
This.decorate = function () {
This.RedBalls.prototype.decorate(); // Étape 7 : Exécutez d'abord la méthode de décoration du prototype (c'est Angel)
console.log('Mettez des boules rouges'); // Étape 8 Puis affichez rouge
// Utilisez ces 2 étapes comme méthode de décoration de RedBalls
>
};

tree.BlueBalls = fonction () {
This.decorate = function () {
This.BlueBalls.prototype.decorate(); // Étape 1 : Exécutez d'abord la méthode de décoration du prototype, c'est-à-dire tree.decorate()
console.log('Ajouter des boules bleues'); // Étape 2 Puis afficher du bleu
// Utilisez ces 2 étapes comme méthode de décoration de BlueBalls
>
};

arbre.Angel = fonction () {
This.decorate = function () {
This.Angel.prototype.decorate(); // Étape 4 : Exécutez d'abord la méthode de décoration du prototype (c'est BlueBalls)
console.log('Un ange en haut'); // Étape 5 Puis affichez l'ange
// Utilisez ces 2 étapes comme méthode de décoration d'Angel
>
};

tree = tree.getDecorator('BlueBalls'); // Étape 3 : Attribuez l'objet BlueBalls à l'arbre À l'heure actuelle, getDecorator dans le prototype parent est toujours disponible
. tree = tree.getDecorator('Angel'); // Étape 6 : Attribuer l'objet Angel à tree À ce stade, getDecorator dans le prototype parent du prototype parent est toujours disponible
tree = tree.getDecorator('RedBalls'); // Étape 9 : Attribuez l'objet RedBalls à tree

tree.decorate(); // Étape 10 : Exécuter la méthode de décoration de l'objet RedBalls

Résumé

Le modèle de décorateur est un moyen d'ajouter dynamiquement plus de fonctions aux fonctions existantes. Placez chaque fonction à décorer dans une fonction distincte, puis utilisez cette fonction pour envelopper l'objet de fonction existant à décorer, par conséquent, lorsqu'un comportement particulier est nécessaire. à exécuter, le code appelant peut utiliser de manière sélective et séquentielle des fonctions de décoration pour envelopper les objets selon les besoins. L'avantage est que les responsabilités essentielles de la classe (fonction) et la fonction de décoration sont séparées.