装饰者模式概述
在不改变原对象的基础上&＃xff0c;通过对其进行包装拓展&＃xff08;添加属性或者方法&＃xff09;使原有对象可以满足用户更复杂的需求
实际需求
在已有的代码基础上&＃xff0c;为每个表单中的input默认输入框上边显示一行提示文案&＃xff0c;当用户点击输入框时文案消失
原有代码&＃xff1a;
var telInput &＃61; document.getElementById(&＃39;tel_input&＃39;);
var telWarnText &＃61; document.getElementById(&＃39;tel_warn_text&＃39;);
input.onclick &＃61; function(){telWarnText.style.display &＃61; &＃39;inline-block&＃39;;
}
第一次改进后的代码&＃xff1a;
var telInput &＃61; document.getElementById(&＃39;tel_input&＃39;);
var telWarnText &＃61; document.getElementById(&＃39;tel_warn_text&＃39;);
var telDemoText &＃61; document.getElementById(&＃39;tel_demo_text&＃39;);
input.onclick &＃61; function(){telWarnText.style.display &＃61; &＃39;inline-block&＃39;; telDemoText.style.display &＃61; &＃39;none&＃39;;
}
第一次改进后产生的问题&＃xff1a;
其他页面的表单中还存在不同输入框&＃xff0c;比如&＃xff1a;姓名、地址等等&＃xff0c;我们修改一处地方容易&＃xff0c;可每一处代码对应的地方都需要手动一个一个地修改&＃xff0c;那么有没有更好的改善方式呢&＃xff1f;
第二次改进&＃xff1a;使用装饰者模式
var decorator &＃61; function(input, fn) {// 获取事件源var input &＃61; document.getElementById(input);// 若事件源已绑定事件if(typeof input.onclick &＃61;&＃61;&＃61; &＃39;function&＃39;) {// 缓存事件源原有回调函数var oldClickFn &＃61; input.onclick;// 为事件源定义新的事件input.onclick &＃61; function() {// 事件源原有回调函数
oldClcikFn();// 执行事件源新增回调函数
fn();}}else{// 事件源未绑定事件&＃xff0c;直接为事件源添加新增回调函数input.onclick &＃61; fn;}
}
接下来我们可以这样添加新功能了&＃xff1a;
// 电话输入框功能装饰
decorator(&＃39;tel_input&＃39;, function(){document.getElementById(&＃39;tel_demo_text&＃39;).style.display &＃61; &＃39;none&＃39;;
})// 姓名输入框功能装饰
decorator(&＃39;name_input&＃39;, function(){document.getElementById(&＃39;tel_demo_text&＃39;).style.display &＃61; &＃39;none&＃39;;
})
说明&＃xff1a;使用装饰者模式&＃xff0c;我们不需再过度关注对象原有的功能&＃xff0c;并且对象原有的方法照样可以原封不动地使用。
备注&＃xff1a;内容来自《Javascript设计模式》一书
京公网安备 11010802041100号