装饰者模式（decorator），顾名思义，就是在不改变原对象的基础上，对其进行包装修饰，使原有对象的功能得以增强。
比如现在有这样一个功能：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>decorator</title>
</head>
<body>
<div class="container">
<input type="text" onclick="alert('请输入内容')" />
</div>
</body>
</html>
input输入框有一个click事件，这个时候我们想让这个点击事件增加一些功能，怎么办呢？
假设这个click事件可能比较隐蔽，功能也比较复杂，我们无法通过修改原来的代码的方式解决，那么这就需要用到装饰者模式了。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>decorator</title>
</head>
<body>
<div class="container">
<input type="text" onclick="alert('请输入内容')" />
</div>
</body>
</html>
<script>
var decorator = function(dom,fn){
if(typeof dom.onclick === 'function'){
//如果这个dom上已经有了onclick，就增强
var oldClickFn = dom.onclick;//保存原来的click
dom.onclick = function(){
oldClickFn();//执行原来的click
fn();//执行新的click
}
} else{
dom.onclick = fn;
}
}
//测试一下
var telInput = document.getElementsByTagName('input')[0]
decorator(telInput,function(){
telInput.style.background = 'yellow'
})
</script>
网友评论