Home > Web Front-end > JS Tutorial > body text

Detailed explanation of js bridge design pattern

小云云
Release: 2018-02-23 11:50:39
Original
1435 people have browsed it

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

    let Color = function() {
    };
    Shape.prototype.bepaint = function() {
      new  Error();
    };
    Copy after login
  • 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);
    };
    Copy after login
  • Use

    let red = new Red();
    
    //正方形
    let square = new Square();
    //红色的正方形
    square.setColor(red);
    square.draw();
    
    //长方形
    let rectange = new Rectangle();
    //红色长方形
    rectange.setColor(red);
    rectange.draw();
    Copy after login
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!

Related labels:
source:php.cn
Statement of this Website
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
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template