JavaScript设计模式_装饰者模式

最新推荐文章于 2025-02-13 08:41:12 发布

原创最新推荐文章于 2025-02-13 08:41:12 发布 · 337 阅读

4 ·

CC 4.0 BY-SA版权

JavaScript设计模式专栏收录该内容

9 篇文章

订阅专栏

本文介绍装饰者模式的概念及其与适配器模式的区别。通过实例演示如何在不改变原对象的基础上，通过包装拓展其属性或方法来满足用户更复杂的需求。

在不改变原对象的基础上，通过对其进行包装拓展（属性或方法）使原有对象可以满足用户新的更复杂的需求。
例如增加需求对一个标签容易实现，如果数量庞大，还需要一个一个标签去查找去添加。
与适配器模式的区别在于，适配器是对原有对象适配，添加的方法与原有方法功能上大致相似，
在装饰者模式中，不需要了解对象原有的功能，并且原有的方法可以原封不动地使用。

<!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>