提高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常用对话框小集
Sep 13 Javascript
解决jquery操作checkbox火狐下第二次无法勾选问题
Feb 10 Javascript
javascript匿名函数实例分析
Nov 18 Javascript
Javascript基础教程之关键字和保留字汇总
Jan 18 Javascript
javascript读取文本节点方法小结
Dec 15 Javascript
在vue-cli中组件通信的方法
Dec 16 Javascript
webpack将js打包后的map文件详解
Feb 22 Javascript
为什么使用koa2搭建微信第三方公众平台的原因
May 16 Javascript
Node.js中的cluster模块深入解读
Jun 11 Javascript
解决vue动态路由异步加载import组件,加载不到module的问题
Jul 26 Javascript
vue 使用post/get 下载导出文件操作
Aug 07 Javascript
keep-alive保持组件状态的方法
Dec 02 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
Apache, PHP在Windows 9x/NT下的安装与配置 (二)
2006/10/09 PHP
php导出excel格式数据问题
2014/03/11 PHP
PHP魔术方法之__call与__callStatic使用方法
2017/07/23 PHP
纯CSS3实现质感细腻丝滑按钮
2021/03/09 HTML / CSS
javascript中的delete使用详解
2013/04/11 Javascript
在js文件中如何获取basePath处理js路径问题
2013/07/10 Javascript
JS模拟实现Select效果代码
2015/09/24 Javascript
Jquery和angularjs获取check框选中的值的方法汇总
2016/01/17 Javascript
javascript判断回文数详解及实现代码
2017/02/03 Javascript
原生js实现倒计时--2018
2017/02/21 Javascript
Vue实现动态响应数据变化
2017/04/28 Javascript
Vue.js列表渲染绑定jQuery插件的正确姿势
2017/06/29 jQuery
JavaScript实现各种排序的代码详解
2017/08/28 Javascript
jquery+css3实现熊猫tv导航代码分享
2018/02/12 jQuery
Vue.js 踩坑记之双向绑定
2018/05/03 Javascript
解析vue路由异步组件和懒加载案例
2018/06/08 Javascript
Vue中通过属性绑定为元素绑定style行内样式的实例代码
2020/04/30 Javascript
Vue router传递参数并解决刷新页面参数丢失问题
2020/12/02 Vue.js
Python中实现远程调用(RPC、RMI)简单例子
2014/04/28 Python
详解Python多线程Selenium跨浏览器测试
2017/04/01 Python
解决Matplotlib图表不能在Pycharm中显示的问题
2018/05/24 Python
在ubuntu16.04中将python3设置为默认的命令写法
2018/10/31 Python
python实现连连看游戏
2020/02/14 Python
浅谈pc和移动端的响应式的使用
2019/01/03 HTML / CSS
DHC中国官方购物网站:日本通信销售No.1化妆品
2016/08/20 全球购物
Dillard’s百货官网:Dillards.com
2018/05/26 全球购物
Juicy Couture Beauty官方网站:香水和化妆品
2019/03/12 全球购物
模具专业推荐信
2013/10/30 职场文书
关于抽烟的检讨书
2014/02/25 职场文书
《长相思》听课反思
2014/04/10 职场文书
党的群众路线教育实践活动总结
2014/10/30 职场文书
汽车销售助理岗位职责
2015/04/14 职场文书
Python控制台输出俄罗斯方块移动和旋转功能
2021/04/18 Python
Go语言中break label与goto label的区别
2021/04/28 Golang
springboot 自定义配置 解决Boolean属性不生效
2022/03/18 Java/Android
Win11开始菜单添加休眠选项
2022/04/19 数码科技