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隐藏控件的方法
Sep 21 Javascript
关于jQuery参考实例 1.0 jQuery的哲学
Apr 07 Javascript
javascript面向对象之访问对象属性的两种方式分析
Jan 13 Javascript
jQuery简单几行代码实现tab切换
Mar 10 Javascript
JavaScript将字符串转换为整数的方法
Apr 14 Javascript
javascript模拟C#格式化字符串
Aug 26 Javascript
漫谈JS引擎的运行机制 你应该知道什么
Jun 15 Javascript
Vue.js动态组件解析
Sep 09 Javascript
BootStrap整体框架之基础布局组件
Dec 15 Javascript
Node.js用readline模块实现输入输出
Dec 16 Javascript
解决vue无法设置滚动位置的问题
Oct 07 Javascript
JavaScript设计模式之命令模式实例分析
Jan 16 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
Smarty+QUICKFORM小小演示
2007/02/25 PHP
PHP 加密与解密的斗争
2009/04/17 PHP
PHP中iconv函数转码时截断字符问题的解决方法
2015/01/21 PHP
PHPExcel内存泄漏问题解决方法
2015/01/23 PHP
Yii2框架控制器、路由、Url生成操作示例
2019/05/27 PHP
PHP高并发和大流量解决方案整理
2019/12/24 PHP
让JavaScript 轻松支持函数重载 (Part 1 - 设计)
2009/08/04 Javascript
Javascript Ajax异步读取RSS文档具体实现
2013/12/12 Javascript
如何将php数组或者对象传递给javascript
2014/03/20 Javascript
JS+CSS实现的竖向简洁折叠菜单效果代码
2015/10/22 Javascript
学习使用jquery iScroll.js移动端滚动条插件
2020/03/24 Javascript
全面解析bootstrap格子布局
2016/05/22 Javascript
Three.js学习之网格
2016/08/10 Javascript
JS实现的手机端精简幻灯片效果
2016/09/05 Javascript
javascript基于原型链的继承及call和apply函数用法分析
2016/12/15 Javascript
详解Node.js利用node-git-server快速搭建git服务器
2017/09/27 Javascript
详解vuex的简单使用
2018/03/12 Javascript
深入了解javascript 数组的sort方法
2018/06/01 Javascript
vue中rem的配置的方法示例
2018/08/30 Javascript
使用koa-log4管理nodeJs日志笔记的使用方法
2018/11/30 NodeJs
JavaScript中callee和caller的区别与用法实例分析
2019/06/28 Javascript
小程序实现短信登录倒计时
2019/07/12 Javascript
Kettle中使用JavaScrip调用jar包对文件内容进行MD5加密的操作方法
2020/09/04 Javascript
python验证码识别的示例代码
2017/09/21 Python
Python 20行简单实现有道在线翻译的详解
2019/05/15 Python
Python定时任务工具之APScheduler使用方式
2019/07/24 Python
python GUI库图形界面开发之PyQt5状态栏控件QStatusBar详细使用方法实例
2020/02/28 Python
python小程序基于Jupyter实现天气查询的方法
2020/03/27 Python
AmazeUI 缩略图的实现示例
2020/08/18 HTML / CSS
伦敦最有品味的百货:Liberty London
2016/11/12 全球购物
英国时尚运动品牌的合集:The Sports Edit
2017/12/20 全球购物
Lululemon英国官网:加拿大瑜伽服装品牌
2019/01/14 全球购物
面向对象编程是如何提高软件开发水平的
2014/05/06 面试题
师范生免费教育协议书范本
2014/10/09 职场文书
2015年小学数学教研组工作总结
2015/05/21 职场文书
MySQL 全文检索的使用示例
2021/06/07 MySQL