js高级编程技巧之——惰性函数

243 阅读1分钟

惰性函数表示函数执行的分支只会在函数第一次调用的时候执行,他的应用情景在于当我们遇到一个需要判断场景去调用不同的方法时,避免重复进入函数内的if判断,也就是说if判断只进行一次,之后函数就会被分支里的代码替换掉

我们用一个事件绑定的案例来理解

例1:
    DOM0事件绑定:xxx.onclick=function(){}
    DOM2事件绑定:xxx.addEventListener('click',function(){}),只不过不兼容IE6~8,低版本浏览器中是基于 xxx.attachEvent('onclick',function(){}) 实现的
     
    这种写法虽然可以实现我们的需求和效果,但是在相同页面中,每一次执行函数,进来后都要重复的兼容判断(但是理论上第一次执行,我们就知道兼容性了,后期再执行,没必要每一次都判断兼容,也就是把兼容处理只处理一次 =>“懒”)
    
    function observerEvent(element, type, func) {
        if (element.addEventListener) {
            element.addEventListener(type, func);
        } else if (element.attachEvent) {
            element.attachEvent('on' + type, func);
        } else {
            element['on' + type] = func;
        }
    } 
    */
    /* 
    function observerEvent(element, type, func) {
        // 第一次执行observerEvent,根据兼容判断,我们就已经知道了兼容那种版本,所以我们重构了这个函数,重构后的小函数是不需要做兼容验证处理的
        if (element.addEventListener) {
            observerEvent = function (element, type, func) {
                element.addEventListener(type, func);
            };
        } else if (element.attachEvent) {
            observerEvent = function (element, type, func) {
                element.attachEvent('on' + type, func);
            };
        } else {
            observerEvent = function (element, type, func) {
                element['on' + type] = func;
            };
        }
        // 第一次也需要执行重构后的方法,实现事件绑定
        observerEvent(element, type, func);
    } */
     
    // observerEvent(xxx,'click',function(){});
    // observerEvent(xxx,'click',function(){});
    // observerEvent(xxx,'click',function(){});
    // ...