最新公告
  • 欢迎您光临起源地模板网,本站秉承服务宗旨 履行“站长”责任,销售只是起点 服务永无止境!立即加入钻石VIP
  • 设计模式-不会吧,不会还有人不知道装饰器模式吧(五)

    正文概述 掘金(清汤饺子)   2021-06-10   498

    这是我参与更文挑战的第3天,活动详情查看: 更文挑战

    一、什么是装饰器模式

    简单来说,装饰器模式就是给对象动态增加功能。

    有一个鸭子对象,它会发声 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源码 进行实操练习。

    希望本文能对你有所帮助,感谢阅读❤️~


    · 往期精彩 ·

    【设计模式-谁没遇见过几个单例模式(一)】

    【设计模式-什么是快乐星球,什么是策略模式(二)】

    【设计模式-原来这就是代理模式(三)】

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

    【设计模式-不会吧,不会还有人不知道装饰器模式吧(五)】


    起源地 » 设计模式-不会吧,不会还有人不知道装饰器模式吧(五)

    常见问题FAQ

    免费下载或者VIP会员专享资源能否直接商用?
    本站所有资源版权均属于原作者所有,这里所提供资源均只能用于参考学习用,请勿直接商用。若由于商用引起版权纠纷,一切责任均由使用者承担。更多说明请参考 VIP介绍。
    提示下载完但解压或打开不了?
    最常见的情况是下载不完整: 可对比下载完压缩包的与网盘上的容量,若小于网盘提示的容量则是这个原因。这是浏览器下载的bug,建议用百度网盘软件或迅雷下载。若排除这种情况,可在对应资源底部留言,或 联络我们.。
    找不到素材资源介绍文章里的示例图片?
    对于PPT,KEY,Mockups,APP,网页模版等类型的素材,文章内用于介绍的图片通常并不包含在对应可供下载素材包内。这些相关商业图片需另外购买,且本站不负责(也没有办法)找到出处。 同样地一些字体文件也是这种情况,但部分素材会在素材包内有一份字体下载链接清单。
    模板不会安装或需要功能定制以及二次开发?
    请QQ联系我们

    发表评论

    还没有评论,快来抢沙发吧!

    如需帝国cms功能定制以及二次开发请联系我们

    联系作者

    请选择支付方式

    ×
    迅虎支付宝
    迅虎微信
    支付宝当面付
    余额支付
    ×
    微信扫码支付 0 元