文档章节

javascript中惰性载入函数

小王JOJO
 小王JOJO
发布于 2014/11/18 00:27
字数 603
阅读 69
收藏 2

我们都知道如果创建一个xhr对象(不会写,不怕,有百度,嘿嘿)

function createXHR(){ 
    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"], 
                        i,len; 
                for (i=0,len=versions.length; i < len; i++){ 
                    try { 
                        new ActiveXObject(versions[i]); 
                        arguments.callee.activeXString = versions[i]; 
                        break; 
                    } catch (ex){ 
                        //跳过
                    } 
        } 
    } 
            return new ActiveXObject(arguments.callee.activeXString); 
    } else { 
            throw new Error("No XHR object available."); 
    } 
} 

这个函数相信大家都见过,每次调用createXHR的时候,都要检测浏览器是否支持XMLHttpRequest对象,里面基本上都是一层一层的if...else... 还有 try...catch....每次都这样,想想也烦.

看看书中的方法:

第一种方法

function createXHR(){ 
        if (typeof XMLHttpRequest != "undefined"){ 
                createXHR = function(){ 
                        return new XMLHttpRequest(); 
                }; 
        } else if (typeof ActiveXObject != "undefined"){ 
            createXHR = function(){ 
                    if (typeof arguments.callee.activeXString != "string"){ 
                            var versions = ["MSXML2.XMLHttp.6.0", "MSXML2.XMLHttp.3.0","MSXML2.XMLHttp"], 
                                   i, len; 
                            for (i=0,len=versions.length; i < len; i++){ 
                                    try { 
                                        new ActiveXObject(versions[i]); 
                                        arguments.callee.activeXString = versions[i]; 
                                        break; 
                                    } catch (ex){ 
                                        //skip 
                                    } 
                            } 
                   } 
                   return new ActiveXObject(arguments.callee.activeXString); 
               }; 
        } else { 
                createXHR = function(){ 
                throw new Error("No XHR object available."); 
                }; 
        } 
        return createXHR(); 
} 

这里我们发现, 每一次分支都会对createXHR赋值 , 在第一次执行createXHR的时候,如果有内置的XMLHttpRequest对象,createXHR函数会被覆盖,下次再调用的时候,就会调用已经被覆盖的createXHR函数,直接返回一个XMLHttpRequest对象,其他的分支也是类似的, 最后一步就是调用新的createXHR函数

这里的情景是:浏览如果支持内置的XHR或者基于ActiveX的XHR,就会一直支持,在这种情况下,其实只需要一次检测就够了,所以覆盖createXHR是合适的

第二种方法

var createXHR = (function(){ 
                    if (typeof XMLHttpRequest != "undefined"){ 
                            return function(){ 
                                    return new XMLHttpRequest(); 
                            }; 
                    } else if (typeof ActiveXObject != "undefined"){ 
                            return    function(){ 
                                                    if (typeof arguments.callee.activeXString != "string"){ 
                                                        var versions = ["MSXML2.XMLHttp.6.0", "MSXML2.XMLHttp.3.0",   "MSXML2.XMLHttp"], 
                                                                i, len; 
                                                        for (i=0,len=versions.length; i < len; i++){ 
                                                                    try { 
                                                                                new ActiveXObject(versions[i]); 
                                                                                arguments.callee.activeXString = versions[i]; 
                                                                                break; 
                                                                    } catch (ex){ 
                                                                            //skip 
                                                                    } 
                                                        }
                                                   } 
                                            return new ActiveXObject(arguments.callee.activeXString); 
                                      }; 
                      } else { 
                                    return function(){ 
                                            throw new Error("No XHR object available."); 
                                    }; 
                    } 
     })(); 

第二种其实和第一种逻辑上是一样的,只不过多了第一行代码(使用var定义函数)、新增了自执行的匿名函数

总体来说,这个惰性载入函数还是有点价值的吧,只是牺牲一点性能和代码量,就能减少不必要执行的代码,但是注意会覆盖原来的函数...

© 著作权归作者所有

小王JOJO
粉丝 1
博文 7
码字总数 5082
作品 0
西青
程序员
私信 提问
利用函数的惰性载入提高 javascript 代码性能

在 javascript 代码中,因为各浏览器之间的行为的差异,我们经常会在函数中包含了大量的if语句,以检查浏览器特性,解决不同浏览器的兼容问题。 例如,我们最常见的为dom节点添加事件的函数:...

modernizr
2014/06/09
282
3
利用函数的惰性载入提高 javascript 代码性能

在 javascript 代码中,因为各浏览器之间的行为的差异,我们经常会在函数中包含了大量的 if 语句,以检查浏览器特性,解决不同浏览器的兼容问题。例如,我们最常见的为 dom 节点添加事件的函...

modernizr
2014/08/05
277
2
几个重要的javascript高级技巧

Js学的也差不多了,该是来总结一下Js中一些比较高级的智慧结晶了。基于Js的动态性、对象都是易变的、函数是第一对象等等其他语言所不包含的特性,可以在使用Js的时候创造出更高效、组织性更好...

菜到没谱
2013/06/29
483
0
所谓的javascript高级技巧

Js学的也差不多了,该是来总结一下Js中一些比较高级的智慧结晶了。基于Js的动态性、对象都是易变的、函数是第一对象等等其他语言所不包含的特性,可以在使用Js的时候创造出更高效、组织性更好...

吟啸_徐行
2014/07/02
0
2
JS 中可以提升幸福度的小技巧

本文主要介绍一些JS中用到的小技巧,可以在日常Coding中提升幸福度,将不定期更新~ 1. 类型强制转换 1.1 string强制转换为数字 可以用来转化为数字(实际上是调用方法) 然后使用来判断是否为,...

SHERlocked93
2018/07/23
0
0

没有更多内容

加载失败,请刷新页面

加载更多

怎么选择数据服务器?请记住这五条

我们应当都知道“数据无价”这个词,既然数据那么主要,选择一款安全稳定的数据服务器是很有必要的,那么如何选择一款牢靠的,稳定的数据服务器呢?我们从五个方面下手,协助您体系的了解数据...

linux-tao
32分钟前
1
0
第一讲:编写TCP Socket小程序

根据下面的步骤编写TCP Socket小程序。注意:作者必须是自己的名字。结果如下: 步骤: 1、用VC建立服务器程序 创建一个win32控制台程序 上面的代码如下,编写代码的时候切换到FileView界面,...

一匹狼工作室
34分钟前
3
0
python-protobuf2uml

首先这篇文章是参考的https://github.com/vak/protobuf2uml 本篇文章都是基于python3的 下面首先我们说一下python3的安装 wget https://github.com/protocolbuffers/protobuf/releases/down...

yiduwangkai
35分钟前
1
0
mysql通过source恢复大表小计

最近迁移一个数据库,500多张表大概600多万条数据,通过navicat导出的数据,再通过source命令导入到mysql8.0 之前也做过类似的工作,但是却从来没有这么慢过,一个小时了还没有完成,之前在笔...

休辞醉倒
36分钟前
1
0
Java、Python、C++、PHP、JavaScript这5大编程语言,我究竟该选哪个?

很多朋友在后台给我留言,问:现在这么多编程语言,Python、Java、PHP、C++、JavaScript等,究竟哪种最流行?我想这应该也是你的困扰吧! 其实他们各有优势,但是对于选择困难的程序员而言,...

Java领航员
52分钟前
1
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部