js 面向对象编程设计---装饰者模式

最新推荐文章于 2024-05-10 10:05:56 发布

weixin_42975115

最新推荐文章于 2024-05-10 10:05:56 发布

阅读量87

点赞数

分类专栏： js 面向对象设计模式

本文链接：https://blog.csdn.net/weixin_42975115/article/details/90610422

版权

js 同时被 3 个专栏收录

29 篇文章 0 订阅

订阅专栏

面向对象

24 篇文章 0 订阅

订阅专栏

设计模式

23 篇文章 0 订阅

订阅专栏

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

weixin_42975115

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
js 面向对象编程设计---装饰者模式

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body> ...
复制链接

扫一扫