提高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 相关文章推荐
解决JQeury显示内容没有边距内容紧挨着浏览器边线
Dec 20 Javascript
javascript实现行拖动的方法
May 27 Javascript
js弹出窗口返回值的简单实例
May 28 Javascript
详细谈谈AngularJS的子级作用域问题
Sep 05 Javascript
Bootstrap精简教程中秋大放送
Sep 15 Javascript
Bootstrap CSS布局之按钮
Dec 17 Javascript
JS无缝滚动效果实现方法分析
Dec 21 Javascript
原生js实现放大镜效果
Jan 11 Javascript
JavaScript用二分法查找数据的实例代码
Jun 17 Javascript
Angular5升级RxJS到5.5.3报错:EmptyError: no elements in sequence的解决方法
Apr 09 Javascript
小程序tab页无法传递参数的方法
Aug 03 Javascript
js获取form表单中name属性的值
Feb 27 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
phpMyAdmin下载、安装和使用入门教程
2007/05/31 PHP
CentOS 6.3下安装PHP xcache扩展模块笔记
2014/09/10 PHP
PHP树的深度编历生成迷宫及A*自动寻路算法实例分析
2015/03/10 PHP
浅谈PHP中的错误处理和异常处理
2017/02/04 PHP
Extjs4 GridPanel的主要配置参数详细介绍
2013/04/18 Javascript
js拆分字符串并将分割的数据放到数组中的方法
2015/05/06 Javascript
javascript如何写热点图
2015/12/08 Javascript
jQuery 移动端artEditor富文本编辑器
2016/01/11 Javascript
百度地图JavascriptApi Marker平滑移动及车头指向行径方向
2017/03/13 Javascript
angular动态删除ng-repaeat添加的dom节点的方法
2017/07/20 Javascript
angular中子控制器向父控制器传值的实例
2018/10/08 Javascript
vue组件中watch props根据v-if动态判断并挂载DOM的问题
2019/05/12 Javascript
JS操作字符串转数字的常见方法示例
2019/10/29 Javascript
详解nginx配置vue h5 history去除#号
2020/11/09 Javascript
python制作爬虫并将抓取结果保存到excel中
2016/04/06 Python
wxpython中Textctrl回车事件无效的解决方法
2016/07/21 Python
Python常用字符串替换函数strip、replace及sub用法示例
2018/05/21 Python
python自定义函数实现一个数的三次方计算方法
2019/01/20 Python
Python函数装饰器常见使用方法实例详解
2019/03/30 Python
python 执行终端/控制台命令的例子
2019/07/12 Python
python3实现微型的web服务器
2019/09/03 Python
浅谈numpy中np.array()与np.asarray的区别以及.tolist
2020/06/03 Python
CSS3中的clip-path使用攻略
2015/08/03 HTML / CSS
英国排名第一的最新设计师品牌手表独立零售商:TIC Watches
2016/09/24 全球购物
销售所有的狗狗产品:Dog.com
2016/10/13 全球购物
德国baby-markt婴儿用品瑞士网站:baby-markt.ch
2017/06/09 全球购物
Lookfantastic瑞典:英国知名美妆购物网站
2018/04/06 全球购物
Omio荷兰:预订火车、巴士和机票
2018/11/04 全球购物
西班牙最大的婴儿用品网上商店:Bebitus
2019/05/30 全球购物
四川internet信息高速公路(C#)笔试题
2012/02/29 面试题
车辆维修工自我评价怎么写
2013/09/20 职场文书
基层工作经历证明
2014/01/13 职场文书
诉讼授权委托书
2014/10/15 职场文书
乡镇计划生育工作汇报
2014/10/28 职场文书
民事申诉状范本
2015/05/20 职场文书
Android开发之底部导航栏的快速实现
2022/04/28 Java/Android