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