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

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

什么是裝飾器？

Decorator是ES7的一個(gè)新語(yǔ)法。Decorator通過(guò)對(duì)類(lèi)、對(duì)象、方法、屬性進(jìn)行修飾。對(duì)其添加一些其他的行為。通俗來(lái)說(shuō):就是對(duì)一段代碼進(jìn)行二次包裝。

裝飾器的使用

使用方法很簡(jiǎn)單 我們定義一個(gè)函數(shù)

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

裝飾器的目的旨在對(duì)代碼進(jìn)行復(fù)用。下面我們先來(lái)一個(gè)小例子看看

js中使用裝飾器

//定義一個(gè)裝飾器  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; }    //計(jì)算類(lèi)   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);

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

vue 中使用裝飾器

如果你的項(xiàng)目是用vue-cli搭建的 并且vue-cli的版本大于2.5 那么你無(wú)需進(jìn)行任何配置即可使用。如果你的項(xiàng)目還包含eslit 那么你需要在eslit中開(kāi)啟支持裝飾器相關(guān)的語(yǔ)法檢測(cè)?！?/p>