缘起
近期产品提了个类似支付宝收能量活动的需求，其中有一项需求是获得能量球需要完成一些任务， 比如：分享活动页面可以获得a能量，完成场景开启可以获得b能量，操作遥控器可以获得c能量等等……
这些任务都是产品已经存在的功能，如果更改每一项产生能量球任务的功能，则可能需要不断的 repeat 自己，增大代码量的同时，后期如果变更需求或者产生bug也需要重复的体力劳动。 这些都是我不期望看到的。那么有没有一种优雅的解决方案呢？
其实能量球任务 和 产品已存在的功能是没有必然关系的，只是因为这个活动才有了那么一丝丝关联。 所以没有必要耦合在一起，恰好近期在看设计模式，装饰器模式给了我一些灵感：
装饰器模式（Decorator Pattern）允许向一个现有的对象添加新的功能，同时又不改变其结构。这种类型的设计模式属于结构型模式，它是作为现有的类的一个包装。
这种模式创建了一个装饰类，用来包装原有的类，并在保持类方法签名完整性的前提下，提供了额外的功能。
何不写一个能量球任务的装饰器，装饰一下需要完成任务的功能方法，这样既减少了代码量、又不会repeat自己，是一种比较优雅的解决方案。
性空
既然使用装饰器模式，那么必须先写出一个能量球任务装饰器来。
V1版本如下所示：
// 收能量任务装饰器
function getPowerTask (taskCode) {
return function (target, property, descriptor) {
const rawFunc = descriptor.value;
descriptor.value = async (...args) => {
console.log(target, `property=${property}`, descriptor)
await powerModel.finishTask(taskCode);
await rawFunc.apply(target, args);
}
return descriptor;
}
}
一个活动页面分享成功后调用能量球任务装饰器的代码如下所示：
export default class ShareTask extends Component {
……
shareView() {
const shareMod = this.getShareMod();
const shareOpt = this.getShareOpts();
shareMod.share(shareOpt).then(
res => this.shareAfter(),
err => console.log(err)
)
}
@getPowerTask('share')
async shareAfter() {
console.log('shareAfter');
await this.props.shareAfter();
}
……
render() {
……
}
}
结果是喜忧参半， 喜的是可以成功的触发收能量任务，忧的是shareAfter方法内 获取this.props 的结果是 undefined。
为啥是这样的结果呢，后来打断点调试发现 target 是 Component 原型， 并不是 Component 实例。 后来翻阅资料发现其实 Decorator 只是ES7的语法糖，类方法上的装饰器底层还是基于 Object.defineProperty 来实现的， 上面的装饰器使用babel翻译成ES5其实就是如下执行的：
getPowerTask(ShareTask.prototype, 'shareAfter', descriptor);
// 类似于
Object.defineProperty(ShareTask.prototype, 'shareAfter', descriptor);
把 shareTask.proptype 的 shareAfter 方法重新定义成了我们的方法。 既然装饰器只是一层封装，那么当方法具体执行的时候，是不是就是在 实例里面了， 考虑到这样，我对装饰器进行了以下改装：
1、箭头方法的this指向是在方法定义的地方，这里this需要指向执行的地方，所以改成普通方法
2、rawFunc.apply 的上下文改成this，即弃用原型对象，改成执行上下文对象
V2收能量装饰器
function getPowerTask (taskCode) {
return function (target, property, descriptor) {
const rawFunc = descriptor.value;
descriptor.value = async function(...args) => {
console.log(target, `property=${property}`, descriptor)
await powerModel.finishTask(taskCode);
await rawFunc.apply(this, args);
}
return descriptor;
}
}
后来试了一下V2 版本， 果然成功的获取到了 props 属性。
总结
此次成功的实践了装饰器模式，虽说软件工程没有银弹， 这次开发也算是一次寻找“铅弹”的过程吧，下面总结一些装饰器填坑的经验：
- this指向问题
Object.defineProperty方法是对类原型的方法进行重新定义，执行的时候还是在类实例下执行。如果想封装类的原有方法同时想同时使用类的实例，descriptor.value 必须定义一个普通函数，不能使用箭头函数。实例执行的时候this的指向就是当前实例类
- 普通函数不能使用装饰器
因为javascript在生成上下文对象的时候存在函数声明提升，所以对普通函数装饰失效。
- 不要手里有锤子，全世界去找钉子
他山之石
- 阮一峰装饰器实例文档
- 某大神