在JavaScript中實現AOP，是把一個函數“動態(tài)織入”到另一個函數之中。

首先要構造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} 觸發(fā)埋點!`);
    });
  };
};
export const after = function (...args) {
  return function (target, key, descriptor) {
    descriptor.value = descriptor.value.after(() => {
      console.log(`Action-${key} 觸發(fā)埋點!`);
    });
  };
};
export const around = function (...args) {
  return function (target, key, descriptor) {
    descriptor.value = descriptor.value.around(() => {
      console.log(`Action-${key} 觸發(fā)埋點before!`);
    }, () => {
      console.log(`Action-${key} 觸發(fā)埋點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>