在不改变原对象的基础上,通过对其进行包装拓展(属性或方法)使原有对象可以满足用户新的更复杂的需求。
例如增加需求对一个标签容易实现,如果数量庞大,还需要一个一个标签去查找去添加。
与适配器模式的区别在于,适配器是对原有对象适配,添加的方法与原有方法功能上大致相似,
在装饰者模式中,不需要了解对象原有的功能,并且原有的方法可以原封不动地使用。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>装饰者模式</title>
</head>
<body>
<input type="text" id="nameInput" value="nameInput" onclick="oldClick()"/>
<input type="text" id="ageInput" value="ageInput" onclick="oldClick()"/>
<input type="text" id="markInput" value="markInput" onclick="oldClick()"/>
<p>按F12打开调试界面</p>
</body>
<script>
function oldClick(event){
event=event||window.event;
alert(event.target.id);
}
function newClickEvent(event){
event=event||window.event;
alert("显示新绑定事件"+event.target.id);
}
var decorator=function(input,newClickEvent){
var input=document.getElementById(input);
if(typeof input.onclick==='function'){//如果之前已绑定事件
var oldClickEvent=input.onclick;//先保存旧的响应事件
input.onclick=function(){//由于onclick函数只能绑定一个事件函数,所以讲新旧函数加入一个匿名函数中绑定。
oldClickEvent();//旧事件
newClickEvent();//新事件
}
}else{//未绑定事件,直接添加绑定事件
input.onclick=newClickEvent();
}
}
decorator("nameInput",newClickEvent);//传入新事件名
decorator("ageInput",newClickEvent);//传入新事件名
</script>
</html>