“This is the second day of my participation in the Gwen Challenge in November. See details: The Last Gwen Challenge in 2021”

Decorator pattern

Dynamically extending additional functionality to an object, such as adding new functionality before or after the object is called, without affecting the original object’s functionality, is like adding some decoration to the object.

The decoration mode is also called the packaging mode. After an object is wrapped, it can be further wrapped to add new functions to expand the functions of the object. The decoration mode makes the system more flexible, and it follows the object-oriented principle: open to the outside and closed to modification.

Plain JS implements the decorator pattern

var House = {
    style : function() {
        console.log('普通房子')
    }
}
​
var treeDecorator = function (){
    console.log('周围有绿化')
}
​
let style = House.style;
House.style = function() {
    style();
    treeDecorator()
};
​
House.style();
Copy the code

Rewrite the style method, rewrap the original style and treeDecorator, and then assign the style attribute to the House object, adding the functionality of the original style.

Features of typescript-based decorators

Decorators in TypeScript use the form @expression. Expression is evaluated as a function that is called at run time, and the embellished declaration is passed in as an argument.

let template; function checkCar(target, key, descriptor) { console.log('before checking'); template = target; } function CloseCar(target, key, descriptor){ console.log('close car'); template = target; } class CarModel { @checkCar driver() { console.log('moving') } @CloseCar stop() { console.log('stop... ') } } const car = new CarModel(); car.driver();Copy the code

But note that you need to turn on support for decorators,

  • Command line compilation file:

    • tsc --target ES5 --experimentalDecorators demo.ts
Copy the code

  • By adding configuration files

    • {
    "compilerOptions": {
        "target": "ES5",
        "experimentalDecorators": true
    }
}
Copy the code

Use of decorator

  • Adds the @ symbol + method to a class, method, or attribute that needs decoration
  • Multiple decorations are supported, and the order of execution will follow from bottom to top
  • Decorators are supported: class, method, attribute, accessor decorator, parameter decorator
  • If all of the above decorators exist, the order of accessors is property decorator > accessor decorator > method decorator > parameter decorator > class decorator.

advantages

  • More flexible than inheritance, dynamic object extension, plug and play
  • Different effects can be achieved by using different decoration classes and their permutations and combinations
  • Fully comply with the open and closed principle

Application scenarios

  • When you need to add additional responsibilities to an existing class that cannot be extended by subclass generation
  • When you need to create a lot of functionality by permutation and combination of an existing set of basic functions
  • When the functional requirements of an object can be dynamically added or destroyed