提高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 相关文章推荐
javascript的trim,ltrim,rtrim自定义函数
Sep 21 Javascript
jQuery中click事件用法实例
Dec 26 Javascript
jQuery中attr()方法用法实例
Jan 05 Javascript
JQuery基础语法小结
Feb 27 Javascript
jquery简单实现网页层的展开与收缩效果
Aug 07 Javascript
JS组件中bootstrap multiselect两大组件较量
Jan 26 Javascript
js倒计时简单实现代码
Aug 11 Javascript
jQuery Easyui datagrid行内实现【添加】、【编辑】、【上移】、【下移】
Dec 19 Javascript
js实现音乐播放控制条
Sep 09 Javascript
JavaScript中正则表达式使数字、中文或指定字符高亮显示
Oct 31 Javascript
深入浅出理解JavaScript高级定时器原理与用法
Aug 02 Javascript
vue 数据双向绑定的实现方法
Mar 04 Vue.js
一个关于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
《星际争霸II》全新指挥官斯台特曼现已上线
2020/03/08 星际争霸
php 接口类与抽象类的实际作用
2009/11/26 PHP
php中0,null,empty,空,false,字符串关系的详细介绍
2013/06/20 PHP
关于使用key/value数据库redis和TTSERVER的心得体会
2013/06/28 PHP
php设计模式之装饰模式应用案例详解
2019/06/17 PHP
一段非常简单的让图片自动切换js代码
2006/11/10 Javascript
html读出文本文件内容
2007/01/22 Javascript
用方法封装javascript的new操作符(一)
2010/12/25 Javascript
JQuery判断HTML元素是否存在的两种解决方法
2013/12/26 Javascript
jquery实现相册一下滑动两次的方法
2015/02/09 Javascript
ECMAScript6函数剩余参数(Rest Parameters)
2015/06/12 Javascript
JavaScript数组操作详解
2017/02/04 Javascript
详解JavaScript按概率随机生成事件
2017/08/02 Javascript
从零搭一个自用的前端脚手架的方法步骤
2019/09/23 Javascript
JS回调函数简单易懂的入门实例分析
2019/09/29 Javascript
浏览器JavaScript调试功能无法使用解决方案
2020/09/18 Javascript
[04:11]DOTA2亚洲邀请赛小组赛第一日 TOP10精彩集锦
2015/01/30 DOTA
[02:27]《DAC最前线》之附加赛征程
2015/01/29 DOTA
Python中文编码那些事
2014/06/25 Python
python中尾递归用法实例详解
2015/04/28 Python
python查询mysql,返回json的实例
2018/03/26 Python
Python values()与itervalues()的用法详解
2019/11/27 Python
让IE可以变相支持CSS3选择器
2010/01/21 HTML / CSS
详解CSS3的图层阴影和文字阴影效果使用
2016/06/09 HTML / CSS
预订全球最佳旅行体验:Viator
2018/03/30 全球购物
英国曼彻斯特宠物用品品牌:Bunty Pet Products
2019/07/27 全球购物
开办饭店创业计划书
2013/12/28 职场文书
骨干教师培训制度
2014/01/13 职场文书
《再见了,亲人》教学反思
2014/02/26 职场文书
生活部的活动方案
2014/08/19 职场文书
西部计划志愿者工作总结
2015/08/11 职场文书
小学总务工作总结
2015/08/13 职场文书
2016年秋季趣味运动会开幕词
2016/03/04 职场文书
MySQL下使用Inplace和Online方式创建索引的教程
2021/05/26 MySQL
python文本处理的方案(结巴分词并去除符号)
2021/05/26 Python
python简单验证码识别的实现过程
2021/06/20 Python