装饰者模式

本文共--字 阅读约--分钟 | 浏览: -- Last Updated: 2021-12-15

装饰者模式(Decorator):在不改变原对象的基础上,通过对其进行包装扩展(添加属性或者方法)使原有对象可以满足用户的更复杂需求。

首先要明白原有的功能有哪些,装饰者模式就是在这基础上添加一些功能来满足新的需求。

var decorator = function (input, fn) {
  var inputEl = document.getElementById(input);

  if (typeof inputEl.onclick === 'function') {
    var oldClickFn = input.onclick; // 原有功能
    input.onclick = function () { // 扩展
      oldClickFn(); // 先调用原有功能
      fn(); // 扩展功能
    }
  } else {
    // 没有原有注册事件 直接绑定扩展功能处理函数
    input.onclick = fn;
  }
}

decorator('tel_input', function () {
  document.getElementById('demo').style.display = 'none';
})

相比于适配器模式,适配器方法是对原有对象适配,更多的特性是“兼容”,而装饰者模式提供的方法与原来的方法是有一定区别的,更多的特性是“扩展”。