JS高阶--惰性函数

原创 2018年04月16日 10:58:21

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;
}



Word2010高阶殿堂

本课程从Word2010基础入门,逐步讲解了文字编辑、Word2010综合运用技巧、表格及高效办公技巧,课程内容丰富全面,非常适合零基础想成为Word高手的学习者。
  • 2015年03月17日 15:07

js之惰性函数

利用函数的惰性载入提高javascript代码性能 在javascript代码中,因为各浏览器之间的行为的差异,我们经常会在函数中包含了大量的if语句,以检查浏览器特性,解决不同浏览器的兼容...
  • u013234372
  • u013234372
  • 2016-02-01 12:04:41
  • 1815

JavaScript-JS优化与惰性载入函数

惰性载入函数 由于现在浏览器之间的差异,为了实现跨浏览器工作,很多函数要书写大量if语句或者try…catch…语句。当每次调用函数时,都要对每个if分支或try语句进行检查,这样会使得浏览器反应变...
  • qiqingjin
  • qiqingjin
  • 2016-02-20 19:29:16
  • 1212

js性能优化之惰性加载函数

一个普通的浏览器嗅探技术,每次都要调用addEvent进行判断,执行if语句。// 浏览器嗅探技术:指的就是检测浏览器是否支持 var addEvent = function(elem, type, ...
  • sinat_25127047
  • sinat_25127047
  • 2017-04-26 11:33:22
  • 903

JS惰性函数

由于Ajax在前端使用频度很高,如果每次使用都new的话可能会导致内存泄露。故引出惰性函数解决此问题 普通的方法,每次调用都会执行一遍逻辑而且会new XMLHttpRequest funct...
  • u011225228
  • u011225228
  • 2017-03-05 18:32:10
  • 133

单例模式、惰性函数

//1.定义一个对象 var obj = { //2.初始化方法 init:function(){ //3.如果自己的xhr有值真的 就直接返回自己的xhr属性 ...
  • zoekitty
  • zoekitty
  • 2016-08-24 15:04:51
  • 128

js通用的惰性单例示例

惰性单例 惰性单例指的是在需要的时候才创建对象实例 通用的惰性单例示例 登录 var createLoginLayer = function(){ var div =...
  • Hi_xiexialing
  • Hi_xiexialing
  • 2017-01-15 14:27:52
  • 403

JS(一)高阶函数

JavaScript是世界上最流行的脚本语言,因为你在电脑、手机、平板上浏览的所有的网页,以及无数基于HTML5的手机App,交互逻辑都是由JavaScript驱动的。简单地说,JavaScript是...
  • u014744118
  • u014744118
  • 2016-12-27 10:44:41
  • 3409

Js中几种高阶函数

Js中几种高阶函数如果一个函数接受一个或多个函数作为参数,或者可以返回一个参数,则这样的函数就叫高阶函数常见的高阶函数...
  • Hero4399
  • Hero4399
  • 2017-08-18 20:01:25
  • 488

js 惰性通用单例的开发

js 惰性通用单例的开发
  • hzaini89
  • hzaini89
  • 2017-07-10 11:54:14
  • 270
收藏助手
不良信息举报
您举报文章:JS高阶--惰性函数
举报原因:
原因补充:

(最多只允许输入30个字)