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中的$.ajax()方法应用
May 06 Javascript
SuperSlide2实现图片滚动特效
Jun 20 Javascript
jQuery在ul中显示某个li索引号的方法
Mar 17 Javascript
浅析javascript中的事件代理
Nov 06 Javascript
javascript作用域链(Scope Chain)用法实例解析
Nov 30 Javascript
javascript轮播图算法
Oct 21 Javascript
javascript事件捕获机制【深入分析IE和DOM中的事件模型】
Dec 15 Javascript
Vue中的数据监听和数据交互案例解析
Jul 12 Javascript
vue.js 添加 fastclick的支持方法
Aug 28 Javascript
脚手架vue-cli工程webpack的作用和特点
Sep 29 Javascript
原生js实现无缝轮播图
Jan 11 Javascript
vue中echarts的用法及与elementui-select的协同绑定操作
Nov 17 Vue.js
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
谈一谈收音机的高放电路
2021/03/02 无线电
php防盗链的常用方法小结
2010/07/02 PHP
开源php中文分词系统SCWS安装和使用实例
2014/04/11 PHP
PHP常用函数总结(180多个)
2016/12/25 PHP
Laravel6.2中用于用户登录的新密码确认流程详解
2019/10/16 PHP
linux mint下安装phpstorm2020包括JDK部分的教程详解
2020/09/17 PHP
PHP基于进程控制函数实现多线程
2020/12/09 PHP
JS的递增/递减运算符和带操作的赋值运算符的等价式
2007/12/08 Javascript
location.search在客户端获取Url参数的方法
2010/06/08 Javascript
Jquery 实现表格颜色交替变化鼠标移过颜色变化实例
2013/08/28 Javascript
javascript 回调函数详解
2014/11/11 Javascript
JavaScript字符串对象(string)基本用法示例
2017/01/18 Javascript
关于AngularJs数据的本地存储详解
2017/01/20 Javascript
Vue2.0组件间数据传递示例
2017/03/07 Javascript
详解React Native网络请求fetch简单封装
2017/08/10 Javascript
js 取消页面可以选中文字的功能方法
2018/01/02 Javascript
JavaScript设计模式之构造函数模式实例教程
2018/07/02 Javascript
angularJs利用$scope处理升降序的方法
2018/10/08 Javascript
AngularJs1.x自定义指令独立作用域的函数传入参数方法
2018/10/09 Javascript
JavaScript实现页面高亮操作提示和蒙板
2021/01/04 Javascript
python 全文检索引擎详解
2017/04/25 Python
python使用pipeline批量读写redis的方法
2019/02/18 Python
详解Python解决抓取内容乱码问题(decode和encode解码)
2019/03/29 Python
python @classmethod 的使用场合详解
2019/08/23 Python
Python爬取阿拉丁统计信息过程图解
2020/05/12 Python
在Tensorflow中实现leakyRelu操作详解(高效)
2020/06/30 Python
div或img图片高度随宽度自适应的方法
2020/02/06 HTML / CSS
英国IT硬件供应商,定制游戏PC:Mesh Computers
2019/03/28 全球购物
检察官就职演讲稿
2014/01/13 职场文书
音乐教师求职信
2014/06/28 职场文书
信用卡结清证明怎么写
2014/09/13 职场文书
单位员工收入证明样本
2014/10/09 职场文书
员工年终考核评语
2014/12/31 职场文书
《思路决定出路》读后感3篇
2019/12/11 职场文书
matplotlib之pyplot模块实现添加子图subplot的使用
2021/04/25 Python
「魔导具师妲莉亚永不妥协~从今天开始的自由职人生活~」1、2卷发售宣传CM公开
2022/03/21 日漫