前端设计模式之装饰模式

2,941 阅读5分钟

前言

传送地址:

前端设计模式之工厂模式

前端设计模式之代理模式

前端设计模式之策略模式

设计模式第四篇,来一个与之前代理模式容易混淆的装饰模式(本来打算写观察者模式,此处再次实名 diss 某人的埋点博客写的速度)

装饰器模式

什么是装饰模式?

装饰(Decorator)模式的定义:指在不改变现有对象结构的情况下,动态地给该对象增加一些职责(即增加其额外功能)的模式,它属于对象结构型模式。此处引用了 gof 设计模式的描述。

装饰(Decorator)模式的主要优点有:

  • 采用装饰模式扩展对象的功能比采用继承方式更加灵活。
  • 可以设计出多个不同的具体装饰类,创造出多个不同行为的组合。

其主要缺点是:装饰模式增加了许多子类,如果过度使用会使程序变得很复杂。

装饰模式跟代理模式的区分

首先两者都是对方法的补充,故而在功能上是有重叠的部分,所以在看代理模式的时候会存在一些疑惑,这俩功能不是差不多的吗?这里简单区分一下二者的特点

代理模式重在于对方法的控制,添加行为对于用户是被动的;

装饰模式重在于装饰方法,增加方法的功能,添加装饰对于用户是主动的。

也就是说,代理模式在使用的时候,被代理的对象不会被修改,功能是单一且已知,对代理的过程无感,被代理的对象既不知道代理过程做了什么,也不会因为代理而改变他自己本身的属性

而装饰模式是在装饰源对象的过程中就拓展了功能与属性,源对象本身的属性就已经被执行的时候就已经被动态的修改了。

两者对于开发者最大的区别来说,装饰模式是开发者主动去修改源对象,代理模式是去被动的拓展源对象的功能。

装饰模式跟代理模式通俗理解

好的,回归到我们的初心-开宠物店的栗子中

我们在代理模式中提到过,我们可以选择代理、加盟的模式去将我们的生意扩大开来。但是随之而来有一定的问题,作为代理商,他们的选择可以多样化,我们的基础服务之外,他们会将自身的经营想法跟管理理念融入进去,除了货物源头之外,我们实际上没办法对代理商进行很高的约束。这样的话,代理商可能会在卖宠物的时候,搭配一些比较辣鸡的服务(过期宠物粮食、劣质的宠物牢笼等)来影响我们自己自身的品牌效应。

既然有这个情况出现,那我们可以加入直营店的概念或者在我们提供基础服务的时候,主动的将拓展服务提供出来,从而维护我们宠物店的品牌与影响力。

项目实战

业务发送 ajax 请求

const method = (type, url) => {
    switch (type) {
        case 'GET': {
            return (target, name, descriptor) => {
                return {
                    ...descriptor,
                    value(query) {
                        fetch.get({
                            url,
                            query
                        }).then(data => {
                            descriptor.value.apply({ result: data }, [...arguments])
                        }).catch(err => {
                            console.log('err====>', err)
                        })
                    }
                }
            }
        }
        default: {
            return (target, name, descriptor) => {
            }
        }
    }
}

class Business {
    @method('GET', 'https://api.github.com/users/octocat')
    getOct(params) {
        console.log(params)
        console.log('result==>', this.result)
    }
}

const business = new Business()

business.getOct({
    test: 1
})

上述是将业务方法使用装饰模式优雅的包了一层,实际项目中如果有简单的业务请求,这么使用可以优雅一点,跟上一篇 fetch 实战项目篇最后介绍业务请求封装不太一样,这种是将请求直接写在了业务方法当中,优点是简洁明了,可以迅速了解到此业务的请求 url 跟方式,缺陷是多重嵌套请求不好处理

添加埋点

function consuming(target, name, descriptor) {
    return {
        ...descriptor,
        value(query) {
            try {
                console.time('consuming')
                console.log('发送埋点', query)
                descriptor.value.apply(this, [...arguments])
            } finally {
                console.timeEnd('consuming')
            }
        }
    }
}

class Business {

    @consuming
    @method('GET', 'https://api.github.com/users/octocat')
    getOct(params) {
        console.log(params)
        console.log('result==>', this.result)
    }
}

装饰模式可以自由的将多种装饰器组合使用,类似于洋葱模式,所以我们可以将埋点功能使用装饰器添加在方法中。

函数-防抖与节流

众所周知,防抖函数在日常开发中还是比较常见的一种需求,so 我们也可以将防抖函数已装饰器模式灵活的添加进去

function debounce(wait, immediate) { // 此处防抖函数,可以延迟跟立即执行两种
    let timer;
    return (target, name, descriptor) => {
        return {
            ...descriptor,
            value(query) {
                if (timer) clearTimeout(timer);
                if (immediate) {
                    let callNow = !timer;
                    timer = setTimeout(() => {
                        timer = null;
                    }, wait);
                    if (callNow) descriptor.value.apply(this, [...arguments]);
                } else {
                    timer = setTimeout(() => {
                        descriptor.value.apply(this, [...arguments])
                    }, wait)
                }
            }
        }
    }
}

class Business {
    @debounce(3000)
    @consuming
    @method('GET', 'https://api.github.com/users/octocat')
    getOct(params) {
        console.log(params)
        console.log('result==>', this.result)
    }
}

既然防抖可以,那么节流亦可

function throttle(wait) {
    let timeout;
    return (target, name, descriptor) => {
        return {
            ...descriptor,
            value(query) {
                if (!timeout) {
                    timeout = setTimeout(() => {
                        timeout = null;
                        descriptor.value.apply(this, [...arguments])
                    }, wait)
                }
            }
        }
    }
}

以上是装饰模式在项目中的实例使用,部分可以直接使用,部分是作为技术探讨。

尾声

完整的 demo 地址:项目实战 demo,喜欢的朋友可以 star 一下,后续会根据设计模式博文的推出,逐步的将此项目继续拓展出来。

手动狗头镇楼

本文使用 mdnice 排版