javaScript函数惰性加载

最新推荐文章于 2020-11-24 14:35:57 发布

原创最新推荐文章于 2020-11-24 14:35:57 发布 · 658 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #函数 #ajax

本文介绍JavaScript函数惰性加载的概念及实现方法，通过示例展示如何在首次调用时确定最佳执行路径并重写函数，以提升后续调用的效率。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

什么是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>