JavaScript AJAX之惰性载入函数

 更新时间:2014年08月27日 10:56:12   投稿:junjie  
这篇文章主要介绍了JavaScript AJAX之惰性载入函数,惰性载入表示函数执行的分支仅会发生1次,是种JS的优化技巧,需要的朋友可以参考下

在JS中有些内存只需执行一遍即可,如浏览器类型检测是最常用的一个功能,因为我们使用Ajax的时候需要检测浏览器的内置的XHR。我们可以在第一次检测的时候记录下类型,往后在使用Ajax的时候就不需要再去检测浏览器类型了。在JS中就算只有一个if也总比没有if的语句效率要高。

普通Ajax方法

复制代码 代码如下:

/**
 * JS惰性函数
 */
 
function ajax(){
    if(typeof XMLHttpRequest != "undefined"){
        return new XMLHttpRequest();   
    }else if(typeof ActiveXObject != "undefined"){
        if(typeof arguments.callee.activeXString != "string"){
            var versions = ["MSXML2.XMLHttp.6.0","MSXML2.XMLHttp.3.0","MSXML2.XMLHttp"];   
 
            for(var i=0,k=version.length;i<k;i++){
                try{
                    new ActiveXObject(versions[i]);
                    arguments.callee.activeXString = versions[i];
                    break;
                }catch(ex){
                    throw ex;  
                }
            }
        }  
 
        return new ActiveXObject(arguments.callee.activeXString);
    }else{
        throw "No XHR object"; 
    }
}

每次调用ajax()函数都要对浏览器内置的XHR检查,效率不高。

使用惰性方式的方法

复制代码 代码如下:

/**
 * JS惰性函数
 */
 
function ajax(){
    if(typeof XMLHttpRequest != "undefined"){
        ajax = function(){
            return new XMLHttpRequest();   
        };
    }else if(typeof ActiveXObject != "undefined"){
        ajax = function(){
            if(typeof arguments.callee.activeXString != "string"){
                var versions = ["MSXML2.XMLHttp.6.0","MSXML2.XMLHttp.3.0","MSXML2.XMLHttp"];   
 
                for(var i=0,k=version.length;i<k;i++){
                    try{
                        var xhr = new ActiveXObject(versions[i]);  
                        arguments.callee.activeXString = versions[i];
                        return xhr;
                    }catch(ex){
                        throw ex;  
                    }
                }
            }  
 
            return new ActiveXObject(arguments.callee.activeXString);
        }
    }else{
        ajax = function(){
            throw "No XHR object"; 
        }
    }
 
    return ajax();
}

在第二个惰性方法中if的每个分支都会为ajax()变量赋值,有效覆盖了原有函数,最后一步调用新的函数。下一次调用的ajax()的时候,就直接调用变量。

优化重点

要执行特定代码只有实际调用才执行,而某些JS库一开始就检测浏览器,预先设置好。

由于加了复杂的判断所以首次运行速度慢,但后边的多册运行的效率会更快。
 
有时候写代码久了,不能一成不变,要经常思考怎样才能使程序运行的更快,更有效率。这样的思考下写出来的程序才是精装,而不会产生多余的垃圾代码。这也不是简单OO就能一刀切,实际上代码很多地方都是活的,人更是活的。

相关文章

  • js原生轮播图插件制作

    js原生轮播图插件制作

    这篇文章主要为大家详细介绍了js原生轮播图插件制作,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-10-10
  • js控制淡入淡出示例代码

    js控制淡入淡出示例代码

    淡入淡出效果想必大家都有见到过吧,在本文将为大家介绍下使用js如何控制淡入淡出,感兴趣的朋友可以参考下
    2013-11-11
  • Webpack-cli安装成功后查看webpack -v报错案例详解

    Webpack-cli安装成功后查看webpack -v报错案例详解

    这篇文章主要介绍了Webpack-cli安装成功后查看webpack -v报错案例详解,本篇文章通过简要的案例,讲解了该项技术的了解与使用,以下就是详细内容,需要的朋友可以参考下
    2021-09-09
  • 动态加载、移除js/css文件的示例代码

    动态加载、移除js/css文件的示例代码

    本文简单介绍动态加载、移除、替换js/css文件的示例代码,代码简单易懂,非常不错,具有参考借鉴加载,需要的朋友参考下吧
    2018-03-03
  • JavaScript实现多维数组的方法

    JavaScript实现多维数组的方法

    这篇文章主要介绍了JavaScript实现多维数组的方法,有需要的朋友可以参考一下
    2013-11-11
  • 微信小程序页面间跳转传参方式总结

    微信小程序页面间跳转传参方式总结

    这篇文章主要给大家总结介绍了关于微信小程序页面间跳转传参方式,文中通过示例代码介绍的非常详细,对大家学习或者使用小程序具有一定的参考学习价值,需要的朋友们下面来一起学习学习吧
    2019-06-06
  • 用Javascript来生成ftp脚本的小例子

    用Javascript来生成ftp脚本的小例子

    昨天闲着没事,又因为工作需要,写了一个脚本,用来做ftp。当然不是直接做ftp,而是产生一个ftp的脚本,供ftp命令使用。
    2013-07-07
  • js中substr,substring,indexOf,lastIndexOf,split,replace的用法详解

    js中substr,substring,indexOf,lastIndexOf,split,replace的用法详解

    这篇文章主要介绍了js中substr,substring,indexOf,lastIndexOf,split,replace的用法详解的相关资料,需要的朋友可以参考下
    2015-11-11
  • js 实现菜单上下显示附效果图

    js 实现菜单上下显示附效果图

    菜单上下显示的实现方法有很多,在本文将为大家介绍下使用js是如何实现的,需要的朋友不要错过
    2013-11-11
  • 浅析JS中NEW的实现原理及重写

    浅析JS中NEW的实现原理及重写

    本文通过实例代码给大家介绍了JS中NEW的实现原理及重写,本文通过实例代码给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友参考下吧
    2020-02-02

最新评论