Vue中使用裝飾器的方法詳解

更新時間：2022年01月25日 11:45:22 作者：李知恩

裝飾器是一種與類相關的語法糖,用來包裝或者修改類或者類的方法的行為,其實裝飾器就是設計模式中裝飾者模式的一種實現(xiàn)方式,下面這篇文章主要給大家介紹了關于Vue中使用裝飾器的相關資料,需要的朋友可以參考下

前言

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

什么是裝飾器？

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ù)、類或者對象上即可。

裝飾器的目的旨在對代碼進行復用。下面我們先來一個小例子看看

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);

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

vue 中使用裝飾器

如果你的項目是用vue-cli搭建的并且vue-cli的版本大于2.5 那么你無需進行任何配置即可使用。如果你的項目還包含eslit 那么你需要在eslit中開啟支持裝飾器相關的語法檢測

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

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

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

//decorator.js
//假設項目中已經(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

一些常用的裝飾器

下面小編羅列了幾個小編在項目中常用的幾個裝飾器，方便大家使用

1. 函數(shù)節(jié)流與防抖

函數(shù)節(jié)流與防抖應用場景是比較廣的，一般使用時候會通過throttle或debounce方法對要調(diào)用的函數(shù)進行包裝，現(xiàn)在就可以使用上文說的內(nèi)容將這兩個函數(shù)封裝成裝飾器，防抖節(jié)流使用的是lodash提供的方法，大家也可以自行實現(xiàn)節(jié)流防抖函數(shù)哦

import { throttle, debounce } from 'lodash'
/**
 * 函數(shù)節(jié)流裝飾器
 * @param {number} wait 節(jié)流的毫秒
 * @param {Object} options 節(jié)流選項對象
 * [options.leading=true] (boolean): 指定調(diào)用在節(jié)流開始前。
 * [options.trailing=true] (boolean): 指定調(diào)用在節(jié)流結(jié)束后。
 */
export const throttle =  function(wait, options = {}) {
  return function(target, name, descriptor) {
    descriptor.value = throttle(descriptor.value, wait, options)
  }
}

/**
 * 函數(shù)防抖裝飾器
 * @param {number} wait 需要延遲的毫秒數(shù)。
 * @param {Object} options 選項對象
 * [options.leading=false] (boolean): 指定在延遲開始前調(diào)用。
 * [options.maxWait] (number): 設置 func 允許被延遲的最大值。
 * [options.trailing=true] (boolean): 指定在延遲結(jié)束后調(diào)用。
 */
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

在加載數(shù)據(jù)的時候，為了個用戶一個友好的提示，同時防止用戶繼續(xù)操作，一般會在請求前顯示一個loading,然后在請求結(jié)束之后關掉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) {
        // 在調(diào)用失敗，且用戶自定義失敗的回調(diào)函數(shù)時，則執(zhí)行
        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. 確認框

當你點擊刪除按鈕的時候，一般都需要彈出一個提示框讓用戶確認是否刪除，這時候常規(guī)寫法可能是這樣的

import { Dialog } from 'vant'

export default {
  methods: {
    deleteData() {
      Dialog.confirm({
        title: '提示',
        message: '確定要刪除數(shù)據(jù)，此操作不可回退。'
      }).then(() => {
        console.log('在這里做刪除操作')
      })
    }
  }
}

我們可以把上面確認的過程提出來做成裝飾器，如下代碼

import { Dialog } from 'vant'

/**
 * 確認提示框裝飾器
 * @param {*} message 提示信息
 * @param {*} title 標題
 * @param {*} cancelFn 取消回調(diào)函數(shù)
 */
export function confirm(
  message = '確定要刪除數(shù)據(jù)，此操作不可回退。',
  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: {
    // 可以不傳參，使用默認參數(shù)
    @confirm()
    deleteData() {
      console.log('在這里做刪除操作')
    }
  }
}

是不是瞬間簡單多了,當然還可以繼續(xù)封裝很多很多的裝飾器

總結(jié)

裝飾器用于將一段代碼進行二次包裝。給代碼增加一些行為操作和屬性。使用裝飾器能大大減少代碼的重復。增強代碼可讀性。

到此這篇關于Vue中使用裝飾器的文章就介紹到這了,更多相關Vue使用裝飾器內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

手把手教你vue-cli單頁到多頁應用的方法
本篇文章主要介紹了手把手教你vue-cli單頁到多頁應用的方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2018-05-05
Vue項目使用CDN優(yōu)化首屏加載問題
這篇文章主要介紹了Vue項目使用CDN優(yōu)化首屏加載問題,本文以vue、vuex、vue-touter為例，給大家介紹處理流程，需要的朋友可以參考下
2018-04-04
Vue使用視頻作為網(wǎng)頁背景的實現(xiàn)指南
在現(xiàn)代網(wǎng)頁設計中,視頻背景逐漸成為一種流行的設計趨勢,它不僅能夠提升網(wǎng)頁的動態(tài)效果,還可以在視覺上抓住用戶的注意力,本文將詳細講解如何在頁面中使用視頻作為背景,并確保內(nèi)容可見、頁面元素布局合理,需要的朋友可以參考下
2024-10-10
Vue+Vant實現(xiàn)頂部搜索欄
這篇文章主要為大家詳細介紹了Vue+Vant實現(xiàn)頂部搜索欄，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2021-06-06
VUE3自定義指令防止重復點擊多次提交的實現(xiàn)方法
vue3項目,新增彈框連續(xù)點擊確定按鈕防止多次提交,在按鈕上添加自定義指令,這篇文章主要介紹了VUE3自定義指令防止重復點擊多次提交的實現(xiàn)方法,需要的朋友可以參考下
2024-08-08
Vue-cli打包后部署到子目錄下的路徑問題說明
這篇文章主要介紹了Vue-cli打包后部署到子目錄下的路徑問題說明，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
2020-09-09
vue3學習指導教程(附帶獲取屏幕可視區(qū)域?qū)捀?
Vue3是Vue的第三個版本更快,更輕,易維護,更多的原生支持,下面這篇文章主要給大家介紹了關于vue3學習指導教程(附帶獲取屏幕可視區(qū)域?qū)捀?的相關資料,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下
2023-04-04
vue如何監(jiān)聽元素橫向滾動到最右側(cè)
這篇文章主要介紹了vue如何監(jiān)聽元素橫向滾動到最右側(cè)問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
2023-10-10
vue中el-upload上傳圖片到七牛的示例代碼
這篇文章主要介紹了vue中el-upload上傳圖片到七牛的示例代碼,實現(xiàn)思路其實也很簡單，需要從后臺獲取七牛token上傳圖片到七牛，具體示例代碼大家跟隨小編一起學習吧
2018-10-10
Vue 基礎語法之計算屬性(computed)、偵聽器(watch)、過濾器(filters)詳解
計算屬性就是 Vue 實例選項中的 computed，computed 的值是一個對象類型，對象中的屬性值為函數(shù)，而且這個函數(shù)沒辦法接收參數(shù)，這篇文章主要介紹了Vue 基礎語法之計算屬性(computed)、偵聽器(watch)、過濾器(filters)詳解,需要的朋友可以參考下
2022-11-11