>  기사  >  웹 프론트엔드  >  데코레이터가 무엇인지에 대한 간략한 분석은 무엇입니까? Vue에서 데코레이터를 사용하는 방법은 무엇입니까?

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

青灯夜游
青灯夜游앞으로
2022-01-26 18:06:422853검색

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

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

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

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

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

데코레이터의 사용

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

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

데코레이터를 사용하지 마세요데코레이터가 무엇인지에 대한 간략한 분석은 무엇입니까? Vue에서 데코레이터를 사용하는 방법은 무엇입니까?rrreee이렇게 비교해보면, 데코레이터를 사용한 후에 코드가 더 읽기 쉬워진다는 것을 알게 될 것입니다. 데코레이터는 내부 코드 구현에 관심이 없습니다.

vue에서 데코레이터 사용

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

rrreee

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

rrreee

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

test() 메소드를 데코레이터로 장식합니다데코레이터가 무엇인지에 대한 간략한 분석은 무엇입니까? Vue에서 데코레이터를 사용하는 방법은 무엇입니까?rrreee

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

취소를 클릭하면:

팁:

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

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

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

성명:
이 기사는 juejin.cn에서 복제됩니다. 침해가 있는 경우 admin@php.cn으로 문의하시기 바랍니다. 삭제