溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
javascript中如何實現裝飾者模式，針對這個問題，這篇文章詳細介紹了相對應的分析和解答，希望可以幫助更多想解決這個問題的小伙伴找到更簡單易行的方法。
在js函數開發中，想要為現有函數添加與現有功能無關的新功能時，按普通思路肯定是在現有函數中添加新功能的代碼。這并不能說錯，但因為函數中的這兩塊代碼其實并無關聯，后期維護成本會明顯增大，也會造成函數臃腫。
比較好的辦法就是采用裝飾器模式。在保持現有函數及其內部代碼實現不變的前提下，將新功能函數分離開來，然后將其通過與現有函數包裝起來一起執行。
先來看個比較原始的js版裝飾器模式實現：
var Plane = function(){}Plane.prototype.fire = function(){ console.log('發射普通子彈');}//增加兩個裝飾類，導彈類和原子彈類var MissileDecorator = function(plane){ this.plane = plane;}MissileDecorator.prototype.fire = function(){ this.plane.fire(); console.log('發射導彈');}var AtomDecorator = function(plane){ this.plane = plane;}AtomDecorator.prototype.fire = function(){ this.plane.fire(); console.log('發射原子彈');}var plane = new Plane();console.log(plane);plane = new MissileDecorator(plane);console.log(plane);plane = new AtomDecorator(plane);console.log(plane);plane.fire();/*發射普通子彈發射導彈發射原子彈*/
升級版裝飾器模式，通過為js的Function構造函數添加實例方法before和after來實現。
Function.prototype.before和Function.prototype.after接收一個函數作為參數，這個函數就是新添加的函數，它裝載了新添加的功能代碼。
接下來把當前的this保存起來，這個this指向原函數(Function是js中所有函數的構造器，所以js中的函數都是Function的實例，Function.prototype中的this就指向該實例函數)
然后返回一個'代理'函數，這個代理函數只是結構上像'代理'而已，并不承擔代理的職責(比如控制對象的訪問)。它的工作就是把請求分別轉發給新添加的函數和原函數，且負責保證它們的執行順序，讓新添加的函數在原函數之前執行(前置裝飾 Function.prototype.before; 后置裝飾 Function.prototype.after)，從而實現動態裝飾的效果。
// AOP 裝飾函數Function.prototype.before = function(beforefn){ var _self = this; //保存原函數的引用 return function(){ //返回包含了原函數和新函數的‘代理'函數 beforefn.apply(this, arguments); //先執行新函數，且保證this不會被劫持，新函數接受的參數也會原封不動的傳入原函數，新函數在原函數之前執行 return _self.apply(this, arguments); //再執行原函數并返回原函數的執行結果，并保證this不被劫持 }}Function.prototype.after = function(afterfn){ var _self = this; //保存原函數的引用 return function(){ //返回包含了原函數和新函數的‘代理'函數 var ret = _self.apply(this, arguments); //先執行原函數并返回原函數的執行結果，并保證this不被劫持，原函數執行的結果會賦值給ret變量，交由'代理'函數最后return afterfn.apply(this, arguments); //再執行新函數，且保證this不會被劫持，新函數接受的參數也會原封不動的傳入原函數，新函數在原函數之前執行 return ret; }}//定義原函數var print = function(){ console.log('打印原函數執行結果');}print = print.before(function(){ console.log('打印前置裝飾函數的執行結果');})print = print.after(function(){ console.log('打印后置裝飾函數的執行結果');})//執行裝飾后的print函數，為原函數print函數添加的裝飾器對用戶來說看起來是透明的print();//打印結果/*打印前置裝飾函數的執行結果打印原函數執行結果打印后置裝飾函數的執行結果*/
上例中的AOP裝飾器是通過在Function.prototype上添加before和after方法實現的，但有時這種直接污染函數原型的方法并不好，可以做些變通，把原函數和新函數都作為參數傳入before和after方法中
var before = function(fn, beforefn){ return function(){ beforefn.apply(this, arguments) return fn.apply(this, arguments) }}var after = function(fn, agterfn){ return function(){ var ret = fn.apply(this, arguments) agterfn.apply(this, arguments) return ret; }}var a = function(){ console.log('原函數執行結果');}a = before(a, function(){ console.log('前置裝飾函數執行結果');})a = after(a, function(){ console.log('后置裝飾函數執行結果');})a()/*前置裝飾函數執行結果原函數執行結果后置裝飾函數執行結果*/
最后再來個裝飾器模式的實例應用。
在實際開發中比較常見的需求是用戶數據上報，一般會在項目開發差不多后，陸續有此類需求提出，但此時如果要在對應函數中添加數據上報功能代碼時，就會改動原有函數，既麻煩又增加開發測試成本。此時最好的就是使用裝飾器模式通過將上報函數裝飾到原有函數上。
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>裝飾者模式應用數據上報</title></head><body> <button type="button" id="btn">點擊登錄并上報數據</button></body><script>var showDialog = function(){ console.log('顯示登錄彈窗');}var log = function(){ console.log('計數上報');}var after = function(fn, afterFn){ return function(){ var ret = fn.apply(this, arguments) afterFn.apply(this, arguments) return ret; }}showDialog = after(showDialog, log)document.getElementById('btn').onclick = showDialog;</script></html>
關于javascript中如何實現裝飾者模式問題的解答就分享到這里了，希望以上內容可以對大家有一定的幫助，如果你還有很多疑惑沒有解開，可以關注億速云行業資訊頻道了解更多相關知識。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
