前言
传送地址：
设计模式第四篇，来一个与之前代理模式容易混淆的装饰模式（本来打算写观察者模式，此处再次实名 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 一下，后续会根据设计模式博文的推出，逐步的将此项目继续拓展出来。
