Decorator mode description
Note: Use one class to dynamically modify the functional objects of another class before or after, and add some extra functions to it; this is a decoration of the functions of a class object. The decorative class and the decorated class require the same access interface method (function). In dynamic object-oriented classes, the implementation is generally constrained by the implementation of the same interface; the decorative class must have a reference to the decorated class, which is used to call the corresponding decorative class methods in the decorative class, and then modify it;
Examples of scenarios:
1>. For example, when we wear clothes in our lives, a shirt, a suit jacket, a pair of trousers, a tie, and a pair of beautiful leather shoes; each extra one is a decoration for the front or the whole body;
2>. For example, we have a function method under a class that may be used to write logs, which may be used for users to log in such a function. Perhaps we need to obtain the current operator information before writing the log, or write a log after logging in successfully; the additional operations before writing the log are generally the purpose of writing logs; writing the log after logging successfully is also generally the operation information of the log process;
Therefore, the decorator mode is used to implement, and the two operate similarly; it is the decorator's expansion of the functional object of the decorator, which is essentially the same functional range of the original method;
Instance source code
1. Decorated category
The code copy is as follows:
function Wear() {
}
Wear.prototype.Shirt = function() {
//Wear a shirt
console.log('Wear a shirt');
}
2. Decorators
The code copy is as follows:
function Decorator(wear) {
this.wear = wear;
}
Decorator.prototype.Shirt = function() {
this.wear.Shirt();
//After wearing a shirt, I put on a tie again
}
3. How to use
The code copy is as follows:
var wear = new Wear();
var decorator = new Decorator(wear);
decorator.Shirt();
This allows dynamic extended decoration of the Wear shirt function object. You don’t have to know how the original decorative method is performed. Just know what its function is, and then know what the additional function we want to add to it is;
Other Instructions
The decorator pattern truly withdraws the object-oriented method: the principle of opening up to extensions and closing down to modifications; all desired functional methods are performed without modifying the [decorated class Wear] and extending the [decorator class Decorator];
A main feature of the decorator model is that the decorator's reference to the decorator in order to achieve unmodified decoration of the decorator;
Simulation: Scene of wearing a shirt first, then a tie, and then a suit: The decorator above remains unchanged:
2. Decorators:
The code copy is as follows:
function Decorator(wear) {
this.wear = wear;
}
Decorator.prototype.Shirt = function() {
this.wear.Shirt(); //Only wear shirts here;
}
3. Create tie-wearing and suit-wearing classes similar to inheriting the Decorator subclass
The code copy is as follows:
function Decorator_Tie(decorator) {
this.decorator = decorator;
}
Decorator_Tie.prototype.Shirt = function() {
this.decorator.Shirt(); //Wear a shirt
console.log('Wear a tie again');
}
function Decorator_Western (decorator) {
this.decorator = decorator;
}
Decorator_Western.prototype.Shirt = function() {
this.decorator.Shirt();
console.log('Wear a suit again');
}
How to use:
The code copy is as follows:
//Put on your shirt first
var wear = new Wear();
var decorator = new Decorator(wear);
//decorator.Shirt();
//Wear a tie again
var tie = new Decorator_Tie(decorator);
//tie.Shirt();
//Put on a suit again
var western = new Decorator_Western(tie);
western.Shirt();
This is a mock example of dressing and decorating;