JavaScript设计模式(十)【装饰者模式】

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

.NET跨平台

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

阅读量168

点赞数

分类专栏： Javascript设计模式

原文链接：https://blog.csdn.net/WuLex

版权

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

37 篇文章 2 订阅

订阅专栏

装饰已有功能对象

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>装饰已有功能对象</title>
</head>
<body>
<script>
    //装饰者
    var decorator = function(input, fn) {
        //获取事件源
        var input = document.getElementById(input);
        if (typeof input.onclick === 'function') {
            //缓存事件源原有回调函数
            var oldClickFn = input.onclick;
            input.onclick = function() {
                //事件源原有回调函数
                oldClickFn();
                //执行事件源新增回调函数
                fn();
            }
        } else {
            //事件源未绑定事件，直接为事件源添加新增回调函数
            input.onclick = fn;
        }
    }

    window.onload = function() {
        //具体使用
        decorator('tel_input',
            function() {
                //新功能
            });
    }
</script>
</body>
</html>