装饰者模式

        // 在开发过程中 改动需求是必要的,在原有的函数中添加修改内容
        // 封装一个类
        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);
        })

你可能感兴趣的:(装饰者模式)