本文共--字 阅读约--分钟 | 浏览: -- 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';
})
相比于适配器模式,适配器方法是对原有对象适配,更多的特性是“兼容”,而装饰者模式提供的方法与原来的方法是有一定区别的,更多的特性是“扩展”。