装饰者模式

装饰者模式：在不改变对象的基础上，通过对齐进行包装扩展（添加属性或者方法）使原有对象可以满足用户的梗复杂需求。

装饰者模式是对原有功能的一中增强与扩展，不需要了解原有功能的基础上对功能扩展，只是在外部进行一次性封装扩展，这是对原有功能完整性的一种保护。
与适配器模式不同的是，适配器模式进行扩展基本是对对象内部结构的重组，需要了解原有功能。

需求1：
旧需求：以前是当用户点击输入框时，如果如输入输入的内容有限制，那么其后面显示用户输入内容的限制格式的提示文案。
新需求：现在多加一条，默认输入框上班显示一行提示文案，当用户点击输入框时文案消失。

旧代码

//输入框元素
const telInput = document.querySelector('#tel_input');
//输入格式提示文案
const telWarnText = document.querySelector('#tel_warn_text');
//点击输入框显示输入框格式提示文案
input.onclick = function(){
    telWarnText.style.display = 'inline-block';
}

新代码

//输入框元素
const telInput = document.querySelector('#tel_input');
//输入框输入格式提示文案
const telWarnText = document.querySelector('#tel_warn_text');
//输入框提示输入文案
const telTipText = document.querySelector('#tel_tip_text');
//点击输入框显示输入框格式提示文案
input.onclick = function(){
    telWarnText.style.display = 'inline-block';
    telTipText.style.display = 'none';
}

问题1：修改了一个电话输入框，还有姓名输入框，地址输入框等等。难道要找出代码一个个去修改？
优化1：装饰者模式(在原有的功能的基础上，添加一些功能来满足用户提出的需求)

//装饰者
const decorator = function(input,fn){
    //获取事件源
    const input = document.querySelector(input);
    //已绑定过事件
    if(typeof input.onlick = 'function'){
        //缓存事件源原有回调函数
        const oldClickFn = input.onclick;
        //为事件源定以新的事件
        input.onclick = funciton(){
            //事件源原有回调函数
            oldClickFn();
            //执行时间源新增回调函数
            fn();
        }
    }else{
        //事件源未绑定事件，直接为事件添加回调函数
        input.onclick = fn
    }
    //todo other
}

装饰者函数不仅可以对绑定过事件的输入框添加新的功能，未绑定过事件的输入框同样可以

//电话输入框功能装饰
decorator('tel_input',()=>{
    document.querySelector(`#tel_tip_text`).style.display = 'none'
})
//姓名输入框功能装饰
decorator('name_input',()=>{
    document.querySelector(`#name_tip_text`).style.display = 'none'
})
//地址输入框功能装饰
decorator('adress_input',()=>{
    document.querySelector(`#adress_tip_text`).style.display = 'none'
})

通过使用装饰者对象方法，物流输入框是否绑定过事件，都可以完成增加隐藏提示信息的需求。
装饰者就是对原有对象的属性和方法的添加。

与适配器模式不同的是，适配器方法是对原有对象适配，添加的方法与原有方法功能上大致相似。
但是装饰者提供的方法与原来的方法功能项是有一定区别的。
再有，使用适配器是新增的方法是要调用原来的方法的。
在装饰者模式中，不需要了解对象原有功能，摈弃对对象原有的方法可以原封不动地使用。