Detailed explanation of the usage of JavaScript decorator mode

What is the decorator mode

Decorator Pattern is a structural design pattern that allows dynamically adding new behavior to an object. Enhance the function of the object by wrapping the object in a decorator without changing the object itself. The core of this pattern is to use a decorator class to wrap a decorated class, so that the decorator class can dynamically add new functions or modify existing functions.

The main purpose of the decorator mode is to add new functions to a raw object or modify existing functions, while keeping the interface of the original object unchanged, and functions can be dynamically added or deleted at runtime.。

Why have a decorator mode

During the development process, we often need to extend the functionality of a class or object, but directly modifying the class or object may lead to reduced code complexity and maintainability. The decorator pattern provides an elegant way to extend the functionality of a class or object without modifying a basic object or class. It makes the code more modular, easy to maintain and expand.

Decorator mode application scenario

The JS decorator pattern is usually used in the following scenarios:

• Add the function of an object to an existing object without affecting the interface of the original object.
• Implement AOP (System-oriented Programming) and share code among multiple components.
• Functions are implemented through runtime combinations, not inheritance.

Give a chestnut

Let’s give two examples to understand more concretely what the decorator pattern is:

Add a leather seat to the car

class Car {
  constructor() {
     = 10000;
     = '100 km/h';
  }

  getPrice() {
    return ;
  }

  getSpeed() {
    return ;
  }
}

// Car decoratorclass CarDecorator {
  constructor(car) {
     = car;
  }

  getPrice() {
    return ();
  }

  getSpeed() {
    return ();
  }
}

// Leather seat decoratorclass LeatherSeatsDecorator extends CarDecorator {
  constructor(car) {
    super(car);
     = 1000;
     = 'Leather seats';
  }

  getPrice() {
    return () + ;
  }

  getDescription() {
    return () + ', ' + ;
  }
}

let car = new Car();
(()); // 10000

// Cars with leather seatslet carWithLeatherSeats = new LeatherSeatsDecorator(car);
(()); // 11000
(()); // undefined, Leather seats

In the above code, we define a Car class as the original object and a CarDecorator class as the decorator class. We then define a LeatherSeatsDecorator class, which inherits from the CarDecorator class, to add the functions of leather seats.

A simple data cache

class DataService {
  fetchData() {
    ("Fetching data from server...");
    return [1, 2, 3];
  }
}

class DataCacheDecorator {
  constructor(dataService) {
     = dataService;
     = null;
  }

  fetchData() {
    if ( === null) {
      ("Cache not exist...");
       = ();
    } else {
      ("Data retrieved from cache");
    }
    return ;
  }
}

let dataService = new DataService();
dataService = new DataCacheDecorator(dataService);

(());
(());

The above code will have the following output:

Cache not exist...
Fetching data from server...
[1, 2, 3]
Data retrieved from cache
[1, 2, 3]

Summarize

The JS decorator pattern provides an elegant way to extend the functionality of a class or object without modifying a basic object or class. It makes the code more modular, easy to maintain and expand. When appropriate, using the decorator pattern can improve the readability and maintainability of the code.

In order to better understand the decorator mode, this article selects 2 simple and easy-to-understand examples. In real scenarios, the application of JS decorator mode is much more complex. Currently, JS decorators have been widely used in ES6, TypeScript, React, Express, Koa, Mobx, Redux and other scenarios. In the future, the article will introduce the above scenarios in detail.

This is the end of this article about the detailed explanation of JavaScript decorator mode. For more related content on JavaScript decorator mode, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!