javascript-装饰者模式

装饰者模式笔记
 在不改变原对象的基础上，
 通过对其进行包装拓展（添加属性或方法）使原有对象可以满足用户的更复杂要求。
 需求不是一成不变的，需求会不断改进，以增强用户体验
 demo实例：对输入框添加focus与blur事件
 这个实例中，输入框只有一两个时，新添需求不觉得麻烦，当有许多输入框都要新添需求时，实现会很麻烦，而使用装饰者模式却能很简单完成

html代码

        <style>
            #container{width: 800px;margin:100px auto;}
            input{margin-right:5px;}
            span{font-size: 12px;color:#999;}
        </style>
        <div id="container">
            <input name="uname" id="uname" value="" placeholder="请输入用户名"/><span id="uname_demo_text">用户名以字母开头，由字母、数字、下划线组成，长度3-16位</span><span id="uname_warn_text"></span><br/><br/>
            <input name="phone" id="phone" value="" placeholder="请输入手机号码"/><span id="phone_demo_text">手机号码以13、14、15、18开头，由数字组成，长度11位</span><span id="phone_warn_text"></span>
        </div>

原有事件功能

            var uname=document.getElementById("uname");
            var phone=document.getElementById("phone");
            var unameDemoText=document.getElementById("uname_demo_text");
            var unameWarnText=document.getElementById("uname_warn_text");
            var phoneDemoText=document.getElementById("phone_demo_text");
            var phoneWarnText=document.getElementById("phone_warn_text");
            uname.onblur = function(){
                var nameValid=/^[a-zA-Z][a-zA-Z0-9_]{5,17}$/i;
                if(!nameValid.test(uname.value)){
                    unameWarnText.innerHTML="用户名不符合填写规则";
                }else{
                    unameWarnText.innerHTML="用户名符合填写规则";
                }
            }
            phone.onblur = function(){
                var phoneValid=/^1(3|4|5|8)\d{9}$/i;
                if(!phoneValid.test(phone.value)){
                    phoneWarnText.innerHTML="手机号码不符合填写规则";
                }else{
                    phoneWarnText.innerHTML="手机号码符合填写规则";
                }
            }

装饰者

            /*装饰者*/
            var decorator=function(input,focusFn,blurFn){
                //获取事件源
                var input=document.getElementById(input);
                //判断事件源是否绑定focus事件
                if(typeof input.onfocus === 'function'){
                    //缓存事件源原有回调函数
                    var oldFocusFn = input.onfocus;
                    //为事件源定义新的事件
                    input.onfocus = function(){
                        //事件源原有回调函数
                        oldFocusFn();
                        //新增回调函数
                        focusFn();
                    }
                }else{
                    //事件源未绑定事件，直接为事件源添加新增回调函数
                    input.onfocus = focusFn;
                }
                //判断事件源是否绑定blur事件
                if(typeof input.onblur === 'function'){
                    //缓存事件源原有回调函数
                    var oldBlurFn = input.onblur;
                    //为事件源定义新的事件
                    input.onblur = function(){
                        oldBlurFn();
                        blurFn();
                    }
                }else{
                    //事件源未绑定事件，直接为事件源添加新增回调函数
                    input.onblur = blurFn;
                }
            }

新增回调函数

           decorator('uname',function(){
                //新增focus回调函数
                unameDemoText.style.display="none";
            },function(){
                //新增blur回调函数
                unameWarnText.style.color="#f03";
            });
            decorator('phone',function(){
                //新增focus回调函数
                phoneDemoText.style.display="none";
            },function(){
                //新增blur回调函数
                phoneWarnText.style.color="#f03";
            });

代码测试：

 优化装饰者方法

        /*优化装饰者方法*/
        var decorator = function(id,type,fn){
            var dom = typeof id === 'string' ? document.getElementById(id) : id;
            //判断事件源是否绑定事件
            if(typeof dom[type] === 'function'){
                //缓存事件源原有回调函数
                var oldFn = dom[type];
                //为事件源定义新的事件
                dom[type] = function(){
                  //事件源原有回调函数
                  oldFn();
                  //新增回调函数
                  fn();
                }
            }else{
                //事件源未绑定事件，直接为事件源添加新增回调函数
                dom[type] = fn;
            }
        
        };

调用装饰者方法

 1            decorator('uname','onfocus',function(){
                //新增focus回调函数
                unameDemoText.style.display="none";
            });
            decorator('uname','onblur',function(){
                //新增focus回调函数
                unameWarnText.style.color="#f03";
            });
            decorator('phone','onfocus',function(){
                //新增focus回调函数
                phoneDemoText.style.display="none";
            });
           decorator('phone','onblur',function(){
                //新增focus回调函数
                phoneWarnText.style.color="#f03";
            });

浏览器显示效果同上