JS设计模式之装饰者模式

Posted 2020-09-30 奔跑的蜗牛

装饰者模式概述

　　在不改变原对象的基础上，通过对其进行包装拓展（添加属性或者方法）使原有对象可以满足用户更复杂的需求

实际需求

　　在已有的代码基础上，为每个表单中的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‘;
})

说明：使用装饰者模式，我们不需再过度关注对象原有的功能，并且对象原有的方法照样可以原封不动地使用。