JavaScript 函数惰性载入的实现及其优点介绍


Posted in Javascript onAugust 12, 2013

最近看JavaScript高级程序设计,大有收获,接下来几天写一下读书笔记。之前写了一篇Ajax初步理解的随笔,里面有个函数用来创建XmlHttpRequest对象,浏览器兼容性原因,写出的代码通过大量if判断或者try,catch语句将函数引导到正确代码处。

<script type="text/javascript"> 
function createXHR(){ 
var xhr = null; 
try { 
// Firefox, Opera 8.0+, Safari,IE7+ 
xhr = new XMLHttpRequest(); 
} 
catch (e) { 
// Internet Explorer 
try { 
xhr = new ActiveXObject("Msxml2.XMLHTTP"); 
} 
catch (e) { 
try { 
xhr = new ActiveXObject("Microsoft.XMLHTTP"); 
} 
catch (e) { 
xhr = null; 
} 
} 
} 
return xhr; 
} 
</script>

每次调用这个函数的时候,都要先进行浏览器能力检查,首先检查浏览器是否支持内置的XMLHyypRequest对象,如果不支持然后检查各版本基于ActiveX的XMLHttpRequest,每次调用该函数都是这样,其实当第一次执行完后,如果浏览器支持某个特定XMLHttpRequest对象,那么下次执行的时候这种支持性并不会改变,没必要再进行一边检测,即使只有一个if语句,执行也肯定比没有要慢,如果我们可以让if语句不必每次执行,那么就可以在频繁调用的情况下提高执行速度。解决方案就是称之为惰性载入的技巧。

惰性载入

惰性载入表示函数执行的分支只会在函数第一次掉用的时候执行,在第一次调用过程中,该函数会被覆盖为另一个按照合适方式执行的函数,这样任何对原函数的调用就不用再经过执行的分支了。createXHR函数可以被改写为这样

function createXHR(){ 
var xhr=null; 
if(typeof XMLHttpRequest !='undefined'){ 
xhr = new XMLHttpRequest(); 
createXHR=function(){ 
return new XMLHttpRequest(); 
} 
}else{ 
try { 
xhr = new ActiveXObject("Msxml2.XMLHTTP"); 
createXHR=function(){ 
return new ActiveXObject("Msxml2.XMLHTTP"); 
} 
} 
catch (e) { 
try { 
xhr = new ActiveXObject("Microsoft.XMLHTTP"); 
createXHR=function(){ 
return new ActiveXObject("Microsoft.XMLHTTP"); 
} 
} 
catch (e) { 
createXHR=function(){ 
return null; 
} 
} 
} 
} 
return xhr; 
}

在这个惰性载入的createXHR中第一次执行的时候每个分支都会为createXHR重新赋值,覆盖原函数,返回xhr对象,而第二次执行的时候就会直接调用重写后的函数,这样就不必执行每个分支重新做检测了。

优点

惰性载入函数有两个主要优点,第一是显而易见的效率问题,虽然在第一次执行的时候函数会意味赋值而执行的慢一些,但是后续的调用会因为避免的重复检测更快;第二个是要执行的适当代码只有当实际调用函数是才执行,很多JavaScript库在在加载的时候就根据浏览器不同而执行很多分支,把所有东西实现设置好,而惰性载入函数将计算延迟,不影响初始脚本的执行时间。

Javascript 相关文章推荐
Javascript事件热键兼容ie|firefox
Dec 30 Javascript
ModelDialog JavaScript模态对话框类代码
Apr 17 Javascript
扩展IE中一些不兼容的方法如contains、startWith等等
Jan 09 Javascript
javascript中interval与setTimeOut的区别示例介绍
Mar 14 Javascript
自定义jQuery插件方式实现强制对象重绘的方法
Mar 23 Javascript
BootStrap下的弹出框加载select2框架失败的解决方法
Aug 31 Javascript
Angularjs渲染的 using 指令的星级评分系统示例
Nov 09 Javascript
微信小程序保存多张图片的实现方法
Mar 05 Javascript
Node.js + express基本用法教程
Mar 14 Javascript
解决layui弹框失效的问题
Sep 09 Javascript
js实现时钟定时器
Mar 26 Javascript
jquery插件实现悬浮的菜单
Apr 24 jQuery
document.write()及其输出内容的样式、位置控制
Aug 12 #Javascript
兼容ie、firefox的图片自动缩放的css跟js代码分享
Aug 12 #Javascript
Js点击弹出下拉菜单效果实例
Aug 12 #Javascript
jQuery自动切换/点击切换选项卡效果的小例子
Aug 12 #Javascript
jquery 按钮状态效果 正常、移上、按下
Aug 12 #Javascript
checkbox设置复选框的只读效果不让用户勾选
Aug 12 #Javascript
Jquery easyui 下loaing效果示例代码
Aug 12 #Javascript
You might like
ajax实现无刷新分页(php)
2010/07/18 PHP
PHP连接操作access数据库实例
2015/03/30 PHP
ThinkPHP文件缓存类代码分享
2015/04/22 PHP
PHP获得数组交集与差集的方法
2015/06/10 PHP
php数组分页实现方法
2016/04/30 PHP
php实现xml与json之间的相互转换功能实例
2016/07/07 PHP
thinkPHP5.0框架事务处理操作简单示例
2018/09/07 PHP
PHP中通过getopt解析GNU C风格命令行选项
2019/11/18 PHP
Jquery调用webService远程访问出错的解决方法
2010/05/21 Javascript
javascript中对Attr(dom中属性)的操作示例讲解
2013/12/02 Javascript
ExtJS如何设置与获取radio控件的选取状态
2014/01/22 Javascript
JavaScript设计模式之抽象工厂模式介绍
2014/12/28 Javascript
使用AngularJS处理单选框和复选框的简单方法
2015/06/19 Javascript
JS组件Bootstrap Select2使用方法解析
2016/05/30 Javascript
js获取浏览器高度 窗口高度 元素尺寸 偏移属性的方法
2016/11/21 Javascript
Javascript中 带名 匿名 箭头函数的重要区别(推荐)
2017/01/29 Javascript
MvcPager分页控件 适用于Bootstrap
2017/06/03 Javascript
js Date()日期函数浏览器兼容问题解决方法
2017/09/12 Javascript
用React实现一个完整的TodoList的示例代码
2017/10/30 Javascript
收集前端面试题之url、href、src
2018/03/22 Javascript
vue和webpack安装命令详解
2018/06/15 Javascript
vue-router判断页面未登录自动跳转到登录页的方法示例
2018/11/04 Javascript
使用jquery的cookie实现登录页记住用户名和密码的方法
2019/03/13 jQuery
es6函数之rest参数用法实例分析
2020/04/18 Javascript
[52:03]DOTA2-DPC中国联赛 正赛 Ehome vs iG BO3 第三场 1月31日
2021/03/11 DOTA
用python实现批量重命名文件的代码
2012/05/25 Python
Python字符串详细介绍
2015/05/09 Python
Python实现对字典分别按键(key)和值(value)进行排序的方法分析
2018/12/19 Python
python3调用windows dos命令的例子
2019/08/14 Python
python和php哪个容易学
2020/06/19 Python
基于tf.shape(tensor)和tensor.shape()的区别说明
2020/06/30 Python
浅谈pandas dataframe对除数是零的处理
2020/07/20 Python
蒂娜商店:Tiina the Store
2019/12/07 全球购物
包装类的功能、种类、常用方法
2012/01/27 面试题
第二层交换机和路由器的区别?第三层交换机和路由器的区别?
2013/05/23 面试题
Vue.Draggable实现交换位置
2022/04/07 Vue.js