提高javascript效率 一次判断,而不要次次判断


Posted in Javascript onMarch 30, 2012

判断嘛,就是面临2个或以上的选项时进行选择。比如我家门前去公司有一个岔路,只要我第一次知道了哪一条路是对的,那我下一次或以后的每次都不用再思考了,直接走那条路即可——当然,突发天灾时不算。
做出判断是需要时间的,是需要对应条件的。正确的判断很好,但每次面临岔路,哪怕是走了无数次的岔路,都来进行一下判断,无疑是一种脑残行为。

下面来看一个我们平时经常看到的JS函数,他的作用是判断浏览器类型然后设置对应的透明度属性:

function setAlpha(obj,alpha){ 
if (-[1,]) obj.style.opacity = alpha / 100; 
else obj.style.filter = "alpha(opacity=" + alpha + ")"; 
}

这个函数有错吗?没有。先判断浏览器是否是标准浏览器,如果是,就直接通过opacity设置透明;如果不是,则使用IE滤镜来实现透明度。

逻辑清晰,代码简练,精品啊!

不过,没有错误,却有失误。

通常,这种设置透明度的函数都会用来制作淡入淡出效果,也就是说它会被setTimeout一次次的调用,直到循环结束。

这时候问题就来了。回到前面的岔路问题,这个函数就相当于,每次来到路口,都要思考判断。第1次,来到路口,骚等,我看看,噢,是firefox啊,走第1条路;第2次,又来到这路口,等等,我看看,噢,又是firefox啊,还走第1条路……第3次……第4次。。。。不管多少次,这个函数都会像最敬业的交警一样来查看你的身份————你,不烦吗?你不烦我都烦了!

这时候,如果你是过路的,你肯定希望这个交警消失。

其实,遇到岔路我们可以这样:既然已经知道只走一条路,那我干脆把另外的路给堵死算了!当然在现实生活中不可能这样做,不过在代码里却不难实现,换个思路即可。

javascript有个神奇的地方,就是匿名函数(通常用来自执行),自执行函数的意思是呢,他声明的时候就执行掉了,以后就不会再出现了,你想找都不定能找到!个人觉得,这个性不错。

看下面的代码,同样是设置透明度的函数:

var setAlpha = (function(obj,alpha){ 
var set; 
if (-[1,]) { 
set = function (obj,alpha) { 
obj.style.opacity = alpha * 0.01; 
} 
} 
else { 
set = function(obj,alpha){ 
obj.style.filter = "alpha(opacity=" + alpha + ")"; 
} 
} 
return set; 
})()

也许你要不满了:这是什么玩意儿啊,好像初学者的水平(被你看穿了。。。)但是!这个却比前面的版本效率高很多。不信你可以在firefox和ie6下分别alert一下这个函数,就明白了。

通过自执行函数,当声明setAlpha的时候就执行了函数,而这个函数的作用就是,判断浏览器,并确定该使用哪种设置透明度的方法。由于浏览器的类型在打开页面后就不可能再变化,也就是以后都不用再判断了。就算你调用10万次这个函数,他也不会再判断,而是直接执行。

虽然代码丑,但境界就不同了…

这个例子只是一个小小示范,我只是希望你能明白【一次判断,而不要次次判断】的道理,并发扬光大。减少判断次数,对js的效率是一个很大的提高。
转自:jo2.org

Javascript 相关文章推荐
B/S开发中常用javaScript技术与代码
Mar 09 Javascript
jquery实现的让超出显示范围外的导航自动固定屏幕最顶上
Sep 22 Javascript
js的表单操作 简单计算器
Dec 29 Javascript
JS中eval函数的使用示例
Jul 21 Javascript
javascript实现全角与半角字符的转换
Jan 07 Javascript
flash+jQuery实现可关闭及重复播放的压顶广告
Apr 15 Javascript
JS判断字符串包含的方法
May 05 Javascript
BootStrap智能表单实战系列(七)验证的支持
Jun 13 Javascript
AngularJS中使用ngModal模态框实例
May 27 Javascript
JS中把函数作为另一函数的参数传递方法(总结)
Jun 28 Javascript
vue.extend实现alert模态框弹窗组件
Apr 28 Javascript
JavaScript实现简易计算器小功能
Oct 22 Javascript
一个关于javascript匿名函数的问题分析
Mar 30 #Javascript
JavaScript 基础篇(一)
Mar 30 #Javascript
js确定对象类型方法
Mar 30 #Javascript
js 浏览器事件介绍
Mar 30 #Javascript
js中eval详解
Mar 30 #Javascript
关于jquery性能最佳实践的讨论,与求教
Mar 30 #Javascript
从面试题学习Javascript 面向对象(创建对象)
Mar 30 #Javascript
You might like
锁定年轻人的双倍活力 星巴克推出星倍醇即饮浓咖啡
2021/03/03 咖啡文化
PHP+ajax 无刷新删除数据
2010/02/20 PHP
根据ip调用新浪api获取城市名并转成拼音
2014/03/07 PHP
完整删除ecshop中获取店铺信息的API
2014/12/24 PHP
PHP定时任务获取微信access_token的方法
2016/10/10 PHP
详解ThinkPHP3.2.3验证码显示、刷新、校验
2016/12/29 PHP
PHP中字符串长度的截取用法示例
2017/01/12 PHP
ThinkPHP5&5.1框架关联模型分页操作示例
2019/08/03 PHP
MooTools 1.2介绍
2009/09/14 Javascript
jQuery 跨域访问问题解决方法
2009/12/02 Javascript
JQuery1.4+ Ajax IE8 内存泄漏问题
2010/10/15 Javascript
javascript jscroll模拟html元素滚动条
2012/12/18 Javascript
jquery中使用循环下拉菜单示例代码
2014/09/24 Javascript
Bootstrap的Carousel配合dropload.js实现移动端滑动切换图片
2017/03/10 Javascript
详解基于Node.js的微信JS-SDK后端接口实现代码
2017/07/15 Javascript
bootstrap select下拉搜索插件使用方法详解
2017/11/23 Javascript
vue+vuex+axios+echarts画一个动态更新的中国地图的方法
2017/12/19 Javascript
Vue.js 踩坑记之双向绑定
2018/05/03 Javascript
vue.js动画中的js钩子函数的实现
2018/07/06 Javascript
优雅的在React项目中使用Redux的方法
2018/11/10 Javascript
详解VUE单页应用骨架屏方案
2019/01/17 Javascript
vuejs数据超出单行显示更多,点击展开剩余数据实例
2019/05/05 Javascript
js+canvas实现转盘效果(两个版本)
2020/09/13 Javascript
python 实现文件的递归拷贝实现代码
2012/08/02 Python
一个基于flask的web应用诞生 bootstrap框架美化(3)
2017/04/11 Python
Python实现投影法分割图像示例(一)
2020/01/17 Python
在pycharm中关掉ipython console/PyDev操作
2020/06/09 Python
Python如何实现大型数组运算(使用NumPy)
2020/07/24 Python
scrapy在python爬虫中搭建出错的解决方法
2020/11/22 Python
PHP中如何创建和修改数组
2012/05/02 面试题
创新型城市实施方案
2014/03/06 职场文书
公立医院改革实施方案
2014/03/14 职场文书
土建专业大学生自荐信范文
2014/04/09 职场文书
《花瓣飘香》教学反思
2014/04/15 职场文书
乐山大佛导游词
2015/02/02 职场文书
2016年领导干部正风肃纪心得体会
2015/10/09 职场文书