Maison > interface Web > js tutoriel > expérience d'apprentissage de modèles de conception de décoration js (réponses détaillées)

expérience d'apprentissage de modèles de conception de décoration js (réponses détaillées)

亚连
Libérer: 2018-05-18 16:57:44
original
1377 Les gens l'ont consulté

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']);
Copier après la connexion

Classe d'objet

var AcmeComfortCuiser = function(){
};
AcmeComfortCuiser.prototype = {
  assemble: function(){
  },
  wash: function(){
  },
  repair: function(){
  },
  getPrice: function(){
  }
}
Copier après la connexion

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();
  }
}
Copier après la connexion

Catégorie Extension

  var HeadlightDecorator = function(bicycle){
    BicycleDecorator.call(this, bicycle);
  };
  extend(HeadlightDecorator, BicycleDecorator);
  HeadlightDecorator.prototype.getPrice = function(){
    return this.bicycle.getPrice() + 15.00;
  }
Copier après la connexion

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 connexes :

Une description de cas d'utilisation de la fonction de rappel JS

Une description de cas d'utilisation de la fonction de rappel JS

Une description de cas d'utilisation de la fonction de rappel JS

nodejsCréer un serveur local pour gérer le traitement inter-domaines

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!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal