前端装饰器模式快闪

1,902 阅读7分钟

狸猫换太子

北宋真宗时,有李妃和刘妃两位小主都有了龙种,谁生了儿子,谁就能豪横。谁曾想刘妃不是个善茬,把剥了皮的狸猫换了李妃刚生完的孩子。天可怜见,执行任务的宫女人性未泯,将孩子送往八贤王处抚养,这才引出后来,包拯陈州放粮救李妃,仁宗认母家团圆。那位说了,好好的谈装饰器模式这怎么说上故事了。各位看官不要急,这前端装饰器模式的实现核心其实就在这五个字上,天空飘来五个字,那都不是事,串了串了……核心其实就在这五个字上——狸猫换太子。

装饰器模式

咱们闲言少叙,言归正传。装饰器模式是设计模式的一种,是为已有功能动态的添加更多功能的一种方式。重点体现了设计模式六大原则之中的单一职责原则和开闭原则。单一职责很好理解,就是专心,就是一个函数只做一件事情。开闭原则是指要对扩展开放,对修改关闭。

说人话,就是在原有功能不变的前提下要加功能、加需求,不是去动写好的函数,而是想办法扩展。这个想出来的办法就是装饰器模式。

最简单的实现

现在我们先来个最简单的实现。假设有如下一个场景,定义一个启动函数,执行就会打印"start"。

let start = function () {
    console.log('start')
}
start();

好了,现在产品来了,他说启动之前,需要加入一段自检功能。 最快的方法当然就是在start函数里添加一段检查代码。但是这就违反了设计模式的单一职责原则和开闭原则。这时候就是装饰器模式大展身手的好时候了。

let start = function () {
    console.log('start')
}
const _start = start;
start = function(){
    console.log('check');
    _start()
}
start();

对于原函数,我们没有做任何的修改,因此不必担心原有功能受到影响。首先将原函数对象地址赋值给新的变量,然后重写原函数变量。重写的函数首先加入自检功能,然后执行上面备份到新变量的原函数。这样就实现了一个最简单的装饰器模式。你品,你细品,有没有狸猫换太子的味道。

装饰器模式与代理模式

我想到了这里,你应该对于装饰器模式有所掌握了。所以我们趁热打铁,来认识一下装饰器模式的兄弟代理模式。代理模式也是经典设计模式的一种,和装饰器模式的共同点是都不改变原有功能。代理模式决定了能不能访问到原有功能,是一种控制。装饰器模式决定了你能访问到的是加了其他哪些功能的原有功能。如果非要类比的话,那么代理有点像防火墙,装饰器有点像你买的快递的各种快递外包装。

在ES6中提供了一个新的标准内置对象Proxy,就是代理模式的实现。你可能已经知道了在 Vue3.0 中将会通过 Proxy 来替换原本的 Object.defineProperty 来实现数据响应式。

语法
let p = new Proxy(target, handler);

target是用Proxy包装的目标对象(可以是任何类型的对象,包括原生数组,函数,甚至另一个代理)。handler是一个对象,其属性是当执行一个操作时定义代理的行为的函数。 Proxy支持13种拦截操作,几乎涵盖了对象函数操作的方方面面,完全够开一个新的专题,所以这里就先不做扩展。

装饰器模式与面向切面编程

面向切面编程和面向对象编程一样,是一种编程的思想,是对面向对象编程的一种补充。在后端开发使用的Java框架spring的特性中有一项特性就是AOP,面向切面编程。所以到底什么是切面,如果是后端开发理解,还需要引入好多其他术语概念,但是我们前端有koa啊,有洋葱模型呀。洋葱模型就是一个切面。

我的函数方法就是洋葱的核心,我想在方法调用前后做一些事情,比如打日志、算时间等等,这时候就将我们的函数方法包裹起来,再加一层,这就是面向切面编程。思考的是程序执行的位置。 面向对象编程可以让我们方便抽象和管理我们的代码,而面向切面编程的重点在于解耦和复用。而装饰器就是实现面向切面编程的一种方式。

源码级别的实现

function.before和function.after

在webpack和babel还没有大行其道之前,比较经典的AOP实现方式就是function.before和function.after,同样我们也可以用他们来实现装饰器模式。

Function.prototype.before = function(fn){
    var _this = this;       // 用来保存调用这个函数的引用,如func_1调用此函数,则_this指向func_1
    return function(){      // 返回一个函数,这个函数包含原函数和新函数,原函数指的是func_1,新函数指的是fn
        fn.apply(this,arguments);   // 执行新函数
        return _this.apply(this,arguments);     // 执行原函数
    }
}

Function.prototype.after = function(fn){
    var _this = this;
    return function(){
        var r = _this.apply(this,arguments); // 先执行原函数,也就是func_1
        fn.apply(this,arguments);   // 再执行新函数
        return r;
    }
}


var func_1 = function () {
   console.log("2")
}

func_1 = func_1.before(function () {
   console.log("1");
}).after(function () {
   console.log("3");
} )

func_1();   // 输出1、2、3
Object.defineProperty()

后来,我们有了webpack和babel。 Object.defineProperty()的作用就是直接在一个对象上定义一个新属性,或者修改一个已经存在的属性。

/**
* param obj 当前操作对象
* param prop 需要定义的对象属性名称
* param desc 属性描述符
*/
Object.defineProperty(obj, prop, desc)

属性描述符包括数据描述符:value,writable;存取描述符:get,set;描述符:configurable,enumerable; 这个方法可不得了,存取描述符get,set是vue框架的基础,而数据描述符就是Babel实现装饰器的基础。

Babel将我们的@函数名最终转换为

Object["define" + "Property"](target, property, desc);

由此可见,装饰方法本质上还是使用 Object.defineProperty() 来实现的。

function before(target, key, descriptor) {
  const fn = descriptor.value;
  return {
    ...descriptor,
    value() {
      console.log('before')
      return fn.apply(this, arguments);
    }
  }
}
function after(target, key, descriptor) {
  const fn = descriptor.value;
  return {
    ...descriptor,
    value() {
      let result = fn.apply(this, arguments);
      console.log('after');
      return result;
    }
  }
}
class Test {
  @after
  @before
  func(){
    console.log('func')
  }
}
const test = new Test();
test.func();

经过Babel编译后运行,可以输出: before func afte

工程化的实现

此处以webpack打包项目为例,如果在一个webpack打包项目中你还没有使用装饰器,那么你的项目在开发效率和代码重构上就还有提升空间。 如果你使用babel6,安装并配置babel插件babel-plugin-transform-decorators-legacy,如果使用babel7,安装并配置官方插件@babel/plugin-proposal-decorators。 完成配置后,可以将项目中无关业务的功能尝试使用装饰器的方式实现,如登陆条件判断,防抖,节流,埋点统计等。

优秀装饰器的样子

core-decorators是一个装饰器第三方模块,提供了一些常见的装饰器,通过学习它,我们可以更好地理解装饰器。它的github地址是https://github.com/jayphelps/core-decorators,目前已经有3.9K的赞。