데코레이터란 무엇인가요? 이번 글에서는 데코레이터에 대해 소개하고, 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到函数、类或者对象上即可。装饰器的目的旨在对代码进行复用。下面我们先来一个小例子看看
//定义一个装饰器
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-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('操作成功!')
}
}데코레이터의 목적은 코드를 재사용하는 것입니다. 먼저 작은 예를 들어보겠습니다
rrreee
rrreee이렇게 비교해보면, 데코레이터를 사용한 후에 코드가 더 읽기 쉬워진다는 것을 알게 될 것입니다. 데코레이터는 내부 코드 구현에 관심이 없습니다. 프로젝트가 vue-cli로 빌드되고 vue-cli 버전이 2.5 이상인 경우 아무런 구성 없이 사용할 수 있습니다. 프로젝트에 eslit도 포함되어 있는 경우 eslit에서 데코레이터 관련 구문 감지 지원을 활성화해야 합니다. [관련 권장 사항: vue.js 비디오 튜토리얼
]
이 코드를 추가한 후 eslit Decorator 구문이 지원됩니다. 보통 프로젝트에서는 삭제 작업을 위해 보조 팝업 상자를 사용하는 경우가 많습니다.
rrreee위의 확인 메소드 코드는 사용자가 를 취소할 때 element-ui의 <code>MessageBox 구성 요소를 실행합니다. 메시지 구성 요소는 사용자에게 작업을 취소하라는 메시지를 표시합니다.
test() 메소드를 데코레이터로 장식합니다
rrreee
취소를 클릭하면:
팁:사용자가 작업을 취소하면 수정된 테스트 방법이 실행되지 않습니다.
확인을 클릭하면: 🎜🎜🎜🎜🎜인터페이스가 호출되고 메시지가 나타납니다.🎜🎜요약🎜🎜데코레이터는 코드 조각을 다시 패키지하는 데 사용됩니다. 일부 동작 작업과 속성을 코드에 추가합니다. 데코레이터를 사용하면 코드 중복을 크게 줄일 수 있습니다. 코드 가독성을 향상시킵니다. 🎜🎜마지막으로🎜🎜글에 부족한 점이 있다면 비판과 지적 부탁드립니다. 🎜🎜더 많은 프로그래밍 관련 지식을 보려면 🎜프로그래밍 소개🎜를 방문하세요! ! 🎜위 내용은 데코레이터가 무엇인지에 대한 간략한 분석은 무엇입니까? Vue에서 데코레이터를 사용하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
