Introduction to the decorator pattern of JavaScript design patterns

Introduction to the decorator pattern of JavaScript design patterns_javascript skills

WBOY

Release： 2016-05-16 16:24:03

Original

1023 people have browsed it

Decorator Pattern Description

Explanation: Use one class to dynamically modify the functional object of another class before or after, and add some additional functions to it; this is the decoration of the function of a class object, and the decorated class is related to the decorated class Classes are required to have the same access interface methods (functions). In dynamic object-oriented classes, the implementation is generally constrained by implementing the same interface; decorative classes must have a reference to the decorated class, which is used in The corresponding method of the decorated class calls the method of the corresponding decorated class and then modifies it;

Scenario example:

1>. For example, the clothes we wear in life are a shirt, a suit jacket, a pair of trousers, a tie, and a pair of beautiful leather shoes; each additional piece worn is a decoration for the front piece or the whole body. ;

2>. For example, we have a functional method under the class, which may be used for writing logs or for user login. Maybe it is necessary to obtain the current operator information before writing the log, or after successful login, write Enter a log; the additional operation before writing the log is generally the purpose of writing the log; writing the log after successful login is generally the operation information of the login process;

Therefore, the decorator pattern is used to implement a scenario where the two have similar operations; it is the extension of the decorator to the decorated functional object, and the essence is the same functional scope of the original method;

Example source code

1. Decorator class

Copy code The code is as follows:

function Wear() {

}

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

2. Decorator class

Copy code The code is as follows:

function Decorator(wear) {
This.wear = wear;
}

Decorator.prototype.Shirt = function() {
This.wear.Shirt();
//After wearing a shirt, I added a tie
}

3. How to use

Copy code The code is as follows:

var wear = new Wear();

var decorator = new Decorator(wear);

decorator.Shirt();

In this way, the dynamic extended decoration of the Wear shirt functional object is realized. You don’t need to know how the original decorated method is executed. You only need to know what its function is, and then know what we want to add to it. Whatever the extra functions are;

Other instructions

The decorator pattern truly embodies the object-oriented approach: the principle of being open to extensions and closed to modifications; all the desired functional methods are implemented without modifying the [decorated class Wear] and extending the [decorator class] Decorator];

One of the main features of the decorator pattern is that the decorator references the decorated object to achieve unmodified decoration of the decorated object;

Simulation: First put on a shirt, then a tie, then a suit: The decorated person above remains unchanged:

2. Decorator class:

Copy code The code is as follows:

function Decorator(wear) {

This.wear = wear;

}

Decorator.prototype.Shirt = function() {

This.wear.Shirt(); //Only wear a shirt here;

}

3. Create a tie class and a suit class that inherit the Decorator subclass

Copy code The code is as follows:

function Decorator_Tie(decorator) {
This.decorator = decorator;
}
Decorator_Tie.prototype.Shirt = function() {
This.decorator.Shirt(); //Put on the shirt
console.log('Put on your tie again');
}

function Decorator_Western (decorator) {
This.decorator = decorator;
}
Decorator_Western.prototype.Shirt = function() {
This.decorator.Shirt();
console.log('Put on the suit again');
}

Usage:

Copy code The code is as follows:

//Put on your shirt first

var wear = new Wear();

var decorator = new Decorator(wear);

//decorator.Shirt();

//Put on your tie again

var tie = new Decorator_Tie(decorator);

//tie.Shirt();

//Put on the suit again

var western = new Decorator_Western(tie);

western.Shirt();

This is a simulation example of wearing clothes and decoration;