Deep understanding of the JavaScript series (29): detailed description of the decorator mode in the design mode _ javascript skills

This article mainly introduces a deep understanding of the JavaScript series (29): detailed description of the decorator pattern of the design pattern. the decorator uses the object for packaging the same interface, not only allowing you to add behavior to the method, you can also set the method to the original object call (for example, the constructor's constructor). For more information, see Introduction

Decorators provide more flexible alternatives than inheritance. The modifier is used to wrap objects of the same interface. it not only allows you to add behavior to the method, but also allows you to set the method to the original object call (such as the constructor of the modifier ).

The modifier is used to add new features in the form of a reload method. In this mode, you can add your own actions before or after the decorator to achieve a specific purpose.

Body

So what are the advantages of the decorator model? As mentioned above, the modifier is an alternative to inheritance. When the script is run, adding behavior to the subclass will affect all instances of the original class, but the modifier will not. Instead, it can add new behaviors to different objects. The following code is used:

The code is as follows:

// The Class (function) to be decorated)
Function Macbook (){
This. cost = function (){
Return 1000;
};
}

Function Memory (macbook ){
This. cost = function (){
Return macbook. cost () + 75;
};
}

Function BlurayDrive (macbook ){
This. cost = function (){
Return IoV. cost () + 300;
};
}

Function Insurance (macbook ){
This. cost = function (){
Return IoV. cost () + 250;
};
}

// Usage
Var myMacbook = new Insurance (new BlurayDrive (new Memory (new Macbook ())));
Console. log (myMacbook. cost ());

The following is another example. when we call javasmtask on the modifier object, it not only has the actions of the modifier, but also calls the javasmtask function of the lower-level object.

The code is as follows:

Function ConcreteClass (){
This. required mtask = function (){
This. preTask ();
Console. log ('doing something ');
This. postTask ();
};
}

Function AbstractDecorator (decorated ){
This. required mtask = function (){
Decorated. receivmtask ();
};
}

Function ConcreteDecoratorClass (decorated ){
This. base = AbstractDecorator;
This. base (decorated );

Decorated. preTask = function (){
Console. log ('pre-calling ..');
};

Decorated. postTask = function (){
Console. log ('post-calling ..');
};

}

Var concrete = new ConcreteClass ();
Var decorator1 = new ConcreteDecoratorClass (concrete );
Var decorator2 = new ConcreteDecoratorClass (decorator1 );
Decorator2.20.mtask ();

Here is a thorough example:

The code is as follows:

Var tree = {};
Tree. decorate = function (){
Console. log ('make sure the tree won \'t fall ');
};

Tree. getDecorator = function (deco ){
Tree [deco]. prototype = this;
Return new tree [deco];
};

Tree. redbballs = function (){
This. decorate = function (){
This. redbils. prototype. decorate (); // Step 3: First execute the decorate method of the prototype (this is Angel ).
Console. log ('put on some red bars'); // output the red
// Use the two steps as the decorate method of redbballs
}
};

Tree. bluebils = function (){
This. decorate = function (){
This. bluebils. prototype. decorate (); // Step 2: First Run The decorate method of the prototype, that is, tree. decorate ()
Console. log ('add blue ball'); // output blue in step 1
// Use the two steps as the decorate method of bluebils
}
};

Tree. Angel = function (){
This. decorate = function (){
This. Angel. prototype. decorate (); // Step 1: First execute the decorate method of the prototype (bluebils at this time ).
Console. log ('An angel on the top'); // output angel in step 3.
// Use the two steps as the decorate method of Angel
}
};

Tree = tree. getDecorator ('blueball'); // Step 4: assign the blueballs' object to the tree. at this time, the getDecorator in the parent prototype is still available.
Tree = tree. getDecorator ('angel'); // Step 3: assign the Angel object to the tree. getDecorator in the parent prototype of the parent prototype is still available.
Tree = tree. getDecorator ('redball'); // Step 4: assign the redballs' object to the tree

Tree. decorate (); // Step 4: execute the decorate method of the redbils object

Summary

The modifier mode dynamically adds more functions to existing functions. each function to be decorated is placed in a separate function, then, use this function to wrap the existing function objects to be decorated. Therefore, when special behavior is required, you can use the decoration function to wrap objects selectively and sequentially as needed. The advantage is that the core responsibilities of classes (functions) are separated from the functional area.