The decorator pattern of JavaScript design pattern Introduction _javascript Skill

Decorator Mode description

Description: A class to dynamic to another class of functional objects before or after the modification, to add some additional functions; This is the decoration of the function of a class object, the decorated class with the decorated class, require the same Access interface method (function), which in the dynamic object-oriented class, generally to implement the same interface (interface) to constrain the implementation of the decoration class to have a reference to the decorated class, used in the decoration class of the corresponding method, Invokes the method of the corresponding decorated class, and then modifies it;

Scenario Examples:

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

2>. For example, we have a functional approach under a class that might be used to write logs, it may be used for user login functions, perhaps to get the current operator information before writing to the log, or to write a log when the login succeeds, and the extra action before the log is written, and it is generally a log-writing purpose; It is also the operation information of a login process in general;

Therefore, the decorator pattern is used to realize a scene of similar operation, that is, the extension of the decorator's function object to the decorated person, the essence or the same functional range as the original method;

Instance source code

1. The Decorated person class

Copy Code code as follows:

function Wear () {

}

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

2. Decorator Class

Copy Code code 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 code as follows:

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

This realizes to the Wear wears the shirt this function object The dynamic expansion adornment, you also do not need to know how the original is decorated the method to carry on, as long as knows its function is what can, then knew we want to add to its additional function is what can;

Other Notes

The decorator pattern, which really introduces the object-oriented approach: the principle of the extension opening, the modification of the closure; All desired functional methods are performed without modifying the [decorated class wear] in the extension of the [adorner class decorator];

One of the main characteristics of the decorator pattern is that the decorator's reference to the decorated person is to realize the decoration without modification;

Simulation: first wear a shirt, then wear a tie, and then wear a suit scene: The top of the decorated person is unchanged:

2. Decorator class:

Copy Code code as follows:

function Decorator (wear) {
This.wear = wear;
}
Decorator.prototype.Shirt = function () {
This.wear.Shirt (); Here we only wear shirts;
}

3. Create a similar inheritance decorator wear tie class and wear suit class

Copy Code code as follows:

function Decorator_tie (decorator) {
This.decorator = decorator;
}
Decorator_Tie.prototype.Shirt = function () {
This.decorator.Shirt (); Put on your shirt.
Console.log (' Wear tie again ');
}

function Decorator_western (decorator) {
This.decorator = decorator;
}
Decorator_Western.prototype.Shirt = function () {
This.decorator.Shirt ();
Console.log (' Put on a suit again ');
}

How to use:

Copy Code code as follows:

Put on your shirt first.
var wear = new wear ();
var decorator = new decorator (wear);
Decorator. Shirt ();
and wear a tie.
var tie = new Decorator_tie (decorator);
Tie. Shirt ();
Put on a suit again.
var western = new Decorator_western (tie);
Western. Shirt ();

This is a simulation example of dress decoration;