js设计模式之装饰者模式

装饰着模式：对原有对象进行包装，不改变原有对象的基础上，满足新的需求。
应用场景：比如现在有用户输入表单，电话输入框，地址输入框等等，新需求是默认输入框显示一行提示文案，用户点击输入框时文案消失。

var input=docuemnt.getElementById('tel-input);//输入框元素
var warnText=docuemnt.getElementById('tel-warn);//输入提示文案
input.onclick=function(){
    warnText.style.display="inline-block";
    ……
}

利用装饰者模式，原有的功能不会改变，添加新的需求。

var decorator=function(input,fn){
    var input=document.getElementById(input);
    if(typeof input.onclick ==='function'){
        var oldClickFn=input.onclick;//缓存原有回调函数
        input.onclick=function(){
            oldClickFn();
            fn();
            }
         }else {
             input.onclick=fn;
             }
    这样凡是具有该需求的地方都可以用：
    //地址输入框
decorator('address_input',function(){
    document..getElementById('demo_text').style.display='none'})