什麼是裝飾器?這篇文章帶大家了解裝飾器,簡單介紹一下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到函数、类或者对象上即可。
裝飾器的目的旨在對程式碼進行重複使用。下面我們先來一個小例子看看
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
元件會提示使用者取消了操作。
我們在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中文網其他相關文章!

本篇文章带大家聊聊vue指令中的修饰符,对比一下vue中的指令修饰符和dom事件中的event对象,介绍一下常用的事件修饰符,希望对大家有所帮助!

如何覆盖组件库样式?下面本篇文章给大家介绍一下React和Vue项目中优雅地覆盖组件库样式的方法,希望对大家有所帮助!

这是我们手把手教你实现 Python 定时器的第三篇文章。前两篇:分别是手把手教你实现一个 Python 计时器,和用上下文管理器扩展 Python 计时器,使得我们的 Timer 类方便用、美观实用。但我们并不满足于此,仍然有一个用例可以进一步简化它。假设我们需要跟踪代码库中一个给定函数所花费的时间。使用上下文管理器,基本上有两种不同的选择:1. 每次调用函数时使用 Timer:with Timer("some_name"): do_something()当我们在一

Python中的装饰器和上下文管理器是如何工作的?在Python中,装饰器和上下文管理器是两个非常有用的概念和功能。它们都是为了简化代码、增加代码可读性以及方便代码的重用。一、装饰器装饰器是Python中一种用于修改函数的行为的特殊函数。它允许我们在不修改原始函数的情况下对其进行包装或拓展。装饰器在许多Python的框架和库中被广泛使用,比如Flask、Dj

react与vue的虚拟dom没有区别;react和vue的虚拟dom都是用js对象来模拟真实DOM,用虚拟DOM的diff来最小化更新真实DOM,可以减小不必要的性能损耗,按颗粒度分为不同的类型比较同层级dom节点,进行增、删、移的操作。


熱AI工具

Undresser.AI Undress
人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover
用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool
免費脫衣圖片

Clothoff.io
AI脫衣器

AI Hentai Generator
免費產生 AI 無盡。

熱門文章

熱工具

EditPlus 中文破解版
體積小,語法高亮,不支援程式碼提示功能

VSCode Windows 64位元 下載
微軟推出的免費、功能強大的一款IDE編輯器

Dreamweaver Mac版
視覺化網頁開發工具

MinGW - Minimalist GNU for Windows
這個專案正在遷移到osdn.net/projects/mingw的過程中,你可以繼續在那裡關注我們。 MinGW:GNU編譯器集合(GCC)的本機Windows移植版本,可自由分發的導入函式庫和用於建置本機Windows應用程式的頭檔;包括對MSVC執行時間的擴展,以支援C99功能。 MinGW的所有軟體都可以在64位元Windows平台上運作。

PhpStorm Mac 版本
最新(2018.2.1 )專業的PHP整合開發工具