小編給大家分享一下Vue中的裝飾器如何使用,相信大部分人都還不怎么了解,因此分享這篇文章給大家參考一下,希望大家閱讀完這篇文章后大有收獲,下面讓我們一起去了解一下吧!
創(chuàng)新互聯(lián)建站基于成都重慶香港及美國等地區(qū)分布式IDC機房數(shù)據(jù)中心構(gòu)建的電信大帶寬,聯(lián)通大帶寬,移動大帶寬,多線BGP大帶寬租用,是為眾多客戶提供專業(yè)四川服務(wù)器托管報價,主機托管價格性價比高,為金融證券行業(yè)服務(wù)器托管,ai人工智能服務(wù)器托管提供bgp線路100M獨享,G口帶寬及機柜租用的專業(yè)成都idc公司。
相信各位在開發(fā)中一定遇到過二次彈框確認相關(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ù)用。下面我們先來一個小例子看看
//定義一個裝飾器 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-cli搭建的 并且vue-cli的版本大于2.5 那么你無需進行任何配置即可使用。如果你的項目還包含eslit 那么你需要在eslit中開啟支持裝飾器相關(guān)的語法檢測。【相關(guān)推薦:vue.js視頻教程】
//在 eslintignore中添加或者修改如下代碼: parserOptions: { ecmaFeatures:{ // 支持裝飾器 legacyDecorators: true } }
加上這段代碼之后eslit就支持裝飾器語法了。
通常在項目中我們經(jīng)常會使用二次彈框進行刪除操作:
//decorator.js //假設(shè)項目中已經(jīng)安裝了 element-ui import { MessageBox, Message } from 'element-ui' /** * 確認框 * @param {String} title - 標題 * @param {String} content - 內(nèi)容 * @param {String} confirmButtonText - 確認按鈕名稱 * @param {Function} callback - 確認按鈕名稱 * @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í)行了一個element-ui中的MessageBox
組件 當用戶取消時 Message
組件會提示用戶取消了操作。
我們在test()方法上用裝飾器修飾一下
import { confirm } from '@/util/decorator' import axios form 'axios' export default { name:'test', data(){ return { delList: '/merchant/storeList/commitStore' } } }, methods:{ @confirm('刪除門店','請確認是否刪除門店?') test(id){ const {res,data} = axios.post(this.delList,{id}) if(res.rspCd + '' === '00000') this.$message.info('操作成功!') } }
此時用戶點擊某個門店進行刪除。裝飾器將會起作用。彈出如下圖所示:
當我點擊取消時:
tips: 用戶取消了操作.被修飾的test方法不會執(zhí)行。
當我們點擊確定時:
接口被調(diào)用了 并且彈出了message
裝飾器用于將一段代碼進行二次包裝。給代碼增加一些行為操作和屬性。 使用裝飾器能大大減少代碼的重復(fù)。增強代碼可讀性。
以上是“Vue中的裝飾器如何使用”這篇文章的所有內(nèi)容,感謝各位的閱讀!相信大家都有了一定的了解,希望分享的內(nèi)容對大家有所幫助,如果還想學(xué)習(xí)更多知識,歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道!
新聞名稱:Vue中的裝飾器如何使用
標題網(wǎng)址:http://bm7419.com/article6/pssgig.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供虛擬主機、營銷型網(wǎng)站建設(shè)、搜索引擎優(yōu)化、移動網(wǎng)站建設(shè)、網(wǎng)站制作、標簽優(yōu)化
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請盡快告知,我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場,如需處理請聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時需注明來源: 創(chuàng)新互聯(lián)