装饰者模式：在不改变原对象的基础上，通过对其进行包装扩展，使原有对象可以满足用户的更复杂需求
需求：对表单输入框进行校验，当点击的时候，执行相应的回调函数。
分析：如果简单的使用对单个输入框尽心事件绑定，不利于以后扩展，每对多一个输入框校验，就要绑定一次，重复代码较多，因此可以使用装饰者模式。
<div>
<input type="text" id='tel_input'> <div id="tel_demo_text">tel_demo_text</div>
</div>
<div>
<input type="text" id='name_input'> <div id="name_demo_text">name_demo_text</div>
</div>
<script>
// 使用装饰器模式对输入框添加click事件
var decorator = 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
}
}
decorator('tel_input', function(){
document.getElementById('tel_demo_text').style.display = 'none'
})
decorator('name_input', function(){
document.getElementById('name_demo_text').style.display = 'none'
})
</script>
Q&A
装饰者模式和适配器模式对比
适配器方法是对原有对象的适配，添加的方法与原有方法功能上大致相似。但是装饰者提供的方法与原来的方法功能项有一定区别。再有，使用适配器时我们新增的方法是要调用原有的方法。不过在装饰者模式中，不需要了解对象原有的功能，并且对象原有的方法照样可以原封不动的使用。
