JavaScript裝飾器函數(shù)(Decorator)實(shí)例詳解
本文實(shí)例講述了JavaScript裝飾器函數(shù)(Decorator)。分享給大家供大家參考,具體如下:
裝飾器函數(shù)(Decorator)用于給對(duì)象在運(yùn)行期間動(dòng)態(tài)的增加某個(gè)功能,職責(zé)等。相較通過繼承的方式來擴(kuò)充對(duì)象的功能,裝飾器顯得更加靈活,首先,我們可以動(dòng)態(tài)給對(duì)象選定某個(gè)裝飾器,而不用hardcore繼承對(duì)象來實(shí)現(xiàn)某個(gè)功能點(diǎn)。其次:繼承的方式可能會(huì)導(dǎo)致子類繁多,僅僅為了增加某一個(gè)單一的功能點(diǎn),顯得有些多余了。
下面給出幾個(gè)常用的裝飾器函數(shù)示例,相關(guān)代碼請(qǐng)查看github。
1 動(dòng)態(tài)添加onload監(jiān)聽函數(shù)
function addLoadEvent(fn) { var oldEvent = window.onload; if(typeof window.onload != 'function') { window.onload = fn; }else { window.onload = function() { oldEvent(); fn(); }; } } function fn1() { console.log('onloadFunc 1'); } function fn2() { console.log('onloadFunc 2'); } function fn3() { console.log('onloadFunc 3'); } addLoadEvent(fn1); addLoadEvent(fn2); addLoadEvent(fn3);
2 前置執(zhí)行函數(shù)和后置執(zhí)行函數(shù)
Function.prototype.before = function(beforfunc) { var self = this; var outerArgs = Array.prototype.slice.call(arguments, 1); return function() { var innerArgs = Array.prototype.slice.call(arguments); beforfunc.apply(this, innerArgs); self.apply(this, outerArgs); }; }; Function.prototype.after = function(afterfunc) { var self = this; var outerArgs = Array.prototype.slice.call(arguments, 1); return function() { var innerArgs = Array.prototype.slice.call(arguments); self.apply(this, outerArgs); afterfunc.apply(this, innerArgs); }; }; var func = function(name){ console.log('I am ' + name); }; var beforefunc = function(age){ console.log('I am ' + age + ' years old'); }; var afterfunc = function(gender){ console.log('I am a ' + gender); }; var beforeFunc = func.before(beforefunc, 'Andy'); var afterFunc = func.after(afterfunc, 'Andy'); beforeFunc('12'); afterFunc('boy');
執(zhí)行結(jié)果,控制臺(tái)打印如下:
I am 12 years old I am Andy I am Andy I am a boy
3 函數(shù)執(zhí)行時(shí)間計(jì)算
function log(func){ return function(...args){ const start = Date.now(); let result = func(...args); const used = Date.now() - start; console.log(`call ${func.name} (${args}) used ${used} ms.`); return result; }; } function calculate(times){ let sum = 0; let i = 1; while(i < times){ sum += i; i++; } return sum; } runCalculate = log(calculate); let result = runCalculate(100000); console.log(result);
注:這里我使用了ES2015(ES6)語法,如果你感興趣可以查看前面關(guān)于ES6的相關(guān)內(nèi)容。
當(dāng)然,裝飾器函數(shù)不僅僅這些用法。天貓使用的Nodejs框架Koa就基于裝飾器函數(shù)及ES2015的Generator。希望這篇文章能起到拋磚引玉的作用,使你編寫更優(yōu)雅的JS代碼。
更多關(guān)于JavaScript相關(guān)內(nèi)容可查看本站專題:《javascript面向?qū)ο笕腴T教程》、《JavaScript中json操作技巧總結(jié)》、《JavaScript切換特效與技巧總結(jié)》、《JavaScript查找算法技巧總結(jié)》、《JavaScript動(dòng)畫特效與技巧匯總》、《JavaScript錯(cuò)誤與調(diào)試技巧總結(jié)》、《JavaScript數(shù)據(jù)結(jié)構(gòu)與算法技巧總結(jié)》、《JavaScript遍歷算法與技巧總結(jié)》及《JavaScript數(shù)學(xué)運(yùn)算用法總結(jié)》
希望本文所述對(duì)大家JavaScript程序設(shè)計(jì)有所幫助。
相關(guān)文章
基于HTML+JS實(shí)現(xiàn)簡(jiǎn)單的年齡計(jì)算器
JavaScript提供了一些內(nèi)置的日期和時(shí)間函數(shù),有助于從日期(出生日期)開始計(jì)算年齡。本文主要介紹了使用這些JavaScript方法,制作一個(gè)簡(jiǎn)單的年齡計(jì)算器,快來跟隨小編一起學(xué)習(xí)學(xué)習(xí)吧2021-12-12JavaScript中的isXX系列是否繼續(xù)使用的分析
我們很容易被漂亮的代碼吸引,也不知不覺的在自己的代碼庫中加入這些。卻沒有冷靜的想過它們的優(yōu)劣。這不,我就收集了一系列形如 “是否為……?” 的判斷的boolean函數(shù)。2011-04-04jquery動(dòng)態(tài)添加刪除div 具體實(shí)現(xiàn)
這篇文章介紹了jquery動(dòng)態(tài)添加刪除div實(shí)現(xiàn)代碼,有需要的朋友可以參考一下2013-07-07JS遍歷樹層級(jí)關(guān)系實(shí)現(xiàn)原理解析
這篇文章主要介紹了JS遍歷樹層級(jí)關(guān)系實(shí)現(xiàn)原理解析,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-08-08div+css布局的圖片連續(xù)滾動(dòng)js實(shí)現(xiàn)代碼
整理一個(gè)div+css圖片連續(xù)滾動(dòng)代碼,原理跟腳本之家之前發(fā)布的文章一樣。2010-05-05JS實(shí)現(xiàn)的點(diǎn)擊按鈕圖片上下滾動(dòng)效果示例
這篇文章主要介紹了JS實(shí)現(xiàn)的點(diǎn)擊按鈕圖片上下滾動(dòng)效果,涉及javascript事件響應(yīng)及頁面元素屬性動(dòng)態(tài)操作相關(guān)實(shí)現(xiàn)技巧,需要的朋友可以參考下2019-01-01JS組件中bootstrap multiselect兩大組件較量
這篇文章主要介紹了JS組件中bootstrap multiselect兩大組件,兩者之間的較量,優(yōu)缺點(diǎn)比較,感興趣的小伙伴們可以參考一下2016-01-01