小編給大家分享一下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公司。
相信各位在開發(fā)中一定遇到過二次彈框確認(rèn)相關(guān)的需求。不管你使用的是UI框架的二次彈框組件,還是自己封裝的彈框組件。都避免不了在多次使用時(shí)出現(xiàn)大量重復(fù)代碼的問題。這些代碼的積累導(dǎo)致項(xiàng)目的可讀性差。項(xiàng)目的代碼質(zhì)量也變得很差。那么我們?nèi)绾谓鉀Q二次彈框代碼重復(fù)的問題呢?使用裝飾器
Decorator
是ES7
的一個(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è)小例子看看
//定義一個(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)。
如果你的項(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ì)起作用。彈出如下圖所示:
當(dāng)我點(diǎn)擊取消時(shí):
tips: 用戶取消了操作.被修飾的test方法不會(huì)執(zhí)行。
當(dāng)我們點(diǎn)擊確定時(shí):
接口被調(diào)用了 并且彈出了message
裝飾器用于將一段代碼進(jìn)行二次包裝。給代碼增加一些行為操作和屬性。 使用裝飾器能大大減少代碼的重復(fù)。增強(qiáng)代碼可讀性。
以上是“Vue中的裝飾器如何使用”這篇文章的所有內(nèi)容,感謝各位的閱讀!相信大家都有了一定的了解,希望分享的內(nèi)容對(duì)大家有所幫助,如果還想學(xué)習(xí)更多知識(shí),歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道!