Maison  >  Article  >  interface Web  >  Une brève analyse de ce qu'est un décorateur ? Comment utiliser les décorateurs dans Vue ?

Une brève analyse de ce qu'est un décorateur ? Comment utiliser les décorateurs dans Vue ?

青灯夜游
青灯夜游avant
2022-01-26 18:06:422853parcourir

Que sont les décorateurs ? Cet article vous amènera à comprendre les décorateurs et à vous présenter brièvement comment utiliser les décorateurs dans js et vue. J'espère qu'il vous sera utile !

Une brève analyse de ce qu'est un décorateur ? Comment utiliser les décorateurs dans Vue ?

Je pense que vous devez avoir rencontré le besoin d'une confirmation contextuelle secondaire pendant le développement. Que vous utilisiez le composant contextuel secondaire du framework d'interface utilisateur ou votre propre composant contextuel encapsulé. Tous ne peuvent pas éviter le problème d’une grande quantité de code répété lorsqu’il est utilisé plusieurs fois. L'accumulation de ces codes se traduit par une mauvaise lisibilité du projet. La qualité du code du projet est également devenue très mauvaise. Alors, comment résoudre le problème des codes pop-up en double ? Utiliser Décorateurs

Que sont les décorateurs ?

Decorator est une nouvelle syntaxe de ES7. Decorator décore les classes, les objets, les méthodes et les propriétés. Ajoutez-y un comportement supplémentaire. En termes simples : il s’agit d’un emballage secondaire d’un morceau de code. 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

L'utilisation du décorateur

La méthode d'utilisation est très simple Nous définissons une fonction

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

Le but du décorateur est de réutiliser le code. Prenons d'abord un petit exemple

Utilisez des décorateurs dans js

rrreee

N'utilisez pas de décorateursUne brève analyse de ce quest un décorateur ? Comment utiliser les décorateurs dans Vue ?rrreeeDe cette façon, par comparaison, vous constatera que le code devient plus lisible après avoir utilisé des décorateurs. Les décorateurs ne se soucient pas de la mise en œuvre de votre code interne.

Utiliser des décorateurs dans vue

Si votre projet est construit avec vue-cli et que la version de vue-cli est supérieure à 2.5, vous pouvez l'utiliser sans aucune configuration. Si votre projet contient également eslit, vous devez alors activer la prise en charge de la détection de syntaxe liée au décorateur dans eslit. [Recommandations associées : tutoriel vidéo vue.jsUne brève analyse de ce quest un décorateur ? Comment utiliser les décorateurs dans Vue ?]

rrreee

Après avoir ajouté ce code, eslit Decorator la syntaxe est prise en charge. Habituellement, dans les projets, nous utilisons souvent des boîtes contextuelles secondaires pour les opérations de suppression :

rrreee

Le code ci-dessus dans la méthode de confirmation exécute un composant MessageBox dans element-ui lorsque l'utilisateur annule Le Le composant Message invitera l'utilisateur à annuler l'opération.

On décore la méthode test() avec un décorateurUne brève analyse de ce quest un décorateur ? Comment utiliser les décorateurs dans Vue ?rrreee

A ce moment, l'utilisateur clique sur une boutique pour la supprimer. Le décorateur travaillera. La fenêtre contextuelle est la suivante :

Lorsque je clique sur Annuler :

conseils :

L'utilisateur a annulé l'opération. La méthode de test modifiée ne sera pas exécutée.

Quand on clique sur OK : 🎜🎜🎜🎜🎜L'interface est appelée et le message apparaît🎜🎜Résumé🎜🎜Le décorateur est utilisé pour re-empaqueter un morceau de code. Ajoutez quelques opérations comportementales et attributs au code. L'utilisation de décorateurs peut réduire considérablement la duplication de code. Améliorer la lisibilité du code. 🎜🎜Enfin🎜🎜S'il y a des lacunes dans l'article, veuillez le critiquer et le signaler. 🎜🎜Pour plus de connaissances sur la programmation, veuillez visiter : 🎜Introduction à la programmation🎜 ! ! 🎜

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration:
Cet article est reproduit dans:. en cas de violation, veuillez contacter admin@php.cn Supprimer