浅析什么是装饰器？Vue中怎么使用装饰器？

什么是装饰器？本篇文章带大家了解一下装饰器，简单介绍一下js、vue中使用装饰器的方法，希望对大家有所帮助！

相信各位在开发中一定遇到过二次弹框确认相关的需求。不管你使用的是UI框架的二次弹框组件,还是自己封装的弹框组件。都避免不了在多次使用时出现大量重复代码的问题。这些代码的积累导致项目的可读性差。项目的代码质量也变得很差。那么我们如何解决二次弹框代码重复的问题呢？使用装饰器

什么是装饰器？

Decorator是ES7的一个新语法。Decorator通过对类、对象、方法、属性进行修饰。对其添加一些其他的行为。通俗来说:就是对一段代码进行二次包装。

装饰器的使用

使用方法很简单 我们定义一个函数

const  decorator =  (target, name, descriptor) => {  var oldValue = descriptor.value；  descriptor.value = function(){     alert('哈哈')     return oldValue.apply(this,agruments)        }   return descriptor } // 然后直接@decorator到函数、类或者对象上即可。

装饰器的目的旨在对代码进行复用。下面我们先来一个小例子看看

js中使用装饰器

//定义一个装饰器  const log = (target, name, descriptor) => {   var oldValue = descriptor.value;   descriptor.value = function() {     console.log(`Calling ${name} with`, arguments);     return oldValue.apply(this, arguments);   };   return descriptor; }    //计算类   class Calculate {       //使用装饰器   @log()    function  subtraction(a,b){      return  a - b    }  }    const operate  = new Calculate()   operate.subtraction(5,2)

不使用装饰器

const log = (func) => {   if(typeof(func) !== 'function') {     throw new Error(`the param must be a function`);   }   return (...arguments) => {     console.info(`${func.name} invoke with ${arguments.join(',')}`);     func(...arguments);   } }  const subtraction = (a, b) => a + b;  const subtractionLog = log(subtraction);  subtractionLog(10,3);

这样一对比你会发现使用装饰器后代码的可读性变强了。装饰器并不关心你内部代码的实现。

vue 中使用装饰器

如果你的项目是用vue-cli搭建的 并且vue-cli的版本大于2.5 那么你无需进行任何配置即可使用。如果你的项目还包含eslit 那么你需要在eslit中开启支持装饰器相关的语法检测。【