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

This article introduces you how to use Decorator Pattern, the content is very detailed, interested friends can refer to, hope to be helpful to you.

The purpose of the decorator pattern (Decorator Pattern) is simple:

Add logic without modifying the original code.

This sentence may sound contradictory, since it is necessary to add logic, how can we not modify the original code? But the open and closed principle of SOLID (five important principles for object design) is trying to solve this problem, its content is not to change the core logic that has been written, but it can expand the new logic, that is, open to extension and closed to modification.

For example, if the requirement of the product is to implement a function that specifically outputs text in the browser's console, you might do this:

Class Printer {print (text) {console.log (text);}} const printer = new Printer (); printer.print ('something'); / / something

When you looked at your results with satisfaction, the product came over and said, "I don't think the color is prominent enough. I'd better change it to yellow."

It's a piece of cake! After you confidently open Baidu and change the code to look like this:

Class Printer {print (text) {console.log (`% c ${text}`, 'color: yellow;');}}

But the product looked and said: "this font is a little too small, a little bigger, it is better to be high-end atmospheric class."

"all right. no, no, no." You forcibly control your impulse to hold a knife, while figuring out how big the font is high-end, while modifying the print code:

Class Printer {print (text) {console.log (`% c ${text}`, 'color: yellow;font-size: 36pxbot');}}

After correcting you this time, your heart is already full of mmp, and secretly put a label on the product:

You stare at the monitor until the computer goes into hibernation mode, and your bitter face is reflected on the screen, thinking about the messy print method, and don't know how to cope with the never-ending demand.

In the above example, the original Printer writes out the logic it should have as required, which is to output some text in the console. In other words, when you finish writing the logic of "output some text on the console," you can end the Printer, because it is the whole logic of Printer. So how to change the logic of font or color in this case?

It's time for you to need decorator mode.

Decorator Pattern (decorator mode)

First modify the original Printer so that it can support extended styles:

Class Printer {print (text ='', style =') {console.log (`% c ${text}`, style);}}

Then create decorators that change the font and color respectively:

Const bigSizeStyle = (printer) = > ({... printer, print: (text ='', style ='') = > {printer.print (text, `${style} font-size: 36px;`);}})

YellowStyle, boldStyle and bigSizeStyle in the code are decorators for the print method respectively, they all receive printer and copy out the same object based on printer and return, while the difference between the returned printer and the original is that the respective Decorator will add their respective decorative logic (such as changing font, color or font size) to printer's print method and then call printer's print.

The mode of use is as follows:

As long as all the decorative logic is extracted, you can freely match what style you want to output when, and add another italic style, and you only need to add a new decorator, without changing the original print logic.

However, it is important to note that the above code simply deconstructs and copies Object. If there is a method on prototype, there may be errors, so if you want to deeply copy a new object, you need to write additional logic:

Const copyObj = (originObj) = > {const originPrototype = Object.getPrototypeOf (originObj); let newObj = Object.create (originPrototype); const originObjOwnProperties = Object.getOwnPropertyNames (originObj); originObjOwnProperties.forEach ((property) = > {const prototypeDesc = Object.getOwnPropertyDescriptor (originObj, property); Object.defineProperty (newObj, property, prototypeDesc);}); return newObj;}

Then change the copyObj in the above code in the decorator to copy the same object correctly:

Const yellowStyle = (printer) = > {const decorator = copyObj (printer); decorator.print = (text ='', style ='') = > {printer.print (text, `${style} color: yellow;`);}; return decorator;}; other cases

Because the language we use is JavaScript, we don't use classes, but simply decorate a method, such as the following publishArticle used to publish articles:

Const publishArticle = () = > {console.log ('publish articles');}

What if you want to post a post on a platform such as Weibo or Qzone? Is it like the following code?

Const publishArticle = () = > {console.log ('post articles'); console.log ('post Weibo dynamic'); console.log ('post Qzone dynamic');}

This is obviously not good! publishArticle should only need to publish the logic of the article! And if there are more and more third-party service platforms after that, publishArticle will be stuck with logic all the time, and you can't do it again after you understand the decorator mode!

So put this requirement on the decorator:

Const publishArticle = () = > {console.log ('post article');}; const publishWeibo = (publish) = > (... args) = > {publish (args); console.log ('post Weibo dynamic');}; const publishQzone = (publish) = > (... args) = > {publish (args); console.log ('post Qzone dynamic');}; const publishArticleAndWeiboAndQzone = publishWeibo (publishQzone (publishArticle))

The previous example of Printer is to copy an object and return it, but if it's a method, you don't have to copy it, just make sure that each decorator returns a new method, and then execute the decorated method.

The decorator pattern is a very useful design pattern, and it is often used in projects. When the requirements change, you feel that some logic is redundant, so you don't need to decorate it directly, and you don't need to modify the code that implements the logic. Each decorator does its own thing and does not interfere with other decorators.

About how to use Decorator Pattern to share here, I hope the above content can be of some help to you, can learn more knowledge. If you think the article is good, you can share it for more people to see.

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.