js---装饰器

悦悦妍妍
52 阅读1分钟

概念

就是对类、类属性、方法之类的一种装饰，可以理解为在原有代码外层又包装了一层处理逻辑。这样就可以做到不直接修改代码，就实现某些功能，其本质上就是一个函数。类似java中的切面.

  • 装饰器的简单实现
// 原始方法
function sourceMethod(params) {
  console.log('sourceMethod---start', params);
}

// 方法装饰器
function methodDecorator(sourceMethod) {
  return function() {
    console.log('starting');
    const result = sourceMethod.apply(this, arguments);
    console.log('finished');
    return result;
  }
}

// 经过装饰器装饰成成目标方法
const targetMethod = methodDecorator(sourceMethod);

// starting  
// sourceMethod---start a
// finished
targetMethod('a')

使用

  • 官方还没有实现这个提案，目前要使用babel插件 或 Typescript
//`babel`插件

npm install --save-dev @babel/plugin-proposal-decorators

修改配置文件(.bablerc)
{
  "plugins": [
    [
      "@babel/plugin-proposal-decorators",
      {
        "version": "legacy"
      }
    ]
  ]
}
  • 使用举例
//main.js 
/**
 * @desc 方法切面
 * @param {value} 切面注解参数值
 * @param {target} 被切目标
 * @param {methodName} 被切目标的方法名
 * @param {descriptor} 描述对象
 */
window.methodInterceptors = (value) => {
  return function (target, methodName, descriptor) {
    let original = descriptor.value;
    descriptor.value = function (...args) {
      if (value === 'a') {
        console.log('a');
      }
      if (value === 'b') {
        console.log('b');
      }
      return original.apply(this, args)
    }
    return descriptor
  };
}

// 业务组件中
methods: {
    @methodInterceptors("a")
    onClick() {
      console.log("onClick---start");
    }
  }
  • 若vscode有警告提示，可以在settings.json文件中配置
 "vetur.validation.script": false,
avatar
文章
阅读
粉丝