JavaScript-- decorator pattern

Today began a systematic plan to study design patterns, although there seen before, "Westward design mode" but it can not stop writing study notes lead to a lot of content and not just a concept to apply. This time to note down the process of learning. Next, enter the topic.

What is a design pattern? Design patterns ( Design pattern) represents a best practice, commonly used by experienced object-oriented software developers. Design patterns are solutions to common problems faced by software developers in the software development process. These solutions are numerous software developers through trial and error for a long period of time summed up.

Today is the decorator learning mode, which is a structural model, it has nothing to do with the creation of objects, mainly on account of how to expand the function of the object. Apart from the use of linear inheritance, can also be used to create a number of decorative objects to extend its functionality, when we are faced with different needs, we can use this mode, choose their own decorators Different order execution method .

Next we give an example, say a decorated Christmas tree , first of all to have a Christmas tree

 1 var tree={}; 

After Christmas we'll decorate it with the next action to achieve decorative

tree.decorate=function(){
                console.log('this is a tree');
            }

With the action, but not yet decorative objects (decorator) Next, create a few decorations belong to the Christmas tree

            tree.BlueBalls=function(){
                this.decorate=function(){
                    this.BlueBalls.prototype.decorate();
                    console.log('BlueBalls')
                }
            }
            tree.Angel=function(){
                this.decorate=function(){
                    this.Angel.prototype.decorate();
                    console.log('Angel')
                }
            }
            tree.RedBalls=function(){
                this.decorate=function(){
                    this.RedBalls.prototype.decorate();
                    console.log('RedBalls')
                }
            }

We now have a Christmas tree, decorated Christmas tree operation, decorated Christmas tree decorations, is not enough, you also need a method of obtaining decorations

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

All things are ready to decorate the Christmas tree

  tree=tree.getDecorator('BlueBalls');
            tree=tree.getDecorator('Angel');
            tree=tree.getDecorator('RedBalls');
            tree.decorate();
            console.log('tree',tree)

Executing the above statement printed in the console you can see the following text

 

 If the statement is replaced by the following decorative order it

 

 

 From the figure the order of execution of the statement is not a different order, a different method derived.

Summary: decorator pattern requires four steps decorated by ornaments, decorated movement, acquisition operation ornament,

Look in the code difficult to find decorations also decorate method, but this method is performed after the method is executed decorations, but also inherited the decorations. Obtaining decorations method is actually a method to decorate ornaments decorate method to be superimposed on the decorations. Make between becoming a method inheritance.

Because of curiosity I will ree objects are printed out, come getDecorator () use a few times there will inherit inheritance. The following are examples of source code.

<script type="text/javascript">
            var  tree={};
            tree.decorate=function(){
                console.log('this is a tree');
            }
            tree.getDecorator=function(deco){
                this[deco].prototype=this;
                return new tree[deco];
            }
            tree.BlueBalls=function(){
                this.decorate=function(){
                    this.BlueBalls.prototype.decorate();
                    console.log('BlueBalls')
                }
            }
            tree.Angel=function(){
                this.decorate=function(){
                    this.Angel.prototype.decorate();
                    console.log('Angel')
                }
            }
            tree.RedBalls=function(){
                this.decorate=function(){
                    this.RedBalls.prototype.decorate();
                    console.log('RedBalls')
                }
            }
            
            tree=tree.getDecorator('BlueBalls');
            tree=tree.getDecorator('Angel');
            tree=tree.getDecorator('RedBalls');
            tree.decorate();
            console.log('tree',tree)
            
        </script>