Shulou(Shulou.com)06/01 Report--

This article mainly explains "how to apply Decorator decorator mode". Friends who are interested may wish to have a look. The method introduced in this paper is simple, fast and practical. Let's let the editor take you to learn how to use Decorator decorator mode.

Decorator (decorator mode)

Decorator (decorator pattern) belongs to structural pattern, which is a design pattern that extends the additional functions of objects, alias wrapper.

Intention: dynamically add some additional responsibilities to an object. In terms of added functionality, the Decorator pattern is more flexible than generating subclasses.

As an example

If you do not understand the above intention introduction, it does not matter, the design pattern needs to be used in daily work, combined with examples can deepen your understanding, below I have prepared three examples to let you experience in what scenarios this design pattern will be used.

Photo frame

Photo + frame = photo with frame, behind this is a kind of decorator mode: the photo has the function of viewing, the frame has the function of decoration, and on the basis of looking at the photo, you can also see the well-designed frame, which increases the beauty. At the same time, the frame can also increase the preservation time and security of photos.

Photo frame and photo is a combination relationship, any photo can be placed in the frame, rather than each photo to generate a specific frame, obviously, the combination of the way is more flexible.

File read and write with cache

Suppose we have a class FileIO that reads and writes files, but does not have the ability to cache. Is it better to create a new CachedFileIO subclass or to create a CachedIO?

At first glance, it seems that CachedFileIO is more convenient to use, and the use of CachedIO is new CachedIO (new FileIO ()) is a little more troublesome, but what if we add a network read-write class NetworkIO, a database read-write class DBIO?

Obviously, inheritance will lead to rapid expansion of the number of subclasses, while the combination is very flexible. To generate a network reader that supports caching, you only need new CachedIO (new NetworkIO ()). This is where the combination is flexible.

Of course, to achieve this capability, CachedIO needs to inherit from the same class and have the same interface as FileIO, CachedFileIO, and CachedIO.

Build the platform component wrapper

Decorator pattern alias also known as wrapper,wrapper is also often encountered in front-end building scenarios. When building a platform to load a component, you want to expand its basic capabilities and generally use wrapper layer to nest components. Wrapper layer is to enhance third-party components on the basis of not changing API.

Intention interpretation

Intention: dynamically add some additional responsibilities to an object. In terms of added functionality, the Decorator pattern is more flexible than generating subclasses.

Unlike inheritance, composition can be done at run time, so it is called "dynamic addition", where "additional responsibilities" refer to all functions, such as printing some log logs when the button is clicked, drawing an extra scroll bar and border when drawing text text boxes, and so on.

The sentence "Decorator pattern is more flexible than generating subclasses in terms of added functionality" means that combination is more flexible than inheritance. When there are many expandable functions, inheritance schemes produce a large number of subclasses, while combinations can write processing functions in advance and dynamically construct them when needed, which is obviously more flexible.

Structure diagram

ConcreteComponent refers to the components that need to be decorated. As you can see, the decorator Decorator inherits the same class as him, which ensures that API is consistent and that no matter how many layers are decorated, it always conforms to the Component type.

If there are multiple decorators, you should declare Decorator as an abstract class, and ConcreteDecoratorA and ConcreteDecoratorB implement them respectively. If there is only one decorator, it can be reduced to an implementation of Decorator itself.

Code example

The following example is written in typescript.

Class Component {

/ / has a click event

Public onClick = () = > {}

}

Class Decorator extends Component {

Private _ component

Constructor (component) {

This._component = component

}

Public onClick = () = > {

Log ('manage')

This._component.onClick ()

}

}

Const component = new Component ()

/ / A normal click

Component.onClick ()

Const wrapperComponent = new Decorator (component)

/ / A click with management function

WrapperComponent.onClick ()

In fact, the method is very simple, through the combination, we get a more powerful component, and the way to implement is to use the constructor to save the component instance, and when copying the function, add some enhanced implementation.

Malpractice

The problem of decorators is also a problem of combination, and too many combinations can lead to:

The complexity of the composition process requires too many objects to be generated.

The increase in the level of wrappers increases the cost of debugging, and it is more difficult to trace back to the layer at which a bug is wrapped.

At this point, I believe that everyone on the "Decorator decorator mode how to apply" have a deeper understanding, might as well to practical operation of it! Here is the website, more related content can enter the relevant channels to inquire, follow us, continue to learn!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.