设计模式-装饰器模式(五)

一、什么是装饰器模式

简单来说,装饰器模式就是给对象动态增加功能。
有一个鸭子对象,它会发声 makeVoice, 会睡觉 sleep,但是因为它还太小,不会走路,代码如下:

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

当它 3 个月大的时候,突然学会走路 walk 了,这个时候,怎么在代码中,为鸭子 duck 添加走路 walk 功能呢?大多数情况下,我们会选择直接修改鸭子 duck 方法,代码如下:

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

快乐的时光总是短暂的,鸭子越长越大,功能也越来越多。有一天,你请假出去玩,拜托朋友帮你照顾这只鸭子,不巧,鸭子要下蛋了,朋友需要帮鸭子添加一个下蛋的功能,这就有点麻烦了因为这是他第一次照顾这只鸭子,他担心如果直接在鸭子内部添加方法会影响到什么。
于是他想到了一个好方法,不直接修改鸭子内部,而是通过一个外部函数,引用这个鸭子,并为外部函数添加下蛋的功能。
代码如下:

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)

二、实际场景

1. 数据上报

自定义事件的数据上报一般都依赖于点击事件,那么这个点击事件既要承担原本的功能,又要承担数据上报的功能。

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 个例子,讲述了装饰器模式的应用场景及带给我们的好处。
装饰器模式,让对象更加稳定,且易于复用。而不稳定的功能,则可以在个性化定制时进行动态添加。
可通过 github源码 进行实操练习。

作者:清汤饺子
链接:https://juejin.cn/post/6971822540452790279
来源:掘金
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

THE END
分享
二维码
打赏
< <上一篇
下一篇>>