再起航，我的学习笔记之JavaScript设计模式13(装饰者模式)

装饰者模式

装饰者模式（Decorator）: 在不改变原对象的基础上，通过对其进行过包装拓展（添加属性高或者方法）使原有对象可以满足用户的更复杂需求。

如果现在我们有个需求，需要做一个提交表单,当我们选中输入框的时候，输入框旁会显示相应提示，或许我们会这样做：

html中我们会添加一个输入框，后面放一个隐藏的提示信息

<input type="text" id="tel" />
<span id="tel_text" style="display: none;">请输入手机号</span>

然后在js里

var tel=document.getElementById('tel');
        var teltext=document.getElementById('tel_text');
        tel.onclick=function(){
            teltext.style.display='inline-block';
        }

当输入框被点击选中时，我们显示之前隐藏的提示信息。

但是如果这个时候我们的需求改变，正常的时候显示必填的提示信息，当用户点击输入框时隐藏必填的输入提示，显示所填字段验证格式的提示。那么我们可能会这么修改：

<input type="text" id="tel" />
<span id="tel_text">请输入手机号</span>
<span id="tel_validation" style="display: none;">手机号必须是11位数</span>

然后我们会在js中做相应的调整,我们会隐藏必填提示，显示验证提示

var tel=document.getElementById('tel');
        var teltext=document.getElementById('tel_text');
        var telvalidation=document.getElementById('tel_validation');
        tel.onclick=function(){
            teltext.style.display='none';
            telvalidation.style.display='inline-block';
        }

但是现在有个问题，我们表单一定会有很多数据项，那么用这种方式，我们必须一个个去找之前写的方法代码在去里面一个个修改，很麻烦。

使用装饰者模式装饰已有功能

这个时候我们就可以用到装饰者模式

var garnish=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;
    }
}

现在我们通过装饰者模式就不用一个个去找之前的逻辑在去修改了，我们通过装饰者模式调用试一下吧。

garnish('tel',function(){
        var telvalidation=document.getElementById('tel_validation');
            teltext.style.display='none';
            telvalidation.style.display='inline-block';
});

通过使用装饰者模式我们发现无论输入框是否绑定过事件，都可以轻松完成我们的需求，装饰者模式很简单，就是对原有对象的属性与方法的添加

总结

在我们对原有功能不了解的情况下如果要对功能进行扩展装饰者模式可能是不错的选择，当然同样对原有对象进行扩展的模式还有我们之前讲到的适配器模式，但是两者不同的是，适配器模式对对象进行扩展时，很多时候时对对象内部结构的重构，因此必须要了解其自身的结构，而装饰者模式对对象的扩展是一种良性扩展，不用了解其具体实现，只是在外部进行了一次封装扩展，这又是对原有功能完整性的一种保护。

也谢谢大家看到这里：）如果你觉得我的分享还可以请点击推荐，分享给你的朋友让我们一起进步~

好了以上就是本次分享的全部内容，本次示例参考自JavaScript设计模式一书，让我们一点点积累一点点成长，希望对大家有所帮助。

欢迎转载，转载请注明作者，原文出处。

转载于:https://www.cnblogs.com/chen-jie/p/JavaScript-Decorator.html