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 相关文章推荐
js 事件处理函数间的Event物件是否全等
Apr 08 Javascript
jquery获取自定义属性(attr和prop)实例介绍
Apr 21 Javascript
基于jQuery.Validate验证库知识点的详解
Apr 26 Javascript
Jquery加载时从后台读取数据绑定到dropdownList实例
Jun 09 Javascript
JQuery实现左右滚动菜单特效
Sep 28 Javascript
浅谈jQuery animate easing的具体使用方法(推荐)
Jun 17 Javascript
深入理解AngularJS中的ng-bind-html指令和$sce服务
Sep 08 Javascript
JavaScript鼠标特效大全
Sep 13 Javascript
ES6正则的扩展实例详解
Apr 25 Javascript
前端页面文件拖拽上传模块js代码示例
May 19 Javascript
Vue 基于 vuedraggable 实现选中、拖拽、排序效果
May 18 Javascript
vue键盘事件点击事件加native操作
Jul 27 Javascript
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
重置版游戏视频
2020/04/09 魔兽争霸
如何在PHP中使用Oracle数据库(2)
2006/10/09 PHP
PHP+FastCGI+Nginx配置PHP运行环境
2014/08/07 PHP
php支付宝接口用法分析
2015/01/04 PHP
用js来定义浏览器中一个左右浮动元素相对于页面主体宽度的位置的函数
2012/01/21 Javascript
Java/JS获取flash高宽的具体方法
2013/12/27 Javascript
浅谈JavaScript中setInterval和setTimeout的使用问题
2015/08/01 Javascript
javascript伸缩菜单栏实现代码分享
2015/11/12 Javascript
浅析JavaScript访问对象属性和方法及区别
2015/11/16 Javascript
php简单数据库操作类的封装
2017/06/08 Javascript
vue-router 权限控制的示例代码
2017/09/21 Javascript
javascript实现自由编辑图片代码详解
2019/06/21 Javascript
关于layui表单中按钮自动提交的解决方法
2019/09/09 Javascript
JavaScript简易计算器制作
2020/01/17 Javascript
vue 自定义组件的写法与用法详解
2020/03/04 Javascript
微信小程序实现滑动操作代码
2020/04/23 Javascript
Vue的Options用法说明
2020/08/14 Javascript
解析Python中的eval()、exec()及其相关函数
2017/12/20 Python
Python使用Selenium模块实现模拟浏览器抓取淘宝商品美食信息功能示例
2018/07/18 Python
Flask和Django框架中自定义模型类的表名、父类相关问题分析
2018/07/19 Python
Python编程中flask的简介与简单使用
2018/12/28 Python
详解Django中CBV(Class Base Views)模型源码分析
2019/02/25 Python
Python实现FM算法解析
2019/06/18 Python
python matplotlib库直方图绘制详解
2019/08/10 Python
详解Python list和numpy array的存储和读取方法
2019/11/06 Python
OpenCV中VideoCapture类的使用详解
2020/02/14 Python
python 5个顶级异步框架推荐
2020/09/09 Python
Python 如何实现数据库表结构同步
2020/09/29 Python
html5视频播放_动力节点Java学院整理
2017/07/13 HTML / CSS
法国和欧洲海边和滑雪度假:Pierre & Vacances
2017/01/04 全球购物
十佳护士获奖感言
2014/02/18 职场文书
部队2014年终工作总结
2014/11/27 职场文书
公务员年度个人总结
2015/02/12 职场文书
2015年计划生育协会工作总结
2015/05/13 职场文书
详解Redis集群搭建的三种方式
2021/05/31 Redis
Python 可迭代对象 iterable的具体使用
2021/08/07 Python