First, what is the decorator mode

The way you assign responsibilities to objects dynamically is called the decorator pattern. This pattern can dynamically add responsibilities to an object during program execution without changing the object itself. Decorator is a lighter and more flexible approach than inheritance, it’s a “pay-as-you-go” approach.

Official definition from JavaScript Design Patterns and Development Practices.

We can simply understand it as: decorator mode is that, on the basis of not changing the original object, the original object can meet the diverse and complex needs of users by expanding its packaging and flexibly assembling and matching.

Why is decorator mode needed

In our daily business development, we often meet product managers to change the requirements and add additional functions. If the logical implementation of all functions is stacked in a single function, the logic needs to be changed globally for each small requirement change. This is certainly not a good idea. Therefore, we can write the code of the main function into the main function, the additional function is separate into a separate function, the product changes the additional function requirements, we only need to change the additional single function. The idea is decorator mode, which not only reduces maintenance costs, but also improves efficiency.

Third, practice application deepen understanding decorator pattern

3.1 JavaScript uses decorator mode

We use decorator mode to realize the function of clicking the button to pop up the popup window of “you are not logged in yet”, change the button text to “go to log in now” and turn the button gray. The specific code is as follows:

<! DOCTYPE HTML > < HTML lang="en"> <head> <meta charset="UTF-8"> <title> </title> </head> <style> #modal {height: 200px; width: 200px; line-height: 200px; position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%); border: 1px solid black; text-align: center; </style> <body> <button id='open'>Copy the code

JavaScript logic implementation:

Const Modal = (function() {let Modal = null return function() {if(! Modal) {modal = document.createElement('div') modal.innerHTML = 'You are not logged in ~' modal.id = 'modal' modal.style.display = 'none' document. The body. The appendChild (modal)} return modal}}) () / / will show the modal logic alone packaging function openModal () {const modal = New Modal() modal.style.display = 'block'} // Button text change logic function changeButtonText() {const BTN = Document.getelementbyid ('open') btn.innerText = 'go to login'} function disableButton() {const BTN = document.getElementById('open') btn.setAttribute("disabled", Function changeButtonStatus() {changeButtonText() disableButton()} document.getElementById('open').addEventListener('click', function() { openModal() changeButtonStatus() })Copy the code

The above code implementation, the function function split, followed the principle of “single responsibility”, enhance the code scalability and maintainability.

3.2 ES7 decorators

ES7 uses @syntactic sugar to easily decorate a class, making assembly more flexible and convenient. Use the following code:

// decorator function, Its first argument is the target class function classDecorator(target) {target.hasdecorator = true return target} // "installs" the decorator on the Button class Console. log(' The Button is decorated: ', button.hasdecorator) // Output: Whether the Button is decorated: trueCopy the code

From the above code execution, the Button is decorated with a classDecorator function whose target points to the Button.

Four,

Decorator pattern is commonly used in code development, and its core idea is “add, don’t modify”. This design pattern is beloved by developers, where the old logic remains largely unchanged by focusing on the new functional modules they expand. In this way, developers will not have to bear the burden

This article is part of the “Gold Nuggets For Free!” Event, click to view details of the event