Vue中使用裝飾器的方法詳解
前言
相信各位在開發中一定遇到過二次彈框確認相關的需求。不管你使用的是UI框架的二次彈框組件,還是自己封裝的彈框組件。都避免不瞭在多次使用時出現大量重復代碼的問題。這些代碼的積累導致項目的可讀性差。項目的代碼質量也變得很差。那麼我們如何解決二次彈框代碼重復的問題呢?使用裝飾器
什麼是裝飾器?
Decorator是ES7的一個新語法。Decorator通過對類、對象、方法、屬性進行修飾。對其添加一些其他的行為。通俗來說:就是對一段代碼進行二次包裝。
裝飾器的使用
使用方法很簡單 我們定義一個函數
const decorator = (target, name, descriptor) => { var oldValue = descriptor.value; descriptor.value = function(){ alert('哈哈') return oldValue.apply(this,agruments) } return descriptor } // 然後直接@decorator到函數、類或者對象上即可。
裝飾器的目的旨在對代碼進行復用。下面我們先來一個小例子看看
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);
這樣一對比你會發現使用裝飾器後代碼的可讀性變強瞭。裝飾器並不關心你內部代碼的實現。
vue 中使用裝飾器
如果你的項目是用vue-cli搭建的 並且vue-cli的版本大於2.5 那麼你無需進行任何配置即可使用。如果你的項目還包含eslit 那麼你需要在eslit中開啟支持裝飾器相關的語法檢測
//在 eslintignore中添加或者修改如下代碼: parserOptions: { ecmaFeatures:{ // 支持裝飾器 legacyDecorators: true } }
加上這段代碼之後eslit就支持裝飾器語法瞭。
通常在項目中我們經常會使用二次彈框進行刪除操作:
//decorator.js //假設項目中已經安裝瞭 element-ui import { MessageBox, Message } from 'element-ui' /** * 確認框 * @param {String} title - 標題 * @param {String} content - 內容 * @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方法裡執行瞭一個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方法不會執行。
當我們點擊確定時:
接口被調用瞭 並且彈出瞭message
一些常用的裝飾器
下面小編羅列瞭幾個小編在項目中常用的幾個裝飾器,方便大傢使用
1. 函數節流與防抖
函數節流與防抖應用場景是比較廣的,一般使用時候會通過throttle或debounce方法對要調用的函數進行包裝,現在就可以使用上文說的內容將這兩個函數封裝成裝飾器, 防抖節流使用的是lodash提供的方法,大傢也可以自行實現節流防抖函數哦
import { throttle, debounce } from 'lodash' /** * 函數節流裝飾器 * @param {number} wait 節流的毫秒 * @param {Object} options 節流選項對象 * [options.leading=true] (boolean): 指定調用在節流開始前。 * [options.trailing=true] (boolean): 指定調用在節流結束後。 */ export const throttle = function(wait, options = {}) { return function(target, name, descriptor) { descriptor.value = throttle(descriptor.value, wait, options) } } /** * 函數防抖裝飾器 * @param {number} wait 需要延遲的毫秒數。 * @param {Object} options 選項對象 * [options.leading=false] (boolean): 指定在延遲開始前調用。 * [options.maxWait] (number): 設置 func 允許被延遲的最大值。 * [options.trailing=true] (boolean): 指定在延遲結束後調用。 */ export const debounce = function(wait, options = {}) { return function(target, name, descriptor) { descriptor.value = debounce(descriptor.value, wait, options) } }
封裝完之後,在組件中使用
import {debounce} from '@/decorator' export default { methods:{ @debounce(100) resize(){} } }
2. loading
在加載數據的時候,為瞭個用戶一個友好的提示,同時防止用戶繼續操作,一般會在請求前顯示一個loading,然後在請求結束之後關掉loading,一般寫法如下
export default { methods:{ async getData() { const loading = Toast.loading() try{ const data = await loadData() // 其他操作 }catch(error){ // 異常處理 Toast.fail('加載失敗'); }finally{ loading.clear() } } } }
我們可以把上面的loading的邏輯使用裝飾器重新封裝,如下代碼
import { Toast } from 'vant' /** * loading 裝飾器 * @param {*} message 提示信息 * @param {function} errorFn 異常處理邏輯 */ export const loading = function(message = '加載中...', errorFn = function() {}) { return function(target, name, descriptor) { const fn = descriptor.value descriptor.value = async function(...rest) { const loading = Toast.loading({ message: message, forbidClick: true }) try { return await fn.call(this, ...rest) } catch (error) { // 在調用失敗,且用戶自定義失敗的回調函數時,則執行 errorFn && errorFn.call(this, error, ...rest) console.error(error) } finally { loading.clear() } } } }
然後改造上面的組件代碼
export default { methods:{ @loading('加載中') async getData() { try{ const data = await loadData() // 其他操作 }catch(error){ // 異常處理 Toast.fail('加載失敗'); } } } }
3. 確認框
當你點擊刪除按鈕的時候,一般都需要彈出一個提示框讓用戶確認是否刪除,這時候常規寫法可能是這樣的
import { Dialog } from 'vant' export default { methods: { deleteData() { Dialog.confirm({ title: '提示', message: '確定要刪除數據,此操作不可回退。' }).then(() => { console.log('在這裡做刪除操作') }) } } }
我們可以把上面確認的過程提出來做成裝飾器,如下代碼
import { Dialog } from 'vant' /** * 確認提示框裝飾器 * @param {*} message 提示信息 * @param {*} title 標題 * @param {*} cancelFn 取消回調函數 */ export function confirm( message = '確定要刪除數據,此操作不可回退。', title = '提示', cancelFn = function() {} ) { return function(target, name, descriptor) { const originFn = descriptor.value descriptor.value = async function(...rest) { try { await Dialog.confirm({ message, title: title }) originFn.apply(this, rest) } catch (error) { cancelFn && cancelFn(error) } } } }
然後再使用確認框的時候,就可以這樣使用瞭
export default { methods: { // 可以不傳參,使用默認參數 @confirm() deleteData() { console.log('在這裡做刪除操作') } } }
是不是瞬間簡單多瞭,當然還可以繼續封裝很多很多的裝飾器
總結
裝飾器用於將一段代碼進行二次包裝。給代碼增加一些行為操作和屬性。 使用裝飾器能大大減少代碼的重復。增強代碼可讀性。
到此這篇關於Vue中使用裝飾器的文章就介紹到這瞭,更多相關Vue使用裝飾器內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet!