提高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 Split方法,indexOf方法、lastIndexOf 方法和substring 方法
Mar 21 Javascript
jQuery 创建Dom元素
May 07 Javascript
JQuery 选择器、过滤器介绍
Feb 14 Javascript
12行javascript代码绘制一个八卦图
Apr 02 Javascript
JavaScript事件委托实例分析
May 26 Javascript
JS实现的N多简单无缝滚动代码(包含图文效果)
Nov 06 Javascript
JavaScript 实现的 zip 压缩和解压缩工具包Zip.js使用详解
Dec 14 Javascript
javascript设计模式之module(模块)模式
Aug 19 Javascript
JS/jQuery判断DOM节点是否存在的简单方法
Nov 24 Javascript
bootstrap中日历范围选择插件daterangepicker的使用详解
Apr 17 Javascript
vue axios封装及API统一管理的方法
Apr 18 Javascript
JS操作json对象key、value的常用方法分析
Oct 29 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
php缓冲输出实例分析
2015/01/05 PHP
深入浅析PHP无限极分类的案例教程
2016/05/09 PHP
PHP流Streams、包装器wrapper概念与用法实例详解
2017/11/17 PHP
兼容IE与firefox火狐的回车事件(js与jquery)
2010/10/20 Javascript
jQuery的12招常用技巧分享
2011/08/08 Javascript
jquery遍历checkbox的注意事项说明
2014/02/21 Javascript
js使用for循环查询数组中是否存在某个值
2014/08/12 Javascript
深入理解javascript原型链和继承
2014/09/23 Javascript
javascript计时器详解
2015/02/28 Javascript
js正则匹配出所有图片及图片地址src的方法
2015/06/08 Javascript
简介JavaScript中setUTCSeconds()方法的使用
2015/06/12 Javascript
基于jQuery实现响应式圆形图片轮播特效
2015/11/25 Javascript
不得不分享的JavaScript常用方法函数集(上)
2015/12/23 Javascript
jquery实现简单的banner轮播效果【实例】
2016/03/30 Javascript
移动端使用localStorage缓存Js和css文的方法(web开发)
2016/09/20 Javascript
vue-cli 打包后提交到线上出现 "Uncaught SyntaxError:Unexpected token" 报错
2018/11/06 Javascript
解决JQuery的ajax函数执行失败alert函数弹框一闪而过问题
2019/04/10 jQuery
使用layui+ajax实现简单的菜单权限管理及排序的方法
2019/09/10 Javascript
Openlayers测量距离与面积的实现方法
2020/09/25 Javascript
[54:28]EG vs OG 2019国际邀请赛小组赛 BO2 第一场 8.16
2019/08/18 DOTA
Python虚拟环境Virtualenv使用教程
2015/05/18 Python
Python抓取框架 Scrapy的架构
2016/08/12 Python
Python Sqlite3以字典形式返回查询结果的实现方法
2016/10/03 Python
Python对接支付宝支付自实现功能
2019/10/10 Python
pycharm工具连接mysql数据库失败问题
2020/04/01 Python
html5 标签
2009/07/16 HTML / CSS
美国在线家居装饰店:Belle&June
2018/10/24 全球购物
德国价格合理的品牌商品购物网站:averdo
2019/03/21 全球购物
学校司机岗位职责
2013/11/14 职场文书
教师党员学习十八届四中全会思想汇报
2014/11/03 职场文书
高中生思想道德自我评价
2015/03/09 职场文书
南京南京观后感
2015/06/02 职场文书
公司庆典主持词
2015/07/04 职场文书
MySQL update set 和 and的区别
2021/05/08 MySQL
详解JAVA的控制语句
2021/11/11 Java/Android
Python使用plt.boxplot()函数绘制箱图、常用方法以及含义详解
2022/08/14 Python