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 相关文章推荐
JavaScript 判断指定字符串是否为有效数字
May 11 Javascript
jquery $.getJSON()跨域请求
Dec 21 Javascript
Js实现网页键盘控制翻页的方法
Oct 30 Javascript
Javascript 正则表达式实现为数字添加千位分隔符
Mar 10 Javascript
jQuery插件StickUp实现网页导航置顶
Apr 12 Javascript
webpack独立打包和缓存处理详解
Apr 03 Javascript
深究AngularJS中ng-drag、ng-drop的用法
Jun 12 Javascript
详解vue 配合vue-resource调用接口获取数据
Jun 22 Javascript
实例详解Vue项目使用eslint + prettier规范代码风格
Aug 20 Javascript
Three.JS实现三维场景
Dec 30 Javascript
解决layer弹出层中表单不起作用的问题
Sep 09 Javascript
5分钟快速看懂ES6中的反射与代理
Dec 19 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
PHP4实际应用经验篇(1)
2006/10/09 PHP
php生成随机颜色的方法
2014/11/13 PHP
php中get_magic_quotes_gpc()函数说明
2017/02/06 PHP
Prototype 学习 Prototype对象
2009/07/12 Javascript
基于Jquery的动态添加控件并取值的实现代码
2010/09/24 Javascript
Iframe自适应高度绝对好使的代码 兼容IE,遨游,火狐
2011/01/27 Javascript
JQuery包裹DOM节点的方法
2015/06/11 Javascript
JavaScript实现动态添加,删除行的方法实例详解
2015/07/02 Javascript
分享几种比较简单实用的JavaScript tabel切换
2015/12/31 Javascript
JavaScript学习笔记之创建对象
2016/03/25 Javascript
jQuery 3 中的新增功能汇总介绍
2016/06/12 Javascript
EasyUI的doCellTip实现鼠标放到单元格上提示单元格内容
2016/08/24 Javascript
Angular Module声明和获取重载实例代码
2016/09/14 Javascript
JS判断输入的字符串是否是数字的方法(正则表达式)
2016/11/29 Javascript
Jquery实时监听input value的实例
2017/01/26 Javascript
JavaScript实现类似淘宝的购物车效果
2017/03/16 Javascript
第一次记录Bootstrap table学习笔记(1)
2017/05/18 Javascript
ES6深入理解之“let”能替代”var“吗?
2017/06/28 Javascript
vue数据操作之点击事件实现num加减功能示例
2019/01/19 Javascript
对于防止按钮重复点击的尝试详解
2019/04/22 Javascript
解决vue中axios设置超时(超过5分钟)没反应的问题
2020/09/04 Javascript
IDEA配置jQuery, $符号不再显示黄色波浪线的问题
2020/10/09 jQuery
Python实现的多进程和多线程功能示例
2018/05/29 Python
PyTorch中Tensor的拼接与拆分的实现
2019/08/18 Python
python集合删除多种方法详解
2020/02/10 Python
Python基于数列实现购物车程序过程详解
2020/06/09 Python
Python3爬虫ChromeDriver的安装实例
2021/02/06 Python
实例教程 纯CSS3打造非常炫的加载动画效果
2014/11/05 HTML / CSS
新西兰杂志订阅:isubscribe
2019/08/26 全球购物
澳洲最大的时尚奢侈品电商平台:Cettire
2020/06/15 全球购物
个人违纪检讨书
2014/09/15 职场文书
2014年向国旗敬礼活动总结
2014/09/27 职场文书
优秀高中学生评语
2014/12/30 职场文书
电力安全教育培训心得体会
2016/01/11 职场文书
李白经典诗之一:全文无一“月”字,却句句有月
2019/07/12 职场文书
聊聊pytorch测试的时候为何要加上model.eval()
2021/05/23 Python