搜尋
首頁web前端Vue.js淺析什麼是裝飾器? Vue中怎麼使用裝飾器?

什麼是裝飾器?這篇文章帶大家了解裝飾器,簡單介紹一下js、vue中使用裝飾器的方法,希望對大家有幫助!

淺析什麼是裝飾器? Vue中怎麼使用裝飾器?

相信各位在開發上一定遇過二次彈框確認相關的需求。不管你使用的是UI框架的二次彈框組件,還是自己封裝的彈框組件。都避免不了在多次使用時出現大量重複程式碼的問題。這些程式碼的累積導致項目的可讀性差。專案的程式碼品質也變得很差。那我們要如何解決二次彈框程式碼重複的問題呢?使用裝飾器

什麼是裝飾器?

DecoratorES7的新語法。 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中開啟支援裝飾器相關的語法偵測。 【相關推薦:vue.js影片教學

//在 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('操作成功!')
  }
}

此時使用者點擊某個門市進行刪除。裝飾器將會起作用。彈出如下圖所示:

淺析什麼是裝飾器? Vue中怎麼使用裝飾器?

當我點擊取消時:

淺析什麼是裝飾器? Vue中怎麼使用裝飾器?

tips: 用戶取消了操作.被修飾的test方法不會執行

當我們點擊確定時:

淺析什麼是裝飾器? Vue中怎麼使用裝飾器?

介面被呼叫了並且彈出了message

總結

#裝飾器用於將一段程式碼進行二次包裝。給程式碼增加一些行為操作和屬性。使用裝飾器能大幅減少程式碼的重複。增強程式碼可讀性。

最後

文章若有不足之處,也請大家批評指出。

更多程式相關知識,請造訪:程式設計入門! !

以上是淺析什麼是裝飾器? Vue中怎麼使用裝飾器?的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述
本文轉載於:掘金社区。如有侵權,請聯絡admin@php.cn刪除
Vue常见面试题汇总(附答案解析)Vue常见面试题汇总(附答案解析)Apr 08, 2021 pm 07:54 PM

本篇文章给大家分享一些Vue面试题(附答案解析)。有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助。

5 款适合国内使用的 Vue 移动端 UI 组件库5 款适合国内使用的 Vue 移动端 UI 组件库May 05, 2022 pm 09:11 PM

本篇文章给大家分享5 款适合国内使用的 Vue 移动端 UI 组件库,希望对大家有所帮助!

聊聊vue指令中的修饰符,常用事件修饰符总结聊聊vue指令中的修饰符,常用事件修饰符总结May 09, 2022 am 11:07 AM

本篇文章带大家聊聊vue指令中的修饰符,对比一下vue中的指令修饰符和dom事件中的event对象,介绍一下常用的事件修饰符,希望对大家有所帮助!

如何覆盖组件库样式?React和Vue项目的解决方法浅析如何覆盖组件库样式?React和Vue项目的解决方法浅析May 16, 2022 am 11:15 AM

如何覆盖组件库样式?下面本篇文章给大家介绍一下React和Vue项目中优雅地覆盖组件库样式的方法,希望对大家有所帮助!

手把手教你用装饰器扩展 Python 计时器手把手教你用装饰器扩展 Python 计时器Apr 13, 2023 pm 08:46 PM

这是我们手把手教你实现 Python 定时器的第三篇文章。前两篇:分别是手把手教你实现一个 Python 计时器​,和用上下文管理器扩展 Python 计时器​,使得我们的 Timer 类方便用、美观实用。但我们并不满足于此,仍然有一个用例可以进一步简化它。假设我们需要跟踪代码库中一个给定函数所花费的时间。使用上下文管理器,基本上有两种不同的选择:1. 每次调用函数时使用 ​Timer:with Timer("some_name"): do_something()当我们在一

Python中的装饰器和上下文管理器是如何工作的?Python中的装饰器和上下文管理器是如何工作的?Oct 20, 2023 pm 07:04 PM

Python中的装饰器和上下文管理器是如何工作的?在Python中,装饰器和上下文管理器是两个非常有用的概念和功能。它们都是为了简化代码、增加代码可读性以及方便代码的重用。一、装饰器装饰器是Python中一种用于修改函数的行为的特殊函数。它允许我们在不修改原始函数的情况下对其进行包装或拓展。装饰器在许多Python的框架和库中被广泛使用,比如Flask、Dj

通过9个Vue3 组件库,看看聊前端的流行趋势!通过9个Vue3 组件库,看看聊前端的流行趋势!May 07, 2022 am 11:31 AM

本篇文章给大家分享9个开源的 Vue3 组件库,通过它们聊聊发现的前端的流行趋势,希望对大家有所帮助!

react与vue的虚拟dom有什么区别react与vue的虚拟dom有什么区别Apr 22, 2022 am 11:11 AM

react与vue的虚拟dom没有区别;react和vue的虚拟dom都是用js对象来模拟真实DOM,用虚拟DOM的diff来最小化更新真实DOM,可以减小不必要的性能损耗,按颗粒度分为不同的类型比较同层级dom节点,进行增、删、移的操作。

See all articles

熱AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

Undress AI Tool

免費脫衣圖片

Clothoff.io

Clothoff.io

AI脫衣器

AI Hentai Generator

AI Hentai Generator

免費產生 AI 無盡。

熱門文章

R.E.P.O.能量晶體解釋及其做什麼(黃色晶體)
2 週前By尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.最佳圖形設置
2 週前By尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.如果您聽不到任何人,如何修復音頻
3 週前By尊渡假赌尊渡假赌尊渡假赌

熱工具

EditPlus 中文破解版

EditPlus 中文破解版

體積小,語法高亮,不支援程式碼提示功能

VSCode Windows 64位元 下載

VSCode Windows 64位元 下載

微軟推出的免費、功能強大的一款IDE編輯器

Dreamweaver Mac版

Dreamweaver Mac版

視覺化網頁開發工具

MinGW - Minimalist GNU for Windows

MinGW - Minimalist GNU for Windows

這個專案正在遷移到osdn.net/projects/mingw的過程中,你可以繼續在那裡關注我們。 MinGW:GNU編譯器集合(GCC)的本機Windows移植版本,可自由分發的導入函式庫和用於建置本機Windows應用程式的頭檔;包括對MSVC執行時間的擴展,以支援C99功能。 MinGW的所有軟體都可以在64位元Windows平台上運作。

PhpStorm Mac 版本

PhpStorm Mac 版本

最新(2018.2.1 )專業的PHP整合開發工具