提高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 相关文章推荐
Jquery中增加参数与Json转换代码
Nov 20 Javascript
JavaScript Distilled 基础知识与函数
Apr 07 Javascript
jquery 实现密码框的显示与隐藏示例代码
Sep 18 Javascript
阻止事件(取消浏览器对事件的默认行为并阻止其传播)
Nov 03 Javascript
javascript history对象(历史记录)使用方法(实现浏览器前进后退)
Jan 07 Javascript
使用jQuery的attr方法来修改onclick值
Jul 07 Javascript
jQuery使用DataTable实现删除数据后重新加载功能
Feb 27 Javascript
jQuery实现简单日期格式化功能示例
Sep 19 jQuery
微信小程序实现的日期午别医生排班表功能示例
Jan 09 Javascript
mpvue实现小程序签到金币掉落动画(api实现)
Oct 17 Javascript
Vue实现开关按钮拖拽效果
Sep 22 Javascript
nginx配置域名后的二级目录访问不同项目的配置操作
Nov 06 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编码转换函数 自动转换字符集支持数组转换
2012/12/16 PHP
分享ThinkPHP3.2中关联查询解决思路
2015/09/20 PHP
php自动加载方式集合
2016/04/04 PHP
用javascript获取地址栏参数
2006/12/22 Javascript
javaScript call 函数的用法说明
2010/04/09 Javascript
JS维吉尼亚密码算法实现代码
2010/11/09 Javascript
JavaScript中的small()方法使用详解
2015/06/08 Javascript
js实现分割上传大文件
2016/03/09 Javascript
AngularJS实现分页显示数据库信息
2016/07/01 Javascript
JS继承与闭包及JS实现继承的三种方式
2017/10/15 Javascript
在vue项目创建的后初始化首次使用stylus安装方法分享
2018/01/25 Javascript
Vue精简版风格指南(推荐)
2018/01/30 Javascript
JSON的parse()方法介绍
2019/01/31 Javascript
Node.js一行代码实现静态文件服务器的方法步骤
2019/05/07 Javascript
JQuery事件委托原理与用法实例分析
2019/05/13 jQuery
laypage+SpringMVC实现后端分页
2019/07/27 Javascript
使用go和python递归删除.ds store文件的方法
2014/01/22 Python
python实现文件名批量替换和内容替换
2014/03/20 Python
python的描述符(descriptor)、装饰器(property)造成的一个无限递归问题分享
2014/07/09 Python
高性能web服务器框架Tornado简单实现restful接口及开发实例
2014/07/16 Python
Python基于Tkinter实现的记事本实例
2015/06/17 Python
python访问mysql数据库的实现方法(2则示例)
2016/01/06 Python
DataFrame中去除指定列为空的行方法
2018/04/08 Python
浅谈python日志的配置文件路径问题
2018/04/28 Python
Python爬虫常用库的安装及其环境配置
2018/09/19 Python
Python socket模块方法实现详解
2019/11/05 Python
Django集成celery发送异步邮件实例
2019/12/17 Python
Python tkinter实现简单加法计算器代码实例
2020/05/13 Python
python中类与对象之间的关系详解
2020/12/16 Python
利用html5 canvas动态画饼状图的示例代码
2018/04/02 HTML / CSS
美国在线鲜花速递:ProFlowers
2017/01/05 全球购物
2014迎新年晚会策划方案
2014/02/23 职场文书
高效课堂教学反思
2016/02/24 职场文书
css样式important规则的正确使用方式
2022/06/10 HTML / CSS
详解apache编译安装httpd-2.4.54及三种风格的init程序特点和区别
2022/07/15 Servers
JS实现刷新网页后之前浏览位置保持不变示例详解
2022/08/14 Javascript