Home  >  Article  >  Web Front-end  >  Detailed explanation of js bridge design pattern

Detailed explanation of js bridge design pattern

小云云
小云云Original
2018-02-23 11:50:391441browse

The bridging design pattern is the basis of many other design patterns, such as the decoration pattern and the proxy pattern, which can be seen more or less in its shadow. One of the most important features in object-oriented design is inheritance. However, as the function of extending classes There are two ways - inheritance and bridging. In my simple understanding, bridging is to give up the use of inheritance to extend the class, but to extend the class by including another object with certain functions. Let's look at the two structures.

First we assume that there is a requirement, a graphics interface, and then there are graphics classes such as rectangle, square, circle, etc. We need graphics of various colors. Let’s use inheritance and bridging to realize this requirement. .

  • ##Inheritance

  • Bridge

Bridge Mode Structure

Implementation

  • Graphic abstract class

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

    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("圆型");
    };
  • Color abstract class

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

    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);
    };
  • Use

    let red = new Red();
    
    //正方形
    let square = new Square();
    //红色的正方形
    square.setColor(red);
    square.draw();
    
    //长方形
    let rectange = new Rectangle();
    //红色长方形
    rectange.setColor(red);
    rectange.draw();
Bridge design is suitable for two or more classes in one class Dimensions that change independently, and both dimensions need to be expanded,
The bridge mode achieves the decoupling of abstraction and implementation. The two of them are independent of each other and will not affect each other. For two independently changing dimensions, the bridge mode is perfect.
Related recommendations:

A brief introduction to the structural flyweight pattern of js design pattern

Example of service locator pattern of php design pattern Detailed explanation

Detailed explanation of the delegation pattern of PHP design pattern

The above is the detailed content of Detailed explanation of js bridge design pattern. For more information, please follow other related articles on the PHP Chinese website!

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn