文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

Vue中怎么使用装饰器

2023-06-28 23:55

关注

本篇内容介绍了“Vue中怎么使用装饰器”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!

什么是装饰器?

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-uiimport { MessageBox, Message } from 'element-ui'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

一些常用的装饰器

下面小编罗列了几个小编在项目中常用的几个装饰器,方便大家使用

1. 函数节流与防抖

函数节流与防抖应用场景是比较广的,一般使用时候会通过throttle或debounce方法对要调用的函数进行包装,现在就可以使用上文说的内容将这两个函数封装成装饰器, 防抖节流使用的是lodash提供的方法,大家也可以自行实现节流防抖函数哦

import { throttle, debounce } from 'lodash'export const throttle =  function(wait, options = {}) {  return function(target, name, descriptor) {    descriptor.value = throttle(descriptor.value, wait, options)  }}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'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'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中怎么使用装饰器”的内容就介绍到这里了,感谢大家的阅读。如果想了解更多行业相关的知识可以关注编程网网站,小编将为大家输出更多高质量的实用文章!

阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-后端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯