JS設計模式之裝飾者模式

標籤：電話   ora   inline   str   document   ==   接下來   war   cti   

裝飾者模式概述

　　在不改變原對象的基礎上，通過對其進行封裝拓展（添加屬性或者方法）使原有對象可以滿足使用者更複雜的需求

實際需求

　　在已有的代碼基礎上，為每個表單中的input預設輸入框上邊顯示一行提示文案，當使用者點擊輸入框時文案消失

原有代碼：

var telInput = document.getElementById(‘tel_input‘);var telWarnText = document.getElementById(‘tel_warn_text‘);input.onclick = function(){  telWarnText.style.display = ‘inline-block‘;  }

第一次改進後的代碼：

var telInput = document.getElementById(‘tel_input‘);var telWarnText = document.getElementById(‘tel_warn_text‘);var telDemoText = document.getElementById(‘tel_demo_text‘);input.onclick = function(){  telWarnText.style.display = ‘inline-block‘;    telDemoText.style.display = ‘none‘;  }

第一次改進後產生的問題： 

其他頁面的表單中還存在不同輸入框，比如：姓名、地址等等，我們修改一處地方容易，可每一處代碼對應的地方都需要手動一個一個地修改，那麼有沒有更好的改善方式呢？

第二次改進：使用裝飾者模式

var decorator = function(input, fn) {    // 擷取事件來源    var input = document.getElementById(input);    // 若事件來源已綁定事件    if(typeof input.onclick === ‘function‘) {        // 緩衝事件來源原有回呼函數        var oldClickFn = input.onclick;        // 為事件來源定義新的事件        input.onclick = function() {            // 事件來源原有回呼函數            oldClcikFn();            // 執行事件來源新增回呼函數            fn();        }    }else{        // 事件來源未綁定事件，直接為事件來源添加新增回呼函數        input.onclick = fn;    }}

接下來我們可以這樣添加新功能了：

// 電話輸入框功能裝飾decorator(‘tel_input‘, function(){    document.getElementById(‘tel_demo_text‘).style.display = ‘none‘;})// 姓名輸入框功能裝飾decorator(‘name_input‘, function(){    document.getElementById(‘tel_demo_text‘).style.display = ‘none‘;})

說明：使用裝飾者模式，我們不需再過度關注對象原有的功能，並且對象原有的方法照樣可以原封不動地使用。

　　

JS設計模式之裝飾者模式