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传递变量: 值传递?引用传递?
Feb 22 Javascript
jquery调用wcf并展示出数据的方法
Jul 07 Javascript
jQuery.extend()的实现方式详解及实例
Jun 29 Javascript
开发插件的两个方法jquery.fn.extend与jquery.extend
Nov 21 Javascript
AngularJS入门教程之学习环境搭建
Dec 06 Javascript
Javascript 一些需要注意的细节(必看篇)
Jul 08 Javascript
vue组件watch属性实例讲解
Nov 07 Javascript
node实现的爬虫功能示例
May 04 Javascript
详解使用jQuery.i18n.properties实现js国际化
May 04 jQuery
如何使用 vue + d3 画一棵树
Dec 03 Javascript
webpack + vue 打包生成公共配置文件(域名) 方便动态修改
Aug 29 Javascript
基于vue-cli3和element实现登陆页面
Nov 13 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
yii通过小物件生成view的方法
2016/10/08 PHP
php5.x禁用eval的操作方法
2018/10/19 PHP
Jquery Ajax学习实例6 向WebService发出请求,返回DataSet(XML) 异步调用
2010/03/18 Javascript
悄悄用脚本检查你访问过哪些网站的代码
2010/12/04 Javascript
js获取网页高度(详细整理)
2012/12/28 Javascript
浅谈Angular的$q, defer, promise
2016/12/20 Javascript
javascript实现用户点击数量统计
2016/12/25 Javascript
RequireJS 依赖关系的实例(推荐)
2017/01/21 Javascript
bootstrap table之通用方法( 时间控件,导出,动态下拉框, 表单验证 ,选中与获取信息)代码分享
2017/01/24 Javascript
JavaScript实现按键精灵的原理分析
2017/02/21 Javascript
yii form 表单提交之前JS在提交按钮的验证方法
2017/03/15 Javascript
微信小程序图片横向左右滑动案例
2017/05/19 Javascript
JS简单实现父子窗口传值功能示例【未使用iframe框架】
2017/09/20 Javascript
Angular4学习笔记router的简单使用
2018/03/30 Javascript
跨域请求两种方法 jsonp和cors的实现
2018/11/11 Javascript
使用C++扩展Python的功能详解
2018/01/12 Python
Django app配置多个数据库代码实例
2019/12/17 Python
python对批量WAV音频进行等长分割的方法实现
2020/09/25 Python
用canvas实现图片滤镜效果附演示
2013/11/05 HTML / CSS
html5 外链式实现加减乘除的代码
2019/09/04 HTML / CSS
Smashbox英国官网:美国知名彩妆品牌
2017/11/13 全球购物
联想台湾官网:Lenovo TW
2018/05/09 全球购物
牵手50新加坡:专为黄金岁月的单身人士而设的交友网站
2020/08/16 全球购物
八项规定整改方案
2014/02/21 职场文书
个人自我鉴定总结
2014/03/25 职场文书
行政秘书工作自我鉴定
2014/09/15 职场文书
2014党员自我评议表范文
2014/09/20 职场文书
党员群众路线教育实践活动剖析材料
2014/10/10 职场文书
初中教师个人工作总结
2015/02/10 职场文书
暑假打工感想
2015/08/07 职场文书
怎样写好演讲稿题目?
2019/08/21 职场文书
python 使用Tensorflow训练BP神经网络实现鸢尾花分类
2021/05/12 Python
只需要这一行代码就能让python计算速度提高十倍
2021/05/24 Python
对Keras自带Loss Function的深入研究
2021/05/25 Python
DIV CSS实现网页背景半透明效果
2021/12/06 HTML / CSS
Golang并发工具Singleflight
2022/05/06 Golang