데코레이터가 무엇인지에 대한 간략한 분석은 무엇입니까? Vue에서 데코레이터를 사용하는 방법은 무엇입니까?

데코레이터란 무엇인가요? 이번 글에서는 데코레이터에 대해 소개하고, js와 vue에서 데코레이터를 사용하는 방법을 간략하게 소개하겠습니다. 도움이 되셨으면 좋겠습니다!

개발 중 2차 팝업 확인이 필요했던 적이 있으실 거라 생각합니다. UI 프레임워크의 보조 팝업 구성 요소를 사용하는지 아니면 자체적으로 캡슐화된 팝업 구성 요소를 사용하는지 여부. 이들 모두 여러 번 사용하면 대량의 코드가 반복되는 문제를 피할 수 없습니다. 이러한 코드가 누적되면 프로젝트의 가독성이 저하됩니다. 프로젝트의 코드 품질도 매우 나빴습니다. 그렇다면 팝업코드 중복 문제는 어떻게 해결할까요? Decorators

사용하기 데코레이터란 무엇인가요?

Decorator는 ES7의 새로운 구문입니다. 데코레이터는 클래스, 개체, 메서드 및 속성을 장식합니다. 여기에 몇 가지 추가 동작을 추가합니다. 일반인의 관점에서 보면 이는 코드 조각의 2차 패키징입니다. 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

데코레이터의 사용

사용 방법은 매우 간단합니다. 함수를 정의합니다

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

데코레이터의 목적은 코드를 재사용하는 것입니다. 먼저 작은 예를 들어보겠습니다

js에서 데코레이터를 사용하세요

rrreee

데코레이터를 사용하지 마세요rrreee이렇게 비교해보면, 데코레이터를 사용한 후에 코드가 더 읽기 쉬워진다는 것을 알게 될 것입니다. 데코레이터는 내부 코드 구현에 관심이 없습니다.

vue에서 데코레이터 사용

프로젝트가 vue-cli로 빌드되고 vue-cli 버전이 2.5 이상인 경우 아무런 구성 없이 사용할 수 있습니다. 프로젝트에 eslit도 포함되어 있는 경우 eslit에서 데코레이터 관련 구문 감지 지원을 활성화해야 합니다. [관련 권장 사항: vue.js 비디오 튜토리얼]

rrreee

이 코드를 추가한 후 eslit Decorator 구문이 지원됩니다. 보통 프로젝트에서는 삭제 작업을 위해 보조 팝업 상자를 사용하는 경우가 많습니다.

rrreee

위의 확인 메소드 코드는 사용자가 를 취소할 때 element-ui의 <code>MessageBox 구성 요소를 실행합니다. 메시지 구성 요소는 사용자에게 작업을 취소하라는 메시지를 표시합니다.

test() 메소드를 데코레이터로 장식합니다rrreee

이때 사용자는 스토어를 삭제하기 위해 클릭합니다. 데코레이터가 작동합니다. 팝업은 아래와 같습니다.

취소를 클릭하면:

팁:

사용자가 작업을 취소하면 수정된 테스트 방법이 실행되지 않습니다.

확인을 클릭하면: 🎜🎜🎜🎜🎜인터페이스가 호출되고 메시지가 나타납니다.🎜🎜요약🎜🎜데코레이터는 코드 조각을 다시 패키지하는 데 사용됩니다. 일부 동작 작업과 속성을 코드에 추가합니다. 데코레이터를 사용하면 코드 중복을 크게 줄일 수 있습니다. 코드 가독성을 향상시킵니다. 🎜🎜마지막으로🎜🎜글에 부족한 점이 있다면 비판과 지적 부탁드립니다. 🎜🎜더 많은 프로그래밍 관련 지식을 보려면 🎜프로그래밍 소개🎜를 방문하세요! ! 🎜

위 내용은 데코레이터가 무엇인지에 대한 간략한 분석은 무엇입니까? Vue에서 데코레이터를 사용하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!