什么是装饰者模式?
装饰者模式:在不改变原对象的基础上，通过对其进行 包装拓展，使原有对象可以满足用于的更复杂的需求
例子解释
通过一个不断改进输入框的需求来解释装饰者模式
代码
/** 原需求:用户输入密码的时候显示提示文本校验*/
var password_input = document.getElementById('password');
password_input.oninput = function({target}) {
if(target.value.length < 6) {
document.getElementById('tip').style.display = "block";
}else {
document.getElementById('tip').style.display = "none";
}
}
/**新需求:需要添加提示文字颜色为红色 */
/* 采用装饰者模式*/
var decorator = function(element_id,fn) {
var element = document.getElementById(element_id);
if(typeof element.oninput === 'function') {
// 如果存在,缓存原有事件函数;
var oldInputFunction = element.oninput;
element.oninput = function(event) {
// 原函数
oldInputFunction(event);
// 新函数
fn(event);
}
}else{
element.oninput = fn;
}
}
/**提示文字红色 */
decorator('password',function({target}) {
document.getElementById('tip').style.color = "#ff0000";
});
/**提示文字用正楷 */
decorator('password',function({target}) {
document.getElementById('tip').style.fontFamily = "楷体";
});
