装饰者模式

        // 在开发过程中 改动需求是必要的,在原有的函数中添加修改内容
        // 封装一个类
        function decorator (input,fn){
            // 获取执行的 dom元素
            let newInput  = document.getElementById(input);
            if(typeof newInput.onclick === "function"){
                // 缓存原有的事件逻辑
                let oldClickFn = newInput.onclick;
                newInput.onclick = function () {
                    // 执行原有的事件逻辑
                    oldClickFn();
                    // 执行新添加的回调函数
                    fn();
                }
            }else{
                newInput.onclick = fn;
            }
        }
        
        // 假如原有的box元素有一个业务逻辑:
        var box = document.getElementById('box');
        // 原有的业务逻辑
        box.onclick = function(){
            alert(1)
        }
        // 新添加的业务逻辑
        decorator('box',function(){
            alert(2);
        })
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容