javascript设计模式——装饰者模式

装饰者模式：在不改变原对象的基础上，通过对其进行包装扩展，使原有对象可以满足用户的更复杂需求

需求：对表单输入框进行校验，当点击的时候，执行相应的回调函数。
分析：如果简单的使用对单个输入框尽心事件绑定，不利于以后扩展，每对多一个输入框校验，就要绑定一次，重复代码较多，因此可以使用装饰者模式。

  <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
装饰者模式和适配器模式对比
适配器方法是对原有对象的适配，添加的方法与原有方法功能上大致相似。但是装饰者提供的方法与原来的方法功能项有一定区别。再有，使用适配器时我们新增的方法是要调用原有的方法。不过在装饰者模式中，不需要了解对象原有的功能，并且对象原有的方法照样可以原封不动的使用。