什麼是裝飾器？這篇文章帶大家了解裝飾器，簡單介紹一下js、vue中使用裝飾器的方法，希望對大家有幫助！
相信各位在開發上一定遇過二次彈框確認相關的需求。不管你使用的是UI框架的二次彈框組件,還是自己封裝的彈框組件。都避免不了在多次使用時出現大量重複程式碼的問題。這些程式碼的累積導致項目的可讀性差。專案的程式碼品質也變得很差。那我們要如何解決二次彈框程式碼重複的問題呢？使用裝飾器
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元件會提示使用者取消了操作。
我們在test()方法上用裝飾器修飾一下
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('操作成功!')
}
}此時使用者點擊某個門市進行刪除。裝飾器將會起作用。彈出如下圖所示:
當我點擊取消時:
tips: 用戶取消了操作.被修飾的test方法不會執行。
當我們點擊確定時:
介面被呼叫了並且彈出了message
#裝飾器用於將一段程式碼進行二次包裝。給程式碼增加一些行為操作和屬性。使用裝飾器能大幅減少程式碼的重複。增強程式碼可讀性。
文章若有不足之處，也請大家批評指出。
更多程式相關知識，請造訪：程式設計入門！ ！
以上是淺析什麼是裝飾器？ Vue中怎麼使用裝飾器？的詳細內容。更多資訊請關注PHP中文網其他相關文章！
