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 相关文章推荐
jQuery 使用手册(一)
Sep 23 Javascript
js 获取Listbox选择的值的代码
Apr 15 Javascript
Jquery中显示隐藏的实现代码分析
Jul 26 Javascript
JS防止用户多次提交的简单代码
Aug 01 Javascript
jquery eval解析JSON中的注意点介绍
Aug 23 Javascript
微信小程序 WXDropDownMenu组件详解及实例代码
Oct 24 Javascript
基于jQuery代码实现圆形菜单展开收缩效果
Feb 13 Javascript
jQuery列表检索功能实现代码
Jul 17 jQuery
Vue项目中跨域问题解决方案
Jun 05 Javascript
Vue2.0中三种常用传值方式(父传子、子传父、非父子组件传值)
Aug 16 Javascript
实例详解vue中的$root和$parent
Apr 29 Javascript
微信小程序监听用户登录事件的实现方法
Nov 11 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
php中文本数据翻页(留言本翻页)
2006/10/09 PHP
如何取得中文字符串中出现次数最多的子串
2013/08/08 PHP
php中session与cookie的比较
2015/01/27 PHP
WordPress中对访客评论功能的一些优化方法
2015/11/24 PHP
PHP连接及操作PostgreSQL数据库的方法详解
2019/01/30 PHP
PHP上传图片到数据库并显示的实例代码
2019/12/20 PHP
如何实现修改密码时密码框显示保存到cookie的密码
2013/12/10 Javascript
DOM基础教程之模型中的模型节点
2015/01/19 Javascript
JS验证邮件地址格式方法小结
2015/12/01 Javascript
node.js Sequelize实现单实例字段或批量自增、自减
2016/12/08 Javascript
JS创建Tag标签的方法详解
2017/06/09 Javascript
详解angularJS自定义指令间的相互交互
2017/07/05 Javascript
第一个Vue插件从封装到发布
2017/11/22 Javascript
详解Node 定时器
2018/02/26 Javascript
详解vue.js下引入百度地图jsApi的两种方法
2018/07/27 Javascript
一步一步的了解webpack4的splitChunk插件(小结)
2018/09/17 Javascript
Vue-CLI3.x 设置反向代理的方法
2018/12/06 Javascript
JavaScript实现放大镜效果代码示例
2020/04/29 Javascript
React Native登录之指纹登录篇的示例代码
2020/11/03 Javascript
python文件的md5加密方法
2016/04/06 Python
python机器学习理论与实战(六)支持向量机
2018/01/19 Python
Django 路由系统URLconf的使用
2018/10/11 Python
Python3爬虫中关于中文分词的详解
2020/07/29 Python
美国独家设计师眼镜在线光学商店:Glasses Gallery
2017/12/28 全球购物
htmlentities() 和 htmlspecialchars()有什么区别
2015/07/01 面试题
实习生的自我鉴定范文欣赏
2013/11/20 职场文书
党员违纪检讨书
2014/02/18 职场文书
森林病虫害防治方案
2014/06/02 职场文书
感恩祖国演讲稿
2014/09/09 职场文书
女生抽烟检讨书
2014/10/05 职场文书
2014年机关工会工作总结
2014/12/19 职场文书
四年级小学生评语
2014/12/26 职场文书
大学生个人年度总结范文
2015/02/15 职场文书
入党介绍人意见范文
2015/06/01 职场文书
导游词之神仙居景区
2019/11/15 职场文书
进行数据处理的6个 Python 代码块分享
2022/04/06 Python