提高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 各浏览器的 Javascript 效率对比
Jan 23 Javascript
jquery maxlength使用说明
Sep 09 Javascript
ActiveX控件与Javascript之间的交互示例
Jun 04 Javascript
jQuery实现瀑布流的取巧做法分享
Jan 12 Javascript
jQuery中replaceAll()方法用法实例
Jan 16 Javascript
JavaScript中数据结构与算法(四):串(BF)
Jun 19 Javascript
JavaScript+canvas实现七色板效果实例
Feb 18 Javascript
浅谈Sublime Text 3运行JavaScript控制台
Jun 06 Javascript
javascript判断元素存在和判断元素存在于实时的dom中的方法
Jan 17 Javascript
JavaScript学习笔记之DOM基础操作实例小结
Jan 09 Javascript
微信小程序实现轨迹回放的示例代码
Dec 13 Javascript
vue element和nuxt的使用技巧分享
Jan 14 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
Discuz 模板语句分析及知识技巧
2009/08/21 PHP
php 判断服务器操作系统的类型
2014/02/17 PHP
PHP入门教程之使用Mysqli操作数据库的方法(连接,查询,事务回滚等)
2016/09/11 PHP
PHP抽象类基本用法示例
2018/12/28 PHP
在textarea文本域中显示HTML代码的方法
2007/03/06 Javascript
ExtJS 入门
2010/10/29 Javascript
JavaScript中获取未知对象属性的代码
2011/04/27 Javascript
js中的eventType事件及其浏览器支持性介绍
2013/11/29 Javascript
jquery实现select选中行、列合计示例
2014/04/25 Javascript
js简单抽奖代码
2015/01/16 Javascript
使用纯javascript实现经典扫雷游戏
2015/04/23 Javascript
ajax读取数据后使用jqchart显示图表的方法
2015/06/10 Javascript
JS实现黑色风格的网页TAB选项卡效果代码
2015/10/09 Javascript
jQuery+php实时获取及响应文本框输入内容的方法
2016/05/24 Javascript
JS实现鼠标框选效果完整实例
2016/06/20 Javascript
详解vue express启动数据服务
2017/07/05 Javascript
在 React、Vue项目中使用SVG的方法
2018/02/09 Javascript
Vue.js 中取得后台原生HTML字符串 原样显示问题的解决方法
2018/06/10 Javascript
webpack多入口多出口的实现方法
2018/08/17 Javascript
vuejs简单验证码功能完整示例
2019/01/08 Javascript
python标准日志模块logging的使用方法
2013/11/01 Python
python计数排序和基数排序算法实例
2014/04/25 Python
python django集成cas验证系统
2014/07/14 Python
Python向MySQL批量插数据的实例讲解
2018/03/31 Python
实践Vim配置python开发环境
2018/07/02 Python
python生成大写32位uuid代码
2020/03/03 Python
详细分析Python可变对象和不可变对象
2020/07/09 Python
Bally美国官网:经典瑞士鞋履、手袋及配饰奢侈品牌
2018/05/18 全球购物
CheapTickets泰国:廉价航班,查看促销价格并预订机票
2019/12/28 全球购物
最新自我评价范文
2013/11/16 职场文书
服务理念口号
2014/06/11 职场文书
2014年民主评议党员个人总结
2014/09/24 职场文书
2014年保育员个人工作总结
2014/12/02 职场文书
电影建党伟业观后感
2015/06/01 职场文书
怎样写好演讲稿题目?
2019/08/21 职场文书
MSSQL基本语法操作
2022/04/11 SQL Server