JavaScript裝飾器函數(shù)(Decorator)實例詳解
本文實例講述了JavaScript裝飾器函數(shù)(Decorator)。分享給大家供大家參考,具體如下:
裝飾器函數(shù)(Decorator)用于給對象在運行期間動態(tài)的增加某個功能,職責等。相較通過繼承的方式來擴充對象的功能,裝飾器顯得更加靈活,首先,我們可以動態(tài)給對象選定某個裝飾器,而不用hardcore繼承對象來實現(xiàn)某個功能點。其次:繼承的方式可能會導致子類繁多,僅僅為了增加某一個單一的功能點,顯得有些多余了。
下面給出幾個常用的裝飾器函數(shù)示例,相關代碼請查看github。
1 動態(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í)行結果,控制臺打印如下:
I am 12 years old I am Andy I am Andy I am a boy
3 函數(shù)執(zhí)行時間計算
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)語法,如果你感興趣可以查看前面關于ES6的相關內(nèi)容。
當然,裝飾器函數(shù)不僅僅這些用法。天貓使用的Nodejs框架Koa就基于裝飾器函數(shù)及ES2015的Generator。希望這篇文章能起到拋磚引玉的作用,使你編寫更優(yōu)雅的JS代碼。
更多關于JavaScript相關內(nèi)容可查看本站專題:《javascript面向對象入門教程》、《JavaScript中json操作技巧總結》、《JavaScript切換特效與技巧總結》、《JavaScript查找算法技巧總結》、《JavaScript動畫特效與技巧匯總》、《JavaScript錯誤與調(diào)試技巧總結》、《JavaScript數(shù)據(jù)結構與算法技巧總結》、《JavaScript遍歷算法與技巧總結》及《JavaScript數(shù)學運算用法總結》
希望本文所述對大家JavaScript程序設計有所幫助。
相關文章
JavaScript中的isXX系列是否繼續(xù)使用的分析
我們很容易被漂亮的代碼吸引,也不知不覺的在自己的代碼庫中加入這些。卻沒有冷靜的想過它們的優(yōu)劣。這不,我就收集了一系列形如 “是否為……?” 的判斷的boolean函數(shù)。2011-04-04jquery動態(tài)添加刪除div 具體實現(xiàn)
這篇文章介紹了jquery動態(tài)添加刪除div實現(xiàn)代碼,有需要的朋友可以參考一下2013-07-07div+css布局的圖片連續(xù)滾動js實現(xiàn)代碼
整理一個div+css圖片連續(xù)滾動代碼,原理跟腳本之家之前發(fā)布的文章一樣。2010-05-05JS組件中bootstrap multiselect兩大組件較量
這篇文章主要介紹了JS組件中bootstrap multiselect兩大組件,兩者之間的較量,優(yōu)缺點比較,感興趣的小伙伴們可以參考一下2016-01-01