装饰器模式

什么是装饰者模式

在不改变原对象的基础上，通过对其进行包装扩展（添加属性或方法），使原有对象可以满足用户的更复杂需求，满足开闭原则，也不会破坏现有的操作。

• 装饰器模式是一个对象嵌入到另一个对象中去，实际上相当于这个对象被另一个对象包装起来，形成一条包装链。

• 请求随着这条链依次传递到所有的对象，每个对象都有处理这请求的机会。

简单代码实现

class Coffee {
    make(water) {
        return `${water}+咖啡`;
    }
    cost() {
        return 10;
    }
};

class MilkCoffee {
    constructor(parent) {
        this.parent = parent;
    }
    make(water) {
        return `${this.parent.make(water)}+奶`;
    }
    cost() {
        return this.parent.cost() + 2
    }
}
class SugarCoffee {
    constructor(parent) {
        this.parent = parent;
    }
    make(water) {
        return `${this.parent.make(water) }+糖`;
    }
    cost() {
        return this.parent.cost() + 1
    }
}


let coffee = new Coffee();
let milkCoffee = new MilkCoffee(coffee);
let res = milkCoffee.make('水'); //
let sugarCoffee = new SugarCoffee(milkCoffee);
let res1 = sugarCoffee.make('水');
let cost = sugarCoffee.cost();
console.log(res);
console.log(res1);
console.log(cost);

常用场景

• Core decorators

Core decorators是一个库，提供了几个常见的修饰器，通过它可以更好地理解修饰器。

想理解此库，也可以去看看阮老师的关于此库的介绍。

• React

React广泛运用了高阶组件，这让React组件成为一个函数，并且能包含另一个组件。
使用装饰器是不错的替代法，例如，Redux库有一个connect函数，用于连接React组件和React store。

通常，是这么使用的：

class MyReactComponent extends React.Component {}
 
export default connect(mapStateToProps, mapDispatchToProps)(MyReactComponent);

然而，可以使用装饰器代替：

@connect(mapStateToProps, mapDispatchToProps)
export default class MyReactComponent extends React.Component

以上是对装饰器模式的简单分析，欢迎补充。