vue中使用装饰器实现AOP编程

在JavaScript中实现AOP，是把一个函数“动态织入”到另一个函数之中。

首先要构造Function的prototype
prototype.js

Function.prototype.before = function (beforefn) {
  let _self = this;
  return function () {
    beforefn.apply(this, arguments);
    return _self.apply(this, arguments);
  };
};
Function.prototype.after = function (afterfn) {
  let _self = this;
  return function () {
    let ret = _self.apply(this, arguments);
    afterfn.apply(this, arguments);
    return ret;
  };
};
Function.prototype.around = function (beforefn, afterfn) {
  let _self = this;
  return function () {
    beforefn.apply(this, arguments);
    let ret = _self.apply(this, arguments);
    afterfn.apply(this, arguments);
    return ret;
  };
};

编辑我们的装饰器函数
decorator.js

export const before = function (...args) {
  return function (target, key, descriptor) {
    descriptor.value = descriptor.value.before(() => {
      console.log(`Action-${key} 触发埋点!`);
    });
  };
};
export const after = function (...args) {
  return function (target, key, descriptor) {
    descriptor.value = descriptor.value.after(() => {
      console.log(`Action-${key} 触发埋点!`);
    });
  };
};
export const around = function (...args) {
  return function (target, key, descriptor) {
    descriptor.value = descriptor.value.around(() => {
      console.log(`Action-${key} 触发埋点before!`);
    }, () => {
      console.log(`Action-${key} 触发埋点after!`);
    });
  };
};

编辑我们的vue文件
test.vue

<template>
  <div></div>
</template>
<script>
import { before, after, around } from '@/lib/decorator';
export default {
  data () {
    
  },
  methods: {
    @before()
    @after()
    @around()
    errorHandle () {
      // 一些共用的异常处理方案
    }
  },
};
</script>