装饰者模式

前言

在传统的面向对象语言中，给对象添加功能通常使用继承方式。这种方式并不灵活且存在一些问题：

随着业务复杂度增加，会创建出大量的子类，且会导致父子类之间存在强耦合性。

装饰者(decorator)模式，能够在不改变原始对象的基础上，在运行时动态地添加、删除或修改对象的功能。与继承相比，装饰者是一种更轻便灵活的做法。

当然前端也可实现装饰类，但前端中类本质上是构造函数的一种语法糖，此处不做讨论。

举个栗子

在日常项目中，我们会遇到这样的问题：有一个新需求，要在已有功能基础上增加一些内容。但老代码可能不是我们编写的，此时我们会面临如下问题

不知道老代码的使用范围，随意改动容易影响之前的功能
看懂老代码的逻辑再进行修改，比较耗时

我们来看一个例子：假设项目中有一个函数，在多个地方被调用，现在需要在调用这个函数前加一些逻辑。

// 原始函数
function oriFn(){console.log('执行原始函数');
}
// 找到原函数进行修改
function oriFn(){console.log('执行前置逻辑');console.log('执行原始函数');
}

当然在原函数足够简单时可以这么处理，如果原函数非常复杂，就需要考虑在不改变原函数的情况下，新增所需功能，一般做如下处理

let copyFn = oriFn;
oriFn = function(){console.log('执行前置逻辑');copyFn();
}

这种方式符合封闭开放原则，且未改动原函数。但其也存在一些问题

必须新增一个临时变量，如果多次包装会产生多个非必要的变量
this指向问题，部分场景下需要手动处理（如document等）

AOP装饰函数

AOP（面向切面编程）。主要作用是把一些跟核心业务逻辑无关的功能抽离出来，再通过“动态织入”的方式掺入业务逻辑模块中，保证了业务逻辑模块的纯净和高内聚性。

// 前置装饰
Function.prototype.before = function(beforeFn){let _this = this;return function(){beforeFn.apply(this, arguments);return _this.apply(this, arguments);}
}
// 后置装饰
Function.prototype.after = function(afterFn){let _this = this;return function(){var ret = _this.apply(this, arguments);afterFn.apply(this, arguments);return ret;}
}

所以上面的例子可以改写为

// 定义前置函数
function beforeFn(){console.log('执行前置逻辑')
}
// 定义后置函数
function afterFn(){console.log('执行后置逻辑')
}oriFn = oriFn.before(beforeFn).after(afterFn);
oriFn();
// 输出：执行前置逻辑
// 输出：执行原始函数
// 输出：执行后置逻辑

使用场景

通常用于日记统计、安全控制、异常处理等与业务逻辑无关的场景下。

便于理解，这里举个常见的例子：在表单提交前要做必填和数据校验，通常写法如下

// 校验
function validate() {if(xxx){console.log('校验失败')return false}return true
}
// 点击提交
function submit() {// 校验if(!validate()){return}// 发送请求console.log('发送请求')fecth('http://xxx.com/xxx')
}

如果此时有如下需求

需要动态决定需不需要校验
需要统计按钮点击次数
需要上报用户各个行为做前端监控

按照一般写法就需要找到各个业务方法入口，不停地添加判断条件，这样做就会导致各个功能模块耦合严重，所以我们可以这么处理

Function.prototype.before = function (beforefn) {let self = thisreturn function () {if (beforefn.name=='validate') {// 前置校验函数结果为false，不执行后续if(beforefn.apply(this, arguments) === false){return}}else{beforefn.apply(this, arguments)}return self.apply(this, arguments)}
}
// 统计函数
function getClickNum(){let _this = this;_this.num = 0;_this.addNum = function(){_this.num++;}
}
let clickFn = new getClickNum()
// 日志输出
function log() {console.log('用户点击了提交按钮')console.log('点击按钮次数：',clickFn.num)
}// 直接调用
submit()
// 需要校验
submit = submit.before(validate)
// 需要统计
submit = submit.before(clickFn.addNum)
// 需要统计+日志
submit = submit.before(clickFn.addNum).after(log)
// 需要校验+统计+日志
submit = submit.before(validate).before(clickFn.addNum).after(log)