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

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 !

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. 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中开启支持装饰器相关的语法检测。【相关推荐：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écorateursrrreeeDe 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.js]

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écorateurrrreee

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!