The decorator mode of JavaScript

Decorator Mode description

Description: A class to dynamically modify the function object of another class before or after the modification, give it some additional functions; This is the decoration of a class object function, decorated class with the decorated class, requires the same Access interface method (function), which in the dynamic object-oriented class, generally to implement the same interface (interface) to constrain the implementation; The adornment class must have a reference to the decorated class, Used in the corresponding method of decoration class, call the corresponding decorated class method, and then modify it;

Examples of scenarios:

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

2>. For example, we have a class of functional methods, may be used to write logs, may be used for user login such functions, perhaps before writing to the log need to obtain the current operator information, or log on successfully, write a log, the additional operations before writing to the log, it is generally also a log for the purpose; It is also the operation information of a login process in general;

Therefore, the decorator pattern is used to implement a scene of similar operation, which is the extension of the decorator's function object, and the same function range as the original method;

Example Source

1. The Decorated person class

= Console.log (' Put on Shirts ');}

2. Decorator Class

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

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

This enables the dynamic expansion of the Wear wearing a shirt, you do not need to know how the original decoration method is done, as long as you know what its function is, and then know what we want to add to the additional function is what it can be;

Other Notes

Decorator mode, the real mention of the object-oriented approach: open to the extension, the principle of modification closure; All desired functional methods are not modified [decorated class wear] in the case of extending [Decorator this class decorator];

One of the main features of the decorator mode is that the decorator's reference to the decorator is used to achieve the decoration without modification.

Under simulation: First wear a shirt, then wear a tie, and then wear a suit of the scene: The above is not changed by the decorator:

2. Decorator class:

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

3. Create a type of wear tie similar to inheriting Decorator subclass and wear a suit

function Decorator_tie (Decorator) {this.decorator = Decorator;} Decorator_Tie.prototype.Shirt = function () {this.decorator.Shirt ();//Put on a shirt console.log (' wear a tie ');} 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:

First put on the shirt var wear = new Wear (), var decorator = new decorator (wear);//decorator. Shirt ();//wear a tie again var tie = new Decorator_tie (Decorator);//tie. Shirt ();//wear the suit again var western = new Decorator_western (tie); Western. Shirt ();

This is a mock example of dress decoration;

The decorator mode of JavaScript