javaScript函数惰性加载

Love The Way You Lie 2022-07-16 06:40 175阅读 0赞

## 什么是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();

这个函数而已。

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

### 优点： ###

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

## 实践例子： ##

![这里写图片描述][20161009152841962]

如果你要找出里面真正的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>

![这里写图片描述][20161009155132049]

[20161009152841962]: /images/20220716/500ac93e1e81494a8e9d76b0e892b649.png
[20161009155132049]: /images/20220716/4d454baf4f6e49d79e52b3807899a86e.png

发表评论取消回复

表情：

评论列表（有 0 条评论，175人围观）

还没有评论，来说两句吧...

相关阅读

相关 Python Django 惰性查询（懒加载）

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ub

雨点打透心脏的1/2处/ 2023年10月07日 10:21/ 0 赞/ 25 阅读

相关 javascript加载_检测文档是否已加载JavaScript

javascript加载 If you [follow me on Twitter][], you've probably noticed me whining about

小咪咪/ 2023年02月22日 03:39/ 0 赞/ 40 阅读

相关 JavaScript 性能优化之惰性加载函数

在实际开发中，我们编写的大多数JavaScript代码包含大量的 if…else语句或者 try… catch 语句来做功能检测。举一个简单的例子：事件的绑定，我们会首先

绝地灬酷狼/ 2023年02月14日 15:47/ 0 赞/ 26 阅读

相关 php惰性加载案例,thinkphp5 惰性加载

从core/start.php 开始 base.php 中最先加载 loader.php // 载入Loader类 require CORE\_PATH . 'Lo

逃离我推掉我的手/ 2023年01月17日 08:26/ 0 赞/ 145 阅读

相关为 Vue 的惰性加载加一个进度条

[为 Vue 的惰性加载加一个进度条][Vue] 简介通常用 Vue.js 编写单页应用（SPA）时，当加载页面时，所有必需的资源（如 JavaScript 和

柔光的暖阳◎/ 2022年12月13日 04:51/ 0 赞/ 190 阅读

相关 javaScript函数惰性加载

什么是JavaScirpt函数惰性加载？表示函数执行的分支只会在函数第一次调用时的时候执行，在第一次调用过程中，该函数会被覆盖按照合适方式执行的函数，这样任何对原

Love The Way You Lie/ 2022年07月16日 06:40/ 0 赞/ 176 阅读

相关 JavaScript异步加载

默认情况javascript是同步加载的，也就是javascript的加载时阻塞的，后面的元素要等待javascript加载完毕后才能进行再加载，对于一些意义不是很大的java

今天药忘吃喽~/ 2022年07月14日 14:19/ 0 赞/ 281 阅读

相关 JavaScript回顾学习：常用的惰性函数

惰性载入表示函数执行的分支只会在函数第一次掉用的时候执行，在第一次调用过程中，该函数会被覆盖为另一个按照合适方式执行的函数，这样任何对原函数的调用就不用再经过执行的分支了。

本是古典何须时尚/ 2022年05月19日 09:34/ 0 赞/ 340 阅读

相关 JavaScript异步加载

javascript 异步加载的三种方案 1. defer 异步加载，但要等到dom文档全部解析完才会被执行。只有IE能用。 2. async 异步加载，加载完就执行，as

迈不过友情╰/ 2022年05月19日 02:48/ 0 赞/ 300 阅读

相关 JavaScript 初始化函数以及加载顺序

> 加载顺序 > ;(function()\{\}()); > $(function()function()） > window.onload <!DOCTYPE

青旅半醒/ 2022年05月16日 00:38/ 0 赞/ 237 阅读