데코레이터란 무엇인가요? 이번 글에서는 데코레이터에 대해 소개하고, 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
프로젝트가 vue-cli로 빌드되고 vue-cli 버전이 2.5 이상인 경우 아무런 구성 없이 사용할 수 있습니다. 프로젝트에 eslit도 포함되어 있는 경우 eslit에서 데코레이터 관련 구문 감지 지원을 활성화해야 합니다. [관련 권장 사항: vue.js 비디오 튜토리얼]
rrreee이 코드를 추가한 후 eslit Decorator 구문이 지원됩니다. 보통 프로젝트에서는 삭제 작업을 위해 보조 팝업 상자를 사용하는 경우가 많습니다.
rrreee위의 확인 메소드 코드는 사용자가 를 취소할 때 element-ui의 <code>MessageBox
구성 요소를 실행합니다. 메시지 구성 요소는 사용자에게 작업을 취소하라는 메시지를 표시합니다.
test() 메소드를 데코레이터로 장식합니다rrreee
이때 사용자는 스토어를 삭제하기 위해 클릭합니다. 데코레이터가 작동합니다. 팝업은 아래와 같습니다.취소를 클릭하면:
팁:사용자가 작업을 취소하면 수정된 테스트 방법이 실행되지 않습니다.
확인을 클릭하면: 🎜🎜🎜🎜🎜인터페이스가 호출되고 메시지가 나타납니다.🎜🎜요약🎜🎜데코레이터는 코드 조각을 다시 패키지하는 데 사용됩니다. 일부 동작 작업과 속성을 코드에 추가합니다. 데코레이터를 사용하면 코드 중복을 크게 줄일 수 있습니다. 코드 가독성을 향상시킵니다. 🎜🎜마지막으로🎜🎜글에 부족한 점이 있다면 비판과 지적 부탁드립니다. 🎜🎜더 많은 프로그래밍 관련 지식을 보려면 🎜프로그래밍 소개🎜를 방문하세요! ! 🎜위 내용은 데코레이터가 무엇인지에 대한 간략한 분석은 무엇입니까? Vue에서 데코레이터를 사용하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!