提高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 相关文章推荐
YUI 读码日记之 YAHOO.util.Dom - Part.1
Mar 22 Javascript
js中传递特殊字符(+,&)的方法
Jan 16 Javascript
JavaScript fontsize方法入门实例(按照指定的尺寸来显示字符串)
Oct 17 Javascript
AngularJS单选框及多选框实现双向动态绑定
Jan 13 Javascript
bootstrap监听滚动实现头部跟随滚动
Nov 08 Javascript
webpack3+React 的配置全解
Aug 21 Javascript
深入浅出webpack之externals的使用
Dec 04 Javascript
react redux入门示例
Apr 19 Javascript
vue实现跨域的方法分析
May 21 Javascript
vue实现购物车小案例
Sep 27 Javascript
新手入门js闭包学习过程解析
Oct 08 Javascript
JavaScript实现Tab标签页切换的最简便方式(4种)
Jun 28 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
Zend studio for eclipse中使php可以调用mysql相关函数的设置方法
2008/10/13 PHP
PHP获取毫秒级时间戳的方法
2015/04/15 PHP
jQuery+PHP发布的内容进行无刷新分页(Fckeditor)
2015/10/22 PHP
php如何执行非缓冲查询API
2016/07/22 PHP
Yii2框架自定义类统一处理url操作示例
2019/05/25 PHP
windows 2008r2+php5.6.28环境搭建详细过程
2019/06/18 PHP
JavaScript 快捷键设置实现代码
2009/03/13 Javascript
通过下拉框的值来确定输入框是否可以为空的代码
2011/10/18 Javascript
利用进制转换压缩数字函数分享
2014/01/02 Javascript
Redis基本知识、安装、部署、配置笔记
2015/03/05 Javascript
bootstrap-wysiwyg结合ajax实现图片上传实时刷新功能
2016/05/27 Javascript
分享javascript、jquery实用代码段
2016/10/20 Javascript
jQuery实现扑克正反面翻牌效果
2017/03/10 Javascript
浅谈Express异步进化史
2017/09/09 Javascript
Vue-router 中hash模式和history模式的区别
2018/07/24 Javascript
[04:44]显微镜下的DOTA2第二期——你所没有注意到的细节
2014/06/20 DOTA
[57:38]2018DOTA2亚洲邀请赛3月30日 小组赛A组 OpTic VS OG
2018/03/31 DOTA
python实现图片批量剪切示例
2014/03/25 Python
解决python3 urllib中urlopen报错的问题
2017/03/25 Python
Python图像处理之颜色的定义与使用分析
2019/01/03 Python
python实现websocket的客户端压力测试
2019/06/25 Python
Python分析彩票记录并预测中奖号码过程详解
2019/07/09 Python
Python爬虫爬取煎蛋网图片代码实例
2019/12/16 Python
基于python实现微信好友数据分析(简单)
2020/02/16 Python
一文彻底解决HTML5页面中长按保存图片功能
2019/06/10 HTML / CSS
Mistine官方海外旗舰店:泰国国民彩妆品牌
2016/12/28 全球购物
雅萌 (YA-MAN) :日本美容家电领域的龙头企业
2017/05/12 全球购物
ghd官网:英国ghd直发器品牌
2018/05/04 全球购物
捷克玩具商店:Bambule
2019/02/23 全球购物
2014全国两会学习心得体会2000字
2014/03/10 职场文书
购房委托书范本
2014/09/18 职场文书
化验员岗位职责
2015/02/14 职场文书
庆元旦主持词
2015/07/06 职场文书
承诺书的内容有哪些,怎么写?
2019/06/21 职场文书
详解Java实践之抽象工厂模式
2021/06/18 Java/Android
Java并发编程必备之Future机制
2021/06/30 Java/Android