什么是裝飾器？本篇文章帶大家了解一下裝飾器，簡單介紹一下js、vue中使用裝飾器的方法，希望對大家有所幫助！

相信各位在開發(fā)中一定遇到過二次彈框確認(rèn)相關(guān)的需求。不管你使用的是UI框架的二次彈框組件,還是自己封裝的彈框組件。都避免不了在多次使用時出現(xiàn)大量重復(fù)代碼的問題。這些代碼的積累導(dǎo)致項目的可讀性差。項目的代碼質(zhì)量也變得很差。那么我們?nèi)绾谓鉀Q二次彈框代碼重復(fù)的問題呢？使用裝飾器

什么是裝飾器？

Decorator是ES7的一個新語法。Decorator通過對類、對象、方法、屬性進行修飾。對其添加一些其他的行為。通俗來說:就是對一段代碼進行二次包裝。

裝飾器的使用

使用方法很簡單 我們定義一個函數(shù)

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

裝飾器的目的旨在對代碼進行復(fù)用。下面我們先來一個小例子看看

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);

這樣一對比你會發(fā)現(xiàn)使用裝飾器后代碼的可讀性變強了。裝飾器并不關(guān)心你內(nèi)部代碼的實現(xiàn)。

vue 中使用裝飾器

如果你的項目是用vue-cli搭建的 并且vue-cli的版本大于2.5 那么你無需進行任何配置即可使用。如果你的項目還包含eslit 那么你需要在eslit中開啟支持裝飾器相關(guān)的語法檢測。【