javascript装饰器模式 --- 2022-11-21

/**
 * 概念：装饰者模式
 * 在不改变原对象的基础上，通过对其进行包装拓展(添加属性或者方法)使原有对象可以满足用户对更复杂需求
 */

// 1、为输入框增加新需求
// 原来代码
// 输入框元素
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() {
            // 事件源原有回调函数
            oldClickFn();
            // 执行事件源新增回调函数
        }
    } else {
        // 事件源未绑定事件，直接为事件源添加新增回调函数
        input.onclick = fn;
    }
}


// 用例
// 电话输入框功能装饰
decorator('tel_input', function() {
    document.getElementById('tel_demo_text').style.display = 'none';
})

// 姓名输入框功能装饰
decorator('name_input', function() {
    document.getElementById('name_demo_text').style.display = 'none';
})

// 地址输入框装饰
decorator('address_input', function() {
    document.getElementById('address_demo_text').style.display = 'none';
})

// end