javaScript函数惰性加载

什么是JavaScirpt函数惰性加载?

  • 表示函数执行的分支只会在函数第一次调用时的时候执行,在第一次调用过程中,该函数会被覆盖按照合适方式执行的函数,这样任何对原函数的调用就不用再经过执行的分支了。
  • (第一次选择合适的方式覆盖执行函数之后,后面调用的时候就不用再重新筛选条件,而是直接调用被覆盖的函数,从而加快了执行的速度。)
场景:Ajax的调用校验
<script type="text/javascript">
            function createXHR(){
                var xhr = null;
                try {
                    // Firefox, Opera 8.0+, Safari,IE7+
                    xhr = new XMLHttpRequest();
                }
                catch (e) {
                    // Internet Explorer 
                    try {
                        xhr = new ActiveXObject("Msxml2.XMLHTTP");
                    }
                    catch (e) {
                        try {
                            xhr = new ActiveXObject("Microsoft.XMLHTTP");
                        }
                        catch (e) {
                            xhr = null;
                        }
                    }
                }
                return xhr;
            }
        </script>

每次new createXHR(),调用这个函数的时候,都需要校验浏览器的类型,因为不同浏览器调用的方式不同,所以必须先校验才能使用浏览器的ajax对象。

但是有一个问题。

万一我大规模和多次的调用createXHR()这个方法,很可能造成内存泄漏,执行速度慢等问题。

所以这个时候,

惰性载入

前面提到,惰性载入的实质就是在第一次调用的时候就判断浏览器的类型并指定调用的哪个ajax对象,并且重写函数方法,后面调用的时候都是以这个重写后的函数来执行,避免后面调用的效率降低。

good,理解到这里的话

function createXHR(){
                var xhr=null;
                if(typeof XMLHttpRequest !='undefined'){
                    xhr = new XMLHttpRequest();
                    createXHR=function(){
                        return new XMLHttpRequest();
                    }
                }else{
                    try {
                        xhr = new ActiveXObject("Msxml2.XMLHTTP");
                        createXHR=function(){
                            return new ActiveXObject("Msxml2.XMLHTTP");
                        }
                    }
                    catch (e) {
                        try {
                            xhr = new ActiveXObject("Microsoft.XMLHTTP");
                            createXHR=function(){
                                return new ActiveXObject("Microsoft.XMLHTTP");
                            }
                        }
                        catch (e) {
                            createXHR=function(){
                                return null;
                            }
                        }
                    }
                }
                return xhr;
            }

如果浏览器为除IE之外的话,

其实后面调用的,都是被重写的函数

function  createXHR(){
     return new XMLHttpRequest();
 }
 var XHR=new createXHR();
 =>  XHR=new XMLHttpRequest();

这个函数而已。

执行速度快了很多很多有木有!!

优点:

  • 执行效率快速提高,虽然第一次调用的时候可能会跟普通的时候一样慢,但是多次执行的话,效率还是很可观的。

实践例子:

这里写图片描述

如果你要找出里面真正的doge的话,也可以使用这种方式噢。虽然有点怪怪的,但是如果你有很多只假的doge的话,用惰性载入这种方法可以让你快速检索到真正的doge.不希莫喷

<script type="text/javascript">
var dogEye='right';
var doge={
    'eye':'right',
    'body':'yellow'
};
var notDoge={
    'eye':'left',
    'body':'yellow'
}
  function checkDoge(){
    var dog=null;
    if(dogEye=='right'){
        checkDoge=function(){
            return new doge();
        }
    }else{
          try{
             dog=new notDoge();
            checkDoge=function(){
                return new notDoge();
            }
          }catch (e) {
            checkDoge=function(){
                return null;
            }
          }
    }
     return dog;
  }
</script>

这里写图片描述

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

阿冰介

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值