javaScript函数惰性加载

本文介绍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>

这里写图片描述

<think>好的,用户想了解惰性加载的概念和实现方法。我需要先整理一下现有的引用内容,看看有哪些相关信息。引用1提到了惰性加载的不同应用场景,比如图片、JavaScript函数,还有PHP中的例子。引用2是PHP的spl_autoload_register函数,可能和自动加载类有关。引用3则详细介绍了C++中模板元编程实现惰性加载的方法,比如外覆器、编译期条件判断和使用std::function等。 首先,用户可能希望得到一个全面的解释,涵盖不同编程语言中的实现方式。需要分点说明原理和具体实现方法,可能还要举例子。要注意引用中的信息,比如PHP的惰性加载使用自动注册函数,C++中的外覆器和编译期控制。此外,还要确保回答结构清晰,先讲原理再讲实现,可能最后加应用场景。 用户的问题提到了“实现方式”和“原理”,所以需要分别展开。可能还需要比较不同语言的不同方法,比如PHP和C++的区别。另外,是否需要提到惰性加载的优点,比如节省资源、提高性能?根据引用1,惰性加载确实用于延迟加载资源,提升效率。 需要注意避免混淆概念,比如JavaScript中的LazyLoad库和图片惰性加载的区别,引用1里已经提到这一点,应该在回答中强调。另外,引用3中的模板元编程方法比较高级,可能需要用更易懂的语言解释,比如使用外覆器延迟实例化模板。 可能还需要补充其他语言的例子,比如Java中的懒加载单例模式,或者Python的生成器实现惰性计算,但现有引用中没有这些信息,是否需要添加?根据用户的问题,可能只需要基于提供的引用内容,所以应该集中在PHP、JavaScript和C++的例子。 最后,生成的相关问题要围绕惰性加载,可能涉及应用场景、优化方法、不同语言的实现差异等。要确保问题有针对性,帮助用户深入理解。</think>### 惰性加载的原理与实现方法 #### 一、惰性加载的原理 惰性加载(Lazy Loading)的核心思想是**延迟初始化或加载资源,直到真正需要时才执行**,以减少资源消耗、提升性能或优化用户体验[^1]。其本质是通过**控制加载时机**,避免不必要的计算、内存占用或网络请求。 #### 二、实现方式 1. **条件判断法** 在代码逻辑中增加条件判断,仅在需要时触发加载操作。例如: ```javascript // JavaScript函数惰性加载 function getData() { if (!cachedData) { cachedData = computeExpensiveData(); // 延迟计算 } return cachedData; } ``` 2. **外覆器封装** 通过封装对象隐藏内部实现,延迟实例化或加载(常见于C++模板元编程)[^3]: ```cpp template<typename T> class LazyWrapper { private: mutable std::optional<T> value; // C++17的延迟存储容器 public: T get() const { if (!value.has_value()) { value = T(); // 首次调用时初始化 } return *value; } }; ``` 3. **自动加载机制** PHP中使用`spl_autoload_register`实现类的惰性加载[^2],仅在首次使用类时触发加载: ```php spl_autoload_register(function ($className) { include $className . '.php'; // 按需加载类文件 }); ``` 4. **编译期控制** 在C++中利用模板特化或`if constexpr`实现编译期惰性加载[^3]: ```cpp template<bool Condition> void process() { if constexpr (Condition) { // 仅当条件为真时编译此代码块 loadHeavyComponent(); } } ``` #### 三、典型应用场景 1. 图片懒加载:滚动到可视区域再加载图片[^1] 2. 单例模式:延迟实例化对象 3. 大数据处理:分批加载避免内存溢出 4. 框架类加载:如PHP的自动类加载机制
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

打赏作者

阿冰介

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

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

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

打赏作者

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

抵扣说明:

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

余额充值