Adding a Decorator Pattern in JavaScript to existing code

I've implemented a Decorator Pattern in order to decorate the generated controls that are created using a Factory class. You can check my previous post on how I implemented a Factory Pattern in JavaScript.

I'm integrating a decorator pattern into the existing DomFactory class for enhancing the styles of the controls, by creating a separate decorator function or class that modifies the elements created by the factory class. By definition, the decorator pattern is a structural design pattern that allows behavior to be added to individual objects, either statically or dynamically, without affecting the behavior of other objects from the same class.

function DomFactory() { // ... existing methods ... // Enhance the style of a control element this.enhanceStyle = (element, styleProps) => { for (const [key, value] of Object.entries(styleProps)) { element.style[key] = value; } } } // Decorator function to apply custom styles function styleDecorator(control, styleProps) { control.enhanceStyle(control.checkbox, styleProps.checkbox); control.enhanceStyle(control.labelElement, styleProps.label); } // Usage const factory = new DomFactory(); const control = factory.createCheckbox('example', { label: 'Example' }, true); // Define custom styles const customStyles = { checkbox: { margin: '10px', // Other CSS properties }, label: { color: 'blue', // Other CSS properties } }; // Apply styles using the decorator styleDecorator(control, customStyles); 

As mentioned in the previous post, using a decorator along with a factory helps to follow 3 out of the 5 SOLID design principles:

• by decoupling the code to instantiate classes from the code to add details/styles(decorate) we make sure each class has a single responsibility, or a single reason to change. This is called single responsibility principle. You can also consider a way of decouple presentation from data structure.
• Open-closed principle allows us to add new styles without changing the main code for creating objects.
• not directly but it allows easier extending functionality by being able to inject new styles by adding new decorator classes. By using the dependency inversion principle we can rely on a form of an abstract decorator and based on the context we can pass different concrete decorators.