1、什么是装饰器模式

简单来讲，装饰器模式就是给对象动态增长功能。git

有一个鸭子对象，它会发声 makeVoice，会睡觉 sleep，可是由于它还过小，不会走路，代码以下：github

const duck =  {
    makeVoice: () => {
        console.log('我会嘎嘎嘎啦')
    },
    sleep: () => {
        console.log('谁又不会睡觉呢')
    },
    init: function () {
        this.makeVoice()
        this.sleep()
    }
}

duck.init()
复制代码

当它 3 个月大的时候，忽然学会走路 walk 了，这个时候，怎么在代码中，为鸭子 duck 添加走路 walk 功能呢？大多数状况下，咱们会选择直接修改鸭子 duck 方法，代码以下：web

const duck =  {
    makeVoice: () => {
        console.log('我会嘎嘎嘎啦')
    },
    sleep: () => {
        console.log('谁又不会睡觉呢')
    },
    walk: () => {
        console.log('哈哈哈，我会走路啦')
    },
    init: function () {
        this.makeVoice()
        this.sleep()
        this.walk()
    }
}

duck.init()
复制代码

快乐的时光老是短暂的，鸭子越长越大，功能也愈来愈多。有一天，你请假出去玩，拜托朋友帮你照顾这只鸭子，不巧，鸭子要下蛋了，朋友须要帮鸭子添加一个下蛋的功能，这就有点麻烦了由于这是他第一次照顾这只鸭子，他担忧若是直接在鸭子内部添加方法会影响到什么。ajax

因而他想到了一个好方法，不直接修改鸭子内部，而是经过一个外部函数，引用这个鸭子，并为外部函数添加下蛋的功能。编程

代码以下：设计模式

const before = function (fn, beforeFn) {
    return function () {
        beforeFn.apply(this, arguments)
        return fn.apply(this, arguments)
    }
}

const after = function (fn, afterFn) {
    return function () {
        const __ = fn.apply(this, arguments)
        afterFn.apply(this, arguments)
        return __
    }
}

const duck =  {
    makeVoice: function () {
        console.log('我会嘎嘎嘎啦')
    },
    sleep: function () {
        console.log('谁又不会睡觉呢')
    },
    walk: function () {
        console.log('哈哈哈，我会走路啦')
    },
    init: function () {
        this.makeVoice()
        this.sleep()
        this.walk()
    }
}

after(duck.init, function egg () {
    console.log('生蛋快乐～')
}).apply(duck)
复制代码

这就是装饰器模式，动态的为鸭子添加功能，而不直接修改鸭子自己。markdown

2、实际场景

1. 数据上报

自定义事件的数据上报通常都依赖于点击事件，那么这个点击事件既要承担本来的功能，又要承担数据上报的功能。app

1.1 普通作法

先上代码：

const loginBtnClick = () => {
    console.log('去登陆'）
    console.log('去上报')
} 
复制代码

好像没毛病，这样的代码中项目中随处可见，逃避(面向过程编程)虽可耻但有用。

1.2 装饰器模式作法

能够经过装饰器模式来重构上述代码，将职责划分更细，代码松耦合，可复用性更高。

const after = function (fn, afterFn) {
    return function () {
        const __ = fn.apply(this, arguments)
        afterFn.apply(this, arguments)
        return __
    }
}

const showLogin = function () {
    console.log('去登陆')
}

const log = function () {
    console.log('去上报')
}

const loginBtnClick = after(showLogin, log)

loginBtnClick()

复制代码

2. 动态增长参数

一个常规的 ajax 请求参数包括 type / url / param，当突发一个特殊状况，须要在 ajax 的参数中，新增一个 token 参数。

2.1 普通作法

先上代码：

const ajax = function (type, url, param) {
    // 新增token参数
    param.token = 'xxx'
    // ...ajax请求...省略
}
复制代码

好了，又一次违反开放-封闭原则，直接修改了 ajax 函数内部.

2.2 装饰器作法

经过装饰器模式，在 ajax 调用以前，为 ajax 增长 token 参数，代码以下：

const before = function (fn, beforeFn) {
    return function () {
        beforeFn.apply(this, arguments)
        return fn.apply(this, arguments)
    }
}

let ajax = function (type, url, param) {
    console.log(arguments)
    // ...ajax请求...省略
}

ajax = before(ajax, function (type, url, param) {
    console.log(param)
    param.token = 'xxx'
})

ajax('type', 'url', {name: 'tj'})
复制代码

这样作能够减小 ajax 函数的职责，提升了 ajax 函数的可复用性，

3、总结

本文经过给鸭子函数动态增长功能、数据上报、动态增长参数 3 个例子，讲述了装饰器模式的应用场景及带给咱们的好处。

装饰器模式，让对象更加稳定，且易于复用。而不稳定的功能，则能够在个性化定制时进行动态添加。

可经过 github源码进行实操练习。

但愿本文能对你有所帮助，感谢阅读❤️～

· 往期精彩 ·

【设计模式-谁没碰见过几个单例模式（一）】

【设计模式-什么是快乐星球，什么是策略模式（二）】

【设计模式-原来这就是代理模式（三）】

【设计模式-简单易懂的观察者模式（四）】

【设计模式-不会吧，不会还有人不知道装饰器模式吧（五）】