JavaScript设计模式_装饰者模式

最新推荐文章于 2020-08-05 15:01:16 发布

友人C君~

最新推荐文章于 2020-08-05 15:01:16 发布

阅读量290

点赞数

分类专栏： JavaScript设计模式

本文链接：https://blog.csdn.net/CWH0908/article/details/88955851

版权

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

9 篇文章 0 订阅

订阅专栏

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

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

友人C君~

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
JavaScript设计模式_装饰者模式

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

扫一扫

专栏目录