javascript-装饰者模式

Posted 2020-08-15 惊涛随笔

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

html代码

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

原有事件功能

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

浏览器显示效果同上