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";
             });

浏览器显示效果同上