Introduction to the modifier pattern in JavaScript design patterns _ javascript skills

Source: Internet
Author: User
This article mainly introduces the decorator mode of the JavaScript design mode. one class is used to dynamically modify the functional objects of the other class before or after, add some additional functions to it. this is the decoration of a class object function. the decoration class and the decorated class must have the same access interface method (function ), for more information, see Decorator mode description

Note: one class is used to modify the functional objects of another class dynamically before or after it is added with some additional functions. this is the decoration of the functions of a class object, the decorated class and the decorated class must have the same access interface method (function), which is generally used to implement the same interface in the dynamic object-oriented class) to constrain the implementation. the decoration class must have references to the decoration class, which is used to call the corresponding method of the decoration class, and then modify it;

Scenario example:

1>. for example, we wear clothes, a shirt, a suit, a pair of trousers, a tie, and a pair of beautiful leather shoes in our daily life. every time we wear one more, the decoration of the front or whole body;

2>. for example, we have a functional method under the class, which may be used to write logs, and may be used for user login. maybe the current operator information needs to be obtained before writing logs, or after logging on successfully, write a log; the additional operations before writing the log, it is also a log writing purpose in general; after successful login, the log is also an operation information of the login process;

Therefore, the decorator mode is used for implementation. a scenario similar to the two is that the decorator expands the functional objects of the decorator. in essence, the function scope of the decorator is the same as that of the original method;

Instance source code

1. decorated by class


The code is as follows:


Function Wear (){

}

Wear. prototype. Shirt = function (){
// Wear a shirt
Console. log ('wear your shirt ');
}

2. decorators

The code is as follows:


Function Decorator (wear ){
This. wear = wear;
}

Decorator. prototype. Shirt = function (){
This. wear. Shirt ();
// After wearing a shirt, I add a tie.
}

3. usage

The code is as follows:


Var wear = new Wear ();
Var decorator = new Decorator (wear );
Decorator. Shirt ();

In this way, the dynamic expansion and decoration of Wear's functional objects are realized. you do not have to know how the original decoration method is implemented, as long as you know what its function is, then we can know what additional features we want to add to it;

Other instructions

In the modifier mode, the following object-oriented methods are introduced: Open to extensions, and disabled to modifications; all functional methods are required, it is implemented without modifying the [decorated Wear] and extending the [Decorator class;

One of the main characteristics of the decorator mode is that the decorator references the decorator to realize the non-modification decoration of the decorator;

Simulation: First wear a shirt, then wear a tie, then wear a suit scene: The above is not changed:

2. decorators:

The code is as follows:


Function Decorator (wear ){
This. wear = wear;
}
Decorator. prototype. Shirt = function (){
This. wear. Shirt (); // Shirt only here;
}

3. create a tie and suit that inherit the Decorator subclass.


The code is as follows:


Function Decorator_Tie (decorator ){
This. decorator = decorator;
}
Decorator_Tie.prototype.Shirt = function (){
This. decorator. Shirt (); // wear a Shirt
Console. log ('wear a tie later ');
}

Function Decorator_Western (decorator ){
This. decorator = decorator;
}
Decorator_pai.prototype.shirt = function (){
This. decorator. Shirt ();
Console. log ('wear a suit again ');
}

Usage:


The code is as follows:


// Wear a shirt first
Var wear = new Wear ();
Var decorator = new Decorator (wear );
// Decorator. Shirt ();
// Wear a tie again
Var tie = new Decorator_Tie (decorator );
// Tie. Shirt ();
// Wear a suit again
Var western = new Decorator_Western (tie );
Western. Shirt ();

This is a simulated example of clothing decoration;

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.