09. decorator mode in Javascript Design Mode

 

09. decorator mode of the Javascript design mode ---- decorator

First of all, I am very sorry to say that I spent two hours sorting out the notes about the decorator mode. Because of an unpredictable failure, after the adoc document is uploaded to the server, the file is damaged.
Files are not backed up. Does my note contain words prohibited by law? Absolutely not. Forget it. I 'd like to repeat it. This is depressing.

This article will introduce the decorator mode in the Javascript design mode based on my learning and understanding of the modifier mode during this time. My understanding is very limited, so the document will not be fully described. Please be prepared.

Decorator pattern Concept

The decorator mode dynamically attaches duties to an object so that the object has some features that it did not originally have. It is different from class inheritance, because in terms of function expansion, the decorator mode provides a more flexible alternative than class inheritance, and does not affect the application of this object in other fields or modules.

Some netizens gave a summary of the decoration device. I think it is very good, so I have extracted the following:

The decorator involves four terms. 1. interfaces or abstract base classes. 2. objects to be decorated, that is, a simple implementation of the interface or abstract base class mentioned in 1. 3. decoration object, it is to decorate the object of the decorated object. 4. inherit the subclass of the decorated object class, that is, the specific ornament class.

Decorator mode Example 1

var IDecorator = new Interface("IDecorator",["sayHello"]);

Second Term

var DecoratorImpl = function(){};implements(DecoratorImpl,IDecorator);DecoratorImpl.prototype.sayHello = function(){    alert("Hello...");};

Third Term

The real decorator starts here. It is also the parent class of all the decorator to be implemented.

VaR decorator = function (decorator) {// declare an object to be decorated. The parameter obtains this from the constructor. decorator = decorator;}; implements (decorator, idecorator); // only call the decorator method of the decorator object in the base class decorator. prototype. sayhello = function () {// note the code here this. decorator. sayhello ();};

Next, let's explain the base class of the decorator. In each decorator mode, the structure of this class remains unchanged.
In other words, this is the smallest class in the third class of the decorator. These elements must be defined above.

Fourth term

The real decoration is here, please pay attention!

VaR simpledecorator = function (decorator) {// call the constructor of the parent class this. superclass. prototype. constructor. call (this, decorator) ;}; // The first line class inherits (simpledecorator, decorator); // simpledecorator is decorated below. prototype. sayhello = function () {// Add the saychina method this to the original method. saychina (); // call the sayhello this of the parent class. superclass. prototype. sayhello. call (this); // Add the sayworld method this to the original method. sayworld () ;}; // defines the methods simpledecorator added later. prototype. SA Ychina = function () {alert ("China,") ;}; simpledecorator. Prototype. sayworld = function () {alert ("world! ");};

Start testing boldly

VaR testdecorator = function () {// do not use the decorator this. unusedecorator = function (decorator) {decorator. sayhello (); // print here: Hello}; // use the decorator this. usedecorator = function (decorator) {var simpledecorator = new simpledecorator (decorator); simpledecorator. sayhello (); // print China, hello World! };};

Don't be surprised. The decorator is so powerful that it has changed the original method.

Summary

Let's talk about his application scenarios:

1. the decorator mode is mainly used to describe interface methods for external calls. If an interface method is provided only for internal calls, this mode cannot be used. 2. The main decoration mode is the interface method that may be changed. If some behavior in the class may change in the future, and you are too lazy to change the original class, then you can consider using the decorator mode.

OK, let's talk about it first, and then continue...