JS高阶--惰性函数

JS惰性函数,是针对优化频繁使用的函数。常用于函数库的编写、单例模式之中。

首先,写一个test函数,返回首次调用该函数的时间(使用new Date().getTime()),注意,返回首次调用时间。

不好的写法:

var t = null;
function test () {   
    if(t){        //缺点:每次调用函数就需要进行一次if判断。并且t会污染全局变量。【惰性函数就是将这里的数据进行保存。下次不需要再进行判断】
        return t; 
    }
    t = new Date().getTime();
    return t;
}

test();   //其实在第一次调用之后,t的值已经固定了。
test();    //但是在接下来的三次调用test的时候,仍然要进行if-else的判断。
test();
test();
//结果:四次都返回的同一个值

优化:  使得t不会污染全局变量。

var test = (function(){
    var t = null;
    return function () {       
         if(t){        //【只要第一次调用之后,test的t的值就已经知道了】该方法缺点:每一次调用test时仍然要判断。
            return t; 
        }
        t = new Date().getTime();
     }
    return t;
})();

完美版:使得第一次调用test函数之后,不会再进行if-else的判断,而是在第2、3、......、n次调用test时直接获取到t的值。

var test = function(){
    var t = new Date().getTime();
    test = function () {    //第一次调用之后,改变test函数,使得可以直接返回t
        return t;
    }
    return test();
}

应用:

添加绑定事件(原版)

function addEvent(dom, type, handle){
    if(dom.addEventListener){
        dom.addEventListener(type, handler, false);
    }else{
        dom.attachEvent('on' + type, handler);
    }
}

但是每一次都要对浏览器的判断,可以在第一次判断后,就保留判断,下一次就不需要判断了,使得性能优化非常多。

使用惰性函数优化(改进版):

function addEvent(dom, type, handle){
    if(dom.addEventListener){
        dom.addEventListener(type, handler, false);
        addEvent = function (dom, type, handler){   //第一次判断后,之后就不需要再判断了。
            dom.addEventListener(type, handler, false);
        }
    }else{
        dom.attachEvent('on' + type, handler);
        addEvent = function (dom, type, handler){
            dom.attachEvent('on' + type,  handler);
        }
    }
    return addEvent;
}



阅读更多
个人分类: javascript
想对作者说点什么? 我来说一句

没有更多推荐了,返回首页

关闭
关闭
关闭