装饰者模式笔记

 在不改变原对象的基础上，

 通过对其进行包装拓展（添加属性或方法）使原有对象可以满足用户的更复杂要求。

 需求不是一成不变的，需求会不断改进，以增强用户体验

 demo实例：对输入框添加focus与blur事件

 这个实例中，输入框只有一两个时，新添需求不觉得麻烦，当有许多输入框都要新添需求时，实现会很麻烦，而使用装饰者模式却能很简单完成

html代码

1         6         
     
      7             
      
      用户名以字母开头，由字母、数字、下划线组成，长度3-16位
      
      
      
8             
      
      手机号码以13、14、15、18开头，由数字组成，长度11位
      9         
     

原有事件功能

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

装饰者

1             /*装饰者*/ 2             var decorator=function(input,focusFn,blurFn){ 3                 //获取事件源 4                 var input=document.getElementById(input); 5                 //判断事件源是否绑定focus事件 6                 if(typeof input.onfocus === 'function'){ 7                     //缓存事件源原有回调函数 8                     var oldFocusFn = input.onfocus; 9                     //为事件源定义新的事件10                     input.onfocus = function(){11                         //事件源原有回调函数12                         oldFocusFn();13                         //新增回调函数14                         focusFn();15                     }16                 }else{17                     //事件源未绑定事件，直接为事件源添加新增回调函数18                     input.onfocus = focusFn;19                 }20                 //判断事件源是否绑定blur事件21                 if(typeof input.onblur === 'function'){22                     //缓存事件源原有回调函数23                     var oldBlurFn = input.onblur;24                     //为事件源定义新的事件25                     input.onblur = function(){26                         oldBlurFn();27                         blurFn();28                     }29                 }else{30                     //事件源未绑定事件，直接为事件源添加新增回调函数31                     input.onblur = blurFn;32                 }33             }

新增回调函数

1            decorator('uname',function(){ 2                 //新增focus回调函数 3                 unameDemoText.style.display="none"; 4             },function(){ 5                 //新增blur回调函数 6                 unameWarnText.style.color="#f03"; 7             }); 8             decorator('phone',function(){ 9                 //新增focus回调函数10                 phoneDemoText.style.display="none";11             },function(){12                 //新增blur回调函数13                 phoneWarnText.style.color="#f03";14             });

代码测试：

 优化装饰者方法

/*优化装饰者方法*/        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(){ 2                 //新增focus回调函数 3                 unameDemoText.style.display="none"; 4             }); 5             decorator('uname','onblur',function(){ 6                 //新增focus回调函数 7                 unameWarnText.style.color="#f03"; 8             }); 9             decorator('phone','onfocus',function(){10                 //新增focus回调函数11                 phoneDemoText.style.display="none";12             });13            decorator('phone','onblur',function(){14                 //新增focus回调函数15                 phoneWarnText.style.color="#f03";16             });

浏览器显示效果同上