JavaScript AJAX之惰性载入函数


Posted in Javascript onAugust 27, 2014

在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就能一刀切,实际上代码很多地方都是活的,人更是活的。

Javascript 相关文章推荐
基于jquery实现的上传图片及图片大小验证、图片预览效果代码
Apr 12 Javascript
Javascript实现页面跳转的几种方式分享
Oct 26 Javascript
Javascript动画的实现原理浅析
Mar 02 Javascript
JavaScript中扩展Array contains方法实例
Aug 23 Javascript
微信小程序 swiper组件轮播图详解及实例
Nov 16 Javascript
Javascript Function.prototype.bind详细分析
Dec 29 Javascript
用JavaScript实现让浏览器停止载入页面的方法
Jan 19 Javascript
Bootstrap modal 多弹窗之叠加显示不出弹窗问题的解决方案
Feb 23 Javascript
基于Vue自定义指令实现按钮级权限控制思路详解
May 23 Javascript
AngularJS ui-router刷新子页面路由的方法
Jul 23 Javascript
vue+springboot实现项目的CORS跨域请求
Sep 05 Javascript
微信小程序人脸识别功能代码实例
May 07 Javascript
IE浏览器不支持getElementsByClassName的解决方法
Aug 27 #Javascript
JavaScript中使用stopPropagation函数停止事件传播例子
Aug 27 #Javascript
JavaScript闭包函数访问外部变量的方法
Aug 27 #Javascript
JavaScript中switch判断容易犯错的一个细节
Aug 27 #Javascript
JavaScript中使用arguments获得函数传参个数实例
Aug 27 #Javascript
JavaScript中输出标签的方法
Aug 27 #Javascript
JavaScript实现的GBK、UTF8字符串实际长度计算函数
Aug 27 #Javascript
You might like
php下安装配置fckeditor编辑器的方法
2011/03/02 PHP
php生成excel列序号代码实例
2013/12/24 PHP
php中使用gd库实现远程图片下载实例
2015/05/12 PHP
php+ajax无刷新上传图片实例代码
2015/11/17 PHP
YiiFramework入门知识点总结(图文教程)
2015/12/28 PHP
Codeigniter中集成smarty和adodb的方法
2016/03/04 PHP
php结合ajax实现手机发红包的案例
2016/10/13 PHP
thinkPHP中U方法加密传递参数功能示例
2018/05/29 PHP
PHP与Web页面的交互示例详解一
2020/08/04 PHP
非阻塞动态加载javascript广告实现代码
2010/11/17 Javascript
随鼠标移动的时钟非常漂亮遗憾的是只支持IE
2014/08/12 Javascript
浅谈被jQuery抛弃的函数及替代函数
2015/05/03 Javascript
Node.js操作mysql数据库增删改查
2016/03/30 Javascript
Actionscript与javascript交互实例程序(修改)
2016/09/22 Javascript
在 Linux/Unix 中不重启 Vim 而重新加载 .vimrc 文件的流程
2018/03/21 Javascript
10行代码实现微信小程序滑动tab切换
2018/12/28 Javascript
Vue+Django项目部署详解
2019/05/30 Javascript
javascript之分片上传,断点续传的实际项目实现详解
2019/09/05 Javascript
浅谈vue-router路由切换 组件重用挖下的坑
2019/11/01 Javascript
JavaScript实现旋转木马轮播图
2020/03/16 Javascript
python使用urllib模块和pyquery实现阿里巴巴排名查询
2014/01/16 Python
python清除字符串中间空格的实例讲解
2018/05/11 Python
python代码过长的换行方法
2018/07/19 Python
python读写csv文件的方法
2019/08/13 Python
Laravel框架表单验证格式化输出的方法
2019/09/25 Python
Python PyQt5模块实现窗口GUI界面代码实例
2020/05/12 Python
10种CSS3实现的loading动画,挑一个走吧?
2020/11/16 HTML / CSS
socket.io 和canvas 实现的共享画板功能
2019/05/22 HTML / CSS
html5中canvas学习笔记2-判断浏览器是否支持canvas
2013/01/06 HTML / CSS
Banggood官网:面向全球客户的综合商城
2017/04/19 全球购物
广播体操口号
2014/06/18 职场文书
航海技术专业毕业生推荐信
2014/07/09 职场文书
2014年高中班主任工作总结
2014/11/08 职场文书
幼儿园小班个人总结
2015/02/12 职场文书
2016北大自主招生自荐信模板
2016/01/28 职场文书
flex弹性布局详解
2022/03/20 HTML / CSS