<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--//装饰者模式:在不改变原有对象的基础上,通过对其进行包装-->
<!--//使得原有对象可以满足用户的复杂的更变-->
<input id="tel_input">
<input id="name_input">
<script>
let decotator =function (input,fn) {
let inputl = document.getElementById(input);
//判断该对象是否绑定对象
if(typeof inputl.onclick==="function"){
let oldcinput = inputl.onclick;//缓存旧的方法
inputl.onclick = function () {
//将旧方法新方法
oldcinput();
fn();
}
}else{
//型对象直接添加方法
inputl.onclick=fn;
}
}
//开始装修
decotator('tel_input',function () {
alert('i am tel_input who be onclick');
});
decotator('name_input',function () {
alert('i am name_input who be onclick');
})
</script>
</body>
</html>
js 面向对象编程设计---装饰者模式
最新推荐文章于 2024-05-10 10:05:56 发布