标签：电话 ora inline str document == 接下来 war cti
装饰者模式概述
在不改变原对象的基础上，通过对其进行包装拓展（添加属性或者方法）使原有对象可以满足用户更复杂的需求
实际需求
在已有的代码基础上，为每个表单中的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‘; })
说明：使用装饰者模式，我们不需再过度关注对象原有的功能，并且对象原有的方法照样可以原封不动地使用。
标签：电话 ora inline str document == 接下来 war cti
原文地址：http://www.cnblogs.com/lvmylife/p/7242347.html
