Eine kurze Analyse: Was ist ein Dekorateur? Wie verwende ich Dekorateure in Vue?

Was sind Dekorateure? Dieser Artikel stellt Ihnen Dekorateure vor und stellt kurz vor, wie Sie Dekoratoren in js und vue verwenden. Ich hoffe, er wird Ihnen hilfreich sein!

Ich glaube, dass Sie während der Entwicklung auf die Notwendigkeit einer sekundären Popup-Bestätigung gestoßen sein müssen. Unabhängig davon, ob Sie die sekundäre Popup-Komponente des UI-Frameworks oder Ihre eigene gekapselte Popup-Komponente verwenden. Sie alle können das Problem einer großen Menge wiederholten Codes bei mehrfacher Verwendung nicht vermeiden. Die Anhäufung dieser Codes führt zu einer schlechten Lesbarkeit des Projekts. Auch die Codequalität des Projekts ist sehr schlecht geworden. Wie lösen wir also das Problem doppelter Popup-Codes? Verwenden von Decorators

Was sind Decorators?

Decorator ist eine neue Syntax von ES7. Decorator dekoriert Klassen, Objekte, Methoden und Eigenschaften. Fügen Sie zusätzliches Verhalten hinzu. Laienhaft ausgedrückt: Es handelt sich um eine sekundäre Verpackung eines Codestücks. 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

Die Verwendung von Dekoratoren

Die Verwendungsmethode ist sehr einfach. Wir definieren eine Funktion

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

Der Zweck des Dekorators besteht darin, den Code wiederzuverwenden. Nehmen wir zunächst ein kleines Beispiel.

Verwenden Sie Dekoratoren in js Sie werden feststellen, dass der Code nach der Verwendung von Dekoratoren besser lesbar wird. Dekorateure kümmern sich nicht um die Implementierung Ihres inneren Codes.

Verwenden Sie Dekoratoren in VueWenn Ihr Projekt mit vue-cli erstellt wurde und die Version von vue-cli größer als 2.5 ist, können Sie es ohne Konfiguration verwenden. Wenn Ihr Projekt auch Eslit enthält, müssen Sie die Unterstützung für die dekoratorbezogene Syntaxerkennung in Eslit aktivieren. [Verwandte Empfehlungen: vue.js Video-Tutorial

]

rrreee

Nach dem Hinzufügen dieses Codes eslit Decorator Syntax wird unterstützt.

Normalerweise verwenden wir in Projekten häufig sekundäre Popup-Boxen für Löschvorgänge:

rrreeeDer obige Code in der Bestätigungsmethode führt eine MessageBox-Komponente in element-ui aus, wenn der Benutzer abbricht Die Komponente Message fordert den Benutzer auf, den Vorgang abzubrechen.

Wir dekorieren die test()-Methode mit einem Dekorator

rrreee

Zu diesem Zeitpunkt klickt der Benutzer auf einen Shop, um ihn zu löschen. Der Dekorateur wird funktionieren. Das Popup sieht wie folgt aus:

Wenn ich auf „Abbrechen“ klicke:

Tipps:

Der Benutzer hat den Vorgang abgebrochen. Die geänderte Testmethode wird nicht ausgeführt.

Wenn wir auf OK klicken:

🎜Die Schnittstelle wird aufgerufen und die Meldung erscheint.🎜🎜Zusammenfassung🎜🎜Der Dekorator wird verwendet, um einen Codeabschnitt neu zu packen. Fügen Sie dem Code einige Verhaltensoperationen und Attribute hinzu. Durch den Einsatz von Dekoratoren kann die Codeduplizierung erheblich reduziert werden. Verbessern Sie die Lesbarkeit des Codes. 🎜🎜Abschließend🎜🎜Wenn der Artikel Mängel aufweist, kritisieren Sie ihn bitte und weisen Sie darauf hin. 🎜🎜Weitere Kenntnisse zum Thema Programmierung finden Sie unter: 🎜Einführung in die Programmierung🎜! ! 🎜

Das obige ist der detaillierte Inhalt vonEine kurze Analyse: Was ist ein Dekorateur? Wie verwende ich Dekorateure in Vue?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!