传送地址:
前端设计模式之工厂模式
前端设计模式之代理模式
前端设计模式之策略模式
设计模式第四篇,来一个与之前代理模式容易混淆的装饰模式(本来打算写观察者模式,此处再次实名 diss 某人的埋点博客写的速度)
装饰(Decorator)模式的定义:指在不改变现有对象结构的情况下,动态地给该对象增加一些职责(即增加其额外功能)的模式,它属于对象结构型模式。此处引用了 gof 设计模式的描述。
装饰(Decorator)模式的主要优点有:
其主要缺点是:装饰模式增加了许多子类,如果过度使用会使程序变得很复杂。
首先两者都是对方法的补充,故而在功能上是有重叠的部分,所以在看代理模式的时候会存在一些疑惑,这俩功能不是差不多的吗?这里简单区分一下二者的特点
代理模式重在于对方法的控制,添加行为对于用户是被动的;
装饰模式重在于装饰方法,增加方法的功能,添加装饰对于用户是主动的。
也就是说,代理模式在使用的时候,被代理的对象不会被修改,功能是单一且已知,对代理的过程无感,被代理的对象既不知道代理过程做了什么,也不会因为代理而改变他自己本身的属性。
而装饰模式是在装饰源对象的过程中就拓展了功能与属性,源对象本身的属性就已经被执行的时候就已经被动态的修改了。
两者对于开发者最大的区别来说,装饰模式是开发者主动去修改源对象,代理模式是去被动的拓展源对象的功能。
好的,回归到我们的初心-开宠物店的栗子中
我们在代理模式中提到过,我们可以选择代理、加盟的模式去将我们的生意扩大开来。但是随之而来有一定的问题,作为代理商,他们的选择可以多样化,我们的基础服务之外,他们会将自身的经营想法跟管理理念融入进去,除了货物源头之外,我们实际上没办法对代理商进行很高的约束。这样的话,代理商可能会在卖宠物的时候,搭配一些比较辣鸡的服务(过期宠物粮食、劣质的宠物牢笼等)来影响我们自己自身的品牌效应。
既然有这个情况出现,那我们可以加入直营店的概念或者在我们提供基础服务的时候,主动的将拓展服务提供出来,从而维护我们宠物店的品牌与影响力。
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 一下,后续会根据设计模式博文的推出,逐步的将此项目继续拓展出来,仅供学习参考。
如对文章内容以及实例有任何疑问、见解可随时与我沟通。你不点个赞吗O(∩_∩)O~
前端早早聊大会目标成为用得上、听得懂、抄得走的技术大会,计划 2020 年办 >= 15 期,由前端早早聊与掘金联合举办,前端早早聊大会行程动态、录播视频/PPT/讲稿资料下载请关注 「前端早早聊」 公众号跟进。
你的支持,是早早聊办下去的唯一动力!
点击保存下图,转发朋友圈即可,越多人参与,越多讲师愿意来分享!
还想听哪方面的分享,直接加 Scott 微信: codingdreamer 提需求吧!
7 月 18 日举办第十二届 - 前端搞可视化,报名请戳:www.huodongxing.com/go/tl12 ,海报及讲师行程如下: