Introduction to the decorator pattern of JavaScript design pattern

  • 2020-05-09 18:11:06
  • OfStack

Decorator pattern description

Description: through a class to another class to the dynamic function of the object before or after the modification, to it to add some additional functions; This is the decoration of the function of a class object. The decorated class and the decorated class are required to have the same access interface method (function). In the dynamic object-oriented class, the implementation of the same interface (interface) is generally implemented to constrain the implementation. The decorator class should have a reference to the class being decorated, which is used in the corresponding method of the decorator class to call the corresponding method of the class being decorated, and then decorate it;

Example of scenario:

1 > For example, we wear clothes in life, 1 shirt, 1 suit jacket, 1 pair of trousers, 1 tie, 1 pair of beautiful leather shoes; Every wear 1 more, is to the front 1 or the whole body decoration;

2 > For example, we have a function method under the class, which may be used for writing the log, and may be used for such functions as user login. Maybe we need to get the information of the current operator before writing the log, or write a log after successfully logging in; The additional operation before writing to the log, which is still a log purpose in general; After the success of the log, it is generally a login process of the operation of information;

So the decorator pattern is used to implement a scenario in which both operations are similar; Is the decorator to be decorated by the extension of the functional object, the essence is the same as the original method of the functional scope;

Example source code

1. Those who are decorated



function Wear() {
   
} Wear.prototype.Shirt = function() {
    // Put on a shirt
  console.log(' Put on a shirt ');
}

2. Decorator


function Decorator(wear) {
    this.wear = wear;
} Decorator.prototype.Shirt = function() {
    this.wear.Shirt();
    // After putting on a shirt, I put on a tie
}

3. Method of use


var wear = new Wear();
var decorator = new Decorator(wear);
decorator.Shirt();

In this way, the function object of Wear wearing shirt can be dynamically expanded and decorated. You don't need to know how the original decoration method is implemented. You just need to know what its function is and what additional functions we need to add to it.

Other instructions

Decorator mode, which really represents the object-oriented approach: open to extension, closed to modification; All the desired functional methods are implemented without modifying the decorator class Wear and extending the decorator class Decorator.

One of the main features of the decorator model is the reference of the decorator to the decorator, so as to realize the unmodified decoration of the decorator.

Simulation: first wear a shirt, then wear a tie, then wear a suit scene: the top of the decoration is the same:

2. Decorator:


function Decorator(wear) {
    this.wear = wear;
}
Decorator.prototype.Shirt = function() {
    this.wear.Shirt(); // Only shirts here ;
}

3. Create a tie-wearing class and a suit-wearing class similar to the Decorator subclass



function Decorator_Tie(decorator) {
    this.decorator = decorator;
}   
Decorator_Tie.prototype.Shirt = function() {
    this.decorator.Shirt(); // Put on a shirt
    console.log(' Put on your tie ');
} function Decorator_Western (decorator) {
    this.decorator =  decorator;
}
Decorator_Western.prototype.Shirt = function() {
    this.decorator.Shirt();
    console.log(' Put on your suit ');
}

Usage:



// Put on your shirt
var wear = new Wear();
var decorator = new Decorator(wear);
//decorator.Shirt();
// Put on your tie
var tie = new Decorator_Tie(decorator);
//tie.Shirt();
// Put on your suit
var western = new Decorator_Western(tie);
western.Shirt();

This is an example of a simulation of clothing decoration;


Related articles: