裝飾模式:Decorator常被翻譯成"裝飾",我覺得翻譯成"油漆工"更形象點,油漆工(decorator)是用來刷油漆的,那么被刷油漆的對象我們稱decoratee.這兩種實體在Decorator模式中是必須的.

Decorator定義:
動態給一個對象添加一些額外的職責,就象在墻上刷油漆.使用Decorator模式相比用生成子類方式達到功能的擴充顯得更為靈活.

使用Decorator的理由是:這些功能需要由用戶動態決定加入的方式和時機.Decorator提供了"即插即用"的方法,在運行期間決定何時增加何種功能.

[簡易實例]

<script type="text/javascript">var f = function() {alert('原有函數');}var _f = f;f = function() {alert('執行前置包裝函數');_f();alert('執行后置包裝函數');}f(); </script>

[常用實例] ---- 多重onload綁定

<script type="text/javascript"> function addLoadEvent(fn) {var oldEvent = window.onload;if(typeof window.onload != 'function') {window.onload = fn;}else {window.onload = function() {oldEvent();fn();}} } function fn1() {alert('加載一'); } function fn2() {alert('加載二'); } function fn3() {alert('加載三'); } addLoadEvent(fn1); addLoadEvent(fn2); addLoadEvent(fn3); </script>

[擴展實例]

<script type="text/javascript"> // 被刷油漆者 Decoratee = function() {alert('被刷油漆'); } // 刷油漆工 Decorator = {beginList: [], // 前置函數列表endList: [], // 后置函數列表append: function(fn) {this.endList.push(fn);},before: function(fn) {this.beginList.splice(0, 0, fn);},wrap: function(fn/* 要被修飾的函數體 */) {var $ = this, $1 = [], $2 = [];// 包裝前置函數for(var i = 0, len = $.beginList.length; i < len; i++) {$1[i] = $.beginList[i];}// 包裝后置函數for(var i = 0, len = $.endList.length; i < len; i++) {$2[i] = $.endList[i];}try {return function(){for(var i = 0, len = $1.length; i < len; i++) {$1[i]();}if(typeof fn == 'function') fn();for(var i = 0, len = $2.length; i < len; i++) {$2[i]();}}}finally {this.beginList.length = this.endList.length = 0;}} }Decorator.before(function() { alert('刷油漆前先釘木頭') }); Decorator.before(function() { alert('刷油漆前先釘釘子') }); Decorator.append(function() { alert('刷油漆后要晾干') }); Decorator.append(function() { alert('刷油漆后要涂鴉') }); Decorator.wrap(Decoratee)(); // 開始刷油漆 </script>

轉載于:https://www.cnblogs.com/bluedream2009/archive/2010/01/31/1660673.html

總結

以上是生活随笔為你收集整理的javascript装饰者模式的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。