Interprétation détaillée des modèles de conception décorative en js

Cet article partagera avec vous l'expérience de l'auteur et les points clés après avoir appris le modèle de conception de décoration Javascript. Les amis intéressés peuvent s'y référer.

Mode de conception de décoration

Chaque appareil a ses propres scénarios d'application et façons de résoudre les problèmes. Le mode de conception de décoration ajoute dynamiquement de nouveaux objets à l'objet. Function, est une technologie utilisée pour remplacer l'héritage, qui peut étendre les nouvelles fonctions des objets sans ajouter de sous-classes via l'héritage. L'utilisation de la relation d'association d'objets au lieu de la relation d'héritage est plus flexible et évite l'expansion rapide du système de types. Ce mode convient lorsque les fonctions nouvellement ajoutées ne suffisent pas à résoudre le problème au détriment de l'héritage - tuer un poulet. avec un couteau de boucher ^_^
Modèle de conception de décoration : ajoutez dynamiquement des responsabilités supplémentaires à un objet Pour étendre la fonctionnalité d'un objet, les décorateurs proposent une alternative plus flexible que l'héritage.

Schéma de structure :

Interface

var Bicycle = new Interface('Bicycle', ['assemble', 'wash', 'repair', 'getPrice']);

Classe d'objet

var AcmeComfortCuiser = function(){
  
};
AcmeComfortCuiser.prototype = {
  assemble: function(){
    
  },
  wash: function(){
    
  },
  repair: function(){
    
  },
  getPrice: function(){
    
  }
}

Catégorie Décoration

var BicycleDecorator = function(bicycle){
  Interface.ensureImplements(bicycle, Bicycle);
  this.bicycle = bicycle;
};
BicycleDecorator.prototype = {
  assemble: function(){
    return this.bicycle.assemble();
  },
  wash: function(){
    return this.bicycle.wash();
  },
  repair: function(){
    return this.bicycle.repair();
  },
  getPrice: function(){
    return this.bicycle.getPrice();
  }
}

Catégorie Extension

  var HeadlightDecorator = function(bicycle){
    BicycleDecorator.call(this, bicycle);
  };
  extend(HeadlightDecorator, BicycleDecorator);
  HeadlightDecorator.prototype.getPrice = function(){
    return this.bicycle.getPrice() + 15.00;
  }

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

Articles associés :

Méthode Vue.js pour réaliser un glissement aléatoire d'images

Suppression de chaîne JS de caractères consécutifs ou répétés Exemple

Méthode vue.js ou js pour implémenter le tri chinois A-Z

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!