According to the law of thermodynamic entropy increase, things always spontaneously towards the direction of more chaos (disorder), specific to the project’s code, as business iteration, the entire project will more and more complex and chaos, to make the code entropy increase is relatively slow, need human intervention control – reconstruction, this time need a little bit of design patterns. If you want a feature to have additional plug-and-play functionality without affecting its original functionality, you should understand the decorator pattern.

The decorator pattern, as the name suggests, is to decorate the original content. The core nature of the pattern has not changed. In more popular terms, it has been wrapped, but once wrapped, it can have an additional capability without changing the original function. To use an analogy, the tortoise 🐢 wears the dragon robe, 🐢 or 🐢, does not become a dragon, but it may have the identity of the dragon prince, right?

A good example of the decorative pattern is in real life: non-skid tires

In essence, the tire is still a tire, just set on the anti-skid chain, the tire can be in the form of snow on the road, prevent skidding;

function Wheel() {}

Wheel.prototype.walking = function() {
    console.log('wheels walk on the road! ');
}
Copy the code

Tires can normally drive on ordinary roads, but on snowy roads, they will slip. Now there are two ways, one is to use tires specially driven on snow

function SnowWheel() {}

SnowWheel.prototype.walking = function() {
    console.log('wheels walk on the snowy road! ');
}
Copy the code

After all, most of the scenes of an ordinary family car are driving on normal roads, so it is always a bit troublesome to change snow tires. At this time, the anti-skid chain comes in great use.

function SnowWheelDecorator(wheel) {
    this.wheel = wheel;   / / 1
}
SnowWheelDecorator.prototype.walking = function() {
    this.wheel.walking(); / / 2
    console.log('wheels walk on the snowy road! '); / / 3
}
Copy the code

A SnowWheelDecorator is a chain, or tire decorator, that allows you to drive on snow without slipping. 1 wheel is still the same wheel, 2 wheels can still drive normally on the road, 3 but the wheels have increased the function of driving on snow;

var wheel = new Wheel();
wheel = new SnowWheelDecorator(wheel);
wheel.walking();
// wheels walk on the road!
// wheels walk on the snowy road!
Copy the code

Of course, it can also be simplified as follows:

var wheel = {
    walk() {
        console.log('wheels walk on the road! '); }}function snowWheelDecorator() {
    console.log('wheels walk on the snowy road! ');
}

var walking = wheel.walking;
wheel.walking = function() {
    walking();
    snowWheelDecorator();
}
Copy the code

In the end:

var originFun1 = originFun; / / 1
originFun = function() {
    originFun1();  / / 2
    decorator();  //  3
}
Copy the code

Here is a simple model of the decoration pattern, which extends the new functionality on the basis of the original functionality

1 is the original function. 2 is the use of the original function. 3 is the addition of new functions

In this way, the function can be dynamically extended without changing the original structure.