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文件的函数代码分享
Jul 28 Javascript
制作jquery遮罩层效果导航菜单代码分享
Dec 25 Javascript
jquery操作checkbox实现全选和取消全选
May 02 Javascript
jQuery $.each遍历对象、数组用法实例
Apr 16 Javascript
深入理解Java线程编程中的阻塞队列容器
Dec 07 Javascript
Immutable 在 JavaScript 中的应用
May 02 Javascript
JavaScript易错知识点整理
Dec 05 Javascript
three.js中3D视野的缩放实现代码
Nov 16 Javascript
JS实现模糊查询带下拉匹配效果
Jun 21 Javascript
浅析Vue 和微信小程序的区别、比较
Aug 03 Javascript
Vue实现点击按钮复制文本内容的例子
Nov 09 Javascript
微信小程序动态添加和删除组件的现实
Feb 28 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设计模式 Command(命令模式)
2011/06/26 PHP
php及codeigniter使用session-cookie的方法(详解)
2017/04/06 PHP
PHP PDOStatement::setFetchMode讲解
2019/02/03 PHP
php多进程应用场景实例详解
2019/07/22 PHP
php创建类并调用的实例方法
2019/09/25 PHP
PHP sdk文档处理常用代码示例解析
2020/12/09 PHP
简单常用的幻灯片播放实现代码
2013/09/25 Javascript
javascript Event对象详解及使用示例
2013/11/22 Javascript
JS通过分析userAgent属性来判断浏览器的类型及版本
2014/03/28 Javascript
jQuery中DOM树操作之使用反向插入方法实例分析
2015/01/23 Javascript
JavaScript实现文字与图片拖拽效果的方法
2015/02/16 Javascript
扩展Bootstrap Tooltip插件使其可交互的方法
2016/11/07 Javascript
Vue.js如何优雅的进行form validation
2017/04/07 Javascript
深入理解Nodejs Global 模块
2017/06/03 NodeJs
详解express与koa中间件模式对比
2017/08/07 Javascript
微信小程序出现wx.getLocation再次授权问题的解决方法分析
2019/01/16 Javascript
Vue 实现登录界面验证码功能
2020/01/03 Javascript
微信小程序scroll-view实现滚动到锚点左侧导航栏点餐功能(点击种类,滚动到锚点)
2020/06/11 Javascript
antd design table更改某行数据的样式操作
2020/10/31 Javascript
vue+element实现动态加载表单
2020/12/13 Vue.js
Sublime开发python程序的示例代码
2018/01/24 Python
pyqt5对用qt designer设计的窗体实现弹出子窗口的示例
2019/06/19 Python
如何在python开发工具PyCharm中搭建QtPy环境(教程详解)
2020/02/04 Python
Python 字节流,字符串,十六进制相互转换实例(binascii,bytes)
2020/05/11 Python
使用Django搭建网站实现商品分页功能
2020/05/22 Python
Clarks英国官方网站:全球领军鞋履品牌
2016/11/26 全球购物
WatchShop法国:英国排名第一的独立手表零售商
2020/02/17 全球购物
高考自主招生自荐信
2013/10/20 职场文书
户籍证明的格式
2014/01/13 职场文书
关于赌博的检讨书
2014/01/24 职场文书
人力资源专员岗位职责
2014/01/30 职场文书
幼儿园儿童节活动主持词+串词大全
2014/03/21 职场文书
土建工程师岗位职责
2014/06/10 职场文书
2015年实习单位评语
2015/03/25 职场文书
2016年小学推普宣传周活动总结
2016/04/06 职场文书
新手入门Mysql--概念
2021/06/18 MySQL