真实的国产乱ⅩXXX66竹夫人,五月香六月婷婷激情综合,亚洲日本VA一区二区三区,亚洲精品一区二区三区麻豆

成都創(chuàng)新互聯(lián)網(wǎng)站制作重慶分公司

Vue中的裝飾器如何使用

小編給大家分享一下Vue中的裝飾器如何使用,相信大部分人都還不怎么了解,因此分享這篇文章給大家參考一下,希望大家閱讀完這篇文章后大有收獲,下面讓我們一起去了解一下吧!

創(chuàng)新互聯(lián)建站基于成都重慶香港及美國(guó)等地區(qū)分布式IDC機(jī)房數(shù)據(jù)中心構(gòu)建的電信大帶寬,聯(lián)通大帶寬,移動(dòng)大帶寬,多線BGP大帶寬租用,是為眾多客戶提供專業(yè)四川服務(wù)器托管報(bào)價(jià),主機(jī)托管價(jià)格性價(jià)比高,為金融證券行業(yè)服務(wù)器托管,ai人工智能服務(wù)器托管提供bgp線路100M獨(dú)享,G口帶寬及機(jī)柜租用的專業(yè)成都idc公司。

Vue中的裝飾器如何使用

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

什么是裝飾器?

DecoratorES7的一個(gè)新語(yǔ)法。Decorator通過對(duì)類、對(duì)象、方法、屬性進(jìn)行修飾。對(duì)其添加一些其他的行為。通俗來說:就是對(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ù)、類或者對(duì)象上即可。

裝飾器的目的旨在對(duì)代碼進(jìn)行復(fù)用。下面我們先來一個(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ì)算類
  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 那么你無需進(jìn)行任何配置即可使用。如果你的項(xiàng)目還包含eslit 那么你需要在eslit中開啟支持裝飾器相關(guān)的語(yǔ)法檢測(cè)?!鞠嚓P(guān)推薦:vue.js視頻教程】

//在 eslintignore中添加或者修改如下代碼:
parserOptions: {
    ecmaFeatures:{
      // 支持裝飾器
      legacyDecorators: true
    }
  }

加上這段代碼之后eslit就支持裝飾器語(yǔ)法了。

通常在項(xiàng)目中我們經(jīng)常會(huì)使用二次彈框進(jìn)行刪除操作:

//decorator.js
//假設(shè)項(xiàng)目中已經(jīng)安裝了 element-ui
import { MessageBox, Message } from 'element-ui'
/**
 * 確認(rèn)框
 * @param {String} title - 標(biāo)題
 * @param {String} content - 內(nèi)容
 * @param {String} confirmButtonText - 確認(rèn)按鈕名稱
 * @param {Function} callback - 確認(rèn)按鈕名稱
 * @returns
   **/
export function confirm(title, content, confirmButtonText = '確定') {
  return function(target, name, descriptor) {
    const originValue = descriptor.value
    descriptor.value = function(...args) {
      MessageBox.confirm(content, title, {
        dangerouslyUseHTMLString: true,
        distinguishCancelAndClose: true,
        confirmButtonText: confirmButtonText
      }).then(originValue.bind(this, ...args)).catch(error => {
        if (error === 'close' || error === 'cancel') {
          Message.info('用戶取消操作'))
        } else {
          Message.info(error)
        }
      })
    }
    return descriptor
  }
}

如上代碼 confirm方法里執(zhí)行了一個(gè)element-ui中的MessageBox組件 當(dāng)用戶取消時(shí) Message組件會(huì)提示用戶取消了操作。

我們?cè)趖est()方法上用裝飾器修飾一下

import { confirm } from '@/util/decorator'
import axios form 'axios'
export default {
name:'test',
data(){
return {
  delList: '/merchant/storeList/commitStore'
    }
  }
},
methods:{
 @confirm('刪除門店','請(qǐng)確認(rèn)是否刪除門店?')
  test(id){
   const {res,data} = axios.post(this.delList,{id})
   if(res.rspCd + '' === '00000') this.$message.info('操作成功!')
  }
}

此時(shí)用戶點(diǎn)擊某個(gè)門店進(jìn)行刪除。裝飾器將會(huì)起作用。彈出如下圖所示:

Vue中的裝飾器如何使用

當(dāng)我點(diǎn)擊取消時(shí):

Vue中的裝飾器如何使用

tips: 用戶取消了操作.被修飾的test方法不會(huì)執(zhí)行

當(dāng)我們點(diǎn)擊確定時(shí):

Vue中的裝飾器如何使用

接口被調(diào)用了 并且彈出了message

總結(jié)

裝飾器用于將一段代碼進(jìn)行二次包裝。給代碼增加一些行為操作和屬性。 使用裝飾器能大大減少代碼的重復(fù)。增強(qiáng)代碼可讀性。

以上是“Vue中的裝飾器如何使用”這篇文章的所有內(nèi)容,感謝各位的閱讀!相信大家都有了一定的了解,希望分享的內(nèi)容對(duì)大家有所幫助,如果還想學(xué)習(xí)更多知識(shí),歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道!


本文題目:Vue中的裝飾器如何使用
轉(zhuǎn)載來源:http://weahome.cn/article/pssgig.html

其他資訊

在線咨詢

微信咨詢

電話咨詢

028-86922220(工作日)

18980820575(7×24)

提交需求

返回頂部