Explication détaillée du modèle de conception du pont js

Le modèle de conception de pont est à la base de nombreux autres modèles de conception, tels que le motif décoratif et le motif proxy, qui peuvent être vus plus ou moins dans son ombre. L'une des caractéristiques les plus importantes de la conception orientée objet est l'héritage. Cependant, en tant que fonction d'extension de classe, il existe deux manières : l'héritage et le pontage. D'après ma compréhension simple, le pontage consiste à abandonner l'utilisation de l'héritage pour étendre la classe, mais à étendre la classe en incluant un autre objet avec certaines fonctions. . Regardons les deux structures.

Nous supposons d'abord qu'il y a une exigence, qu'il existe une interface graphique, puis il y a des classes graphiques telles que rectangle, carré, cercle, etc. Nous avons besoin de graphiques de différentes couleurs. Utilisons l'héritage et le pontage. réaliser cette exigence.

• Hériter

• Pont

Structure du mode pont

Mise en œuvre

• Cours de résumé graphique

  let Shape = function(color) {
    this.color = color;
  };
  Shape.prototype.setColor = function(color) {
    this.color = color;
  };
  Shape.prototype.draw = function() {
    new  Error();
  }

• Cours de graphisme

  let Rectangle = function (color) {
    Shape.call(this, color);
  };
  extend(Rectangle, Shape);
  Rectangle.prototype.draw = function () {
    color.bepaint("长方形");
  };
  
  let Square = function (color) {
    Shape.call(this, color);
  };
  extend(Square, Shape);
  Square.prototype.draw = function () {
    color.bepaint("正方形");
  }
  
  let Circle = function (color) {
    Shape.call(this, color);
  };
  extend(Circle, Shape);
  Circle.prototype.draw = function () {
    color.bepaint("圆型");
  };

• Classe abstraite de couleur

  let Color = function() {
  };
  Shape.prototype.bepaint = function() {
    new  Error();
  };

• Classe de couleur

  let Red = function () {
    Color.call(this);
  };
  extend(Red, Color);
  Red.prototype.bepaint = function(shape) {
    console.log("白色的" + shape);
  };
  
  let Green = function () {
    Color.call(this);
  };
  extend(Green, Color);
  Green.prototype.bepaint = function(shape) {
    console.log("绿色的" + shape);
  };
  
  let Blue = function () {
    Color.call(this);
  };
  extend(Blue, Color);
  Blue.prototype.bepaint = function(shape) {
    console.log("蓝色的" + shape);
  };

• Utiliser

  let red = new Red();
  
  //正方形
  let square = new Square();
  //红色的正方形
  square.setColor(red);
  square.draw();
  
  //长方形
  let rectange = new Rectangle();
  //红色长方形
  rectange.setColor(red);
  rectange.draw();

conception de pont Convient à une classe avec deux dimensions ou plus changeant indépendamment, et les deux dimensions doivent être étendues,
Le mode pont réalise le découplage de l'abstraction et de la mise en œuvre. Les deux sont indépendants l’un de l’autre et ne s’affecteront pas. Pour deux dimensions changeant indépendamment, le mode pont est parfait.

Recommandations associées :

Une brève introduction au modèle de poids mouche structurel du modèle de conception js

Un exemple du modèle de localisateur de service de Modèle de conception php Explication détaillée

Explication détaillée du modèle de délégation des modèles de conception PHP

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!