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

最新推荐文章于 2025-02-13 08:41:12 发布

转载最新推荐文章于 2025-02-13 08:41:12 发布 · 217 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：https://blog.youkuaiyun.com/WuLex

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

37 篇文章

订阅专栏

本文介绍了一种使用JavaScript实现装饰者模式的方法，通过该模式可以在不修改原有对象的情况下为其添加新的功能。具体展示了如何为已有的事件监听器添加额外的处理函数。

装饰已有功能对象

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