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 相关文章推荐
原生Js与jquery的多组处理, 仅展开一个区块的折叠效果
Jan 09 Javascript
jQuery实现仿淘宝带有指示条的图片转动切换效果完整实例
Mar 04 Javascript
jQuery实现可用于博客的动态滑动菜单
Mar 09 Javascript
jquery实现的点击翻书效果代码
Nov 04 Javascript
js文字横向滚动特效
Nov 11 Javascript
使用jQuery Rotare实现微信大转盘抽奖功能
Jun 20 Javascript
JavaScript中最容易混淆的作用域、提升、闭包知识详解(推荐)
Sep 05 Javascript
js提示框替代系统alert,自动关闭alert对话框的实现方法
Nov 07 Javascript
js oncontextmenu事件使用详解
Mar 25 Javascript
Vue + Vue-router 同名路由切换数据不更新的方法
Nov 20 Javascript
webpack4 CSS Tree Shaking的使用
Sep 03 Javascript
爬虫利器Puppeteer实战
Jan 09 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
轻松修复Discuz!数据库
2008/05/03 PHP
php批量删除操作代码分享
2017/02/26 PHP
thinkphp 验证码 的使用小结
2017/05/07 PHP
IOS 开发之NSDictionary转换成JSON字符串
2017/08/14 PHP
javascript Excel操作知识点
2009/04/24 Javascript
jquery multiSelect 多选下拉框
2010/07/09 Javascript
浅析javascript闭包 实例分析
2010/12/25 Javascript
Javascript 多浏览器兼容总结(实战经验)
2013/10/30 Javascript
JavaScript检测实例属性, 原型属性
2015/02/04 Javascript
JQuery实现Ajax加载图片的方法
2015/12/24 Javascript
AngularJS使用ngOption实现下拉列表的实例代码
2016/01/23 Javascript
js显示动态时间的方法详解
2016/08/20 Javascript
bootstrapValidator表单验证插件学习
2016/12/30 Javascript
bootstrap table操作技巧分享
2017/02/15 Javascript
JS回调函数基本定义与用法实例分析
2017/05/24 Javascript
如何使用JS在HTML中自定义字符串格式化
2017/07/20 Javascript
基于daterangepicker日历插件使用参数注意的问题
2017/08/10 Javascript
jQuery实现菜单栏导航效果
2017/08/15 jQuery
最后说说Vue2 SSR 的 Cookies 问题
2018/05/25 Javascript
jQuery模拟12306城市选择框功能简单实现方法示例
2018/08/13 jQuery
详解Next.js页面渲染的优化方案
2019/01/27 Javascript
Node 搭建一个静态资源服务器的实现
2019/05/20 Javascript
[01:13:46]iG vs Winstrike 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
videocapture库制作python视频高速传输程序
2013/12/23 Python
完美解决在oj中Python的循环输入问题
2018/06/25 Python
基于python实现语音录入识别代码实例
2020/01/17 Python
Python3中configparser模块读写ini文件并解析配置的用法详解
2020/02/18 Python
css3之UI元素状态伪类选择器实例演示
2017/08/11 HTML / CSS
任课老师推荐信范文
2013/11/24 职场文书
自我介绍演讲稿
2014/01/15 职场文书
县委党的群众路线教育实践活动工作情况报告
2014/10/25 职场文书
2014年销售人员工作总结
2014/11/27 职场文书
合理化建议书范文
2015/09/14 职场文书
《给予树》教学反思
2016/03/03 职场文书
基于Python实现流星雨效果的绘制
2022/03/18 Python
Python加密技术之RSA加密解密的实现
2022/04/08 Python