提高javascript效率 一次判断,而不要次次判断_javascript技巧_脚本之家

判断嘛,就是面临2个或以上的选项时进行选择。比如我家门前去公司有一个岔路,只要我第一次知道了哪一条路是对的,那我下一次或以后的每次都不用再思考了,直接走那条路即可——当然,突发天灾时不算。
做出判断是需要时间的,是需要对应条件的。正确的判断很好,但每次面临岔路,哪怕是走了无数次的岔路,都来进行一下判断,无疑是一种脑残行为。
下面来看一个我们平时经常看到的JS函数,他的作用是判断浏览器类型然后设置对应的透明度属性:
复制代码 代码如下: function setAlpha{ if
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 = { var set; if
{ set = function { obj.style.opacity = alpha * 0.01; } } else { set =
function{ obj.style.filter = “alpha(opacity=” + alpha + “)”; } } return
set; })()
也许你要不满了:这是什么玩意儿啊,好像初学者的水平但是!这个却比前面的版本效率高很多。不信你可以在firefox和ie6下分别alert一下这个函数,就明白了。
通过自执行函数,当声明setAlpha的时候就执行了函数,而这个函数的作用就是,判断浏览器,并确定该使用哪种设置透明度的方法。由于浏览器的类型在打开页面后就不可能再变化,也就是以后都不用再判断了。就算你调用10万次这个函数,他也不会再判断,而是直接执行。
虽然代码丑,但境界就不同了…
这个例子只是一个小小示范,我只是希望你能明白的道理,并发扬光大。减少判断次数,对js的效率是一个很大的提高。转自:jo2.org

1.css设置透明度

透明度在IE浏览器和其他相关浏览器中的设置方法是不一样的,IE使用滤镜filter的alpha属性,firefox和其它浏览器不支持滤镜,它们使用opactiy属性设置透明度,下面示例设置透明度为30%:

IE:filter: alpha;firefox:opacity;

2.使用js设置透明度

为了兼容IE与其他浏览器对透明度的设置,我们需要对以上两种样式分别进行设置。下面是一段示例代码:

复制代码 代码如下:var alpha = 30;
//透明度值变量var oDiv = document.getElementById;
//获取DOM元素对象oDiv.style.filter = ‘alpha’;
//设置IE的透明度oDiv.style.opacity = alpha / 100;
//设置fierfox等透明度,注意透明度值是小数

3.jQuery设置透明度

jQuery中对透明度的设置进行了整合,兼容IE和其他浏览器,修改opactiy属性值即可,值为小数,因此只需要设置一次即可。下面是一段示例代码:

复制代码 代码如下:${ $.css;
//设置透明度});

由此可见,使用jQuery进行透明度设置,大大减少了代码编写的难度,同时可以很好地保证不同浏览器的兼容性,但是使用jQuery需要导入jQuery的库文件,在某些场合会给站点的访问速度造成影响,如果要求不是太高,我们也可以直接使用js实现我们需要的效果,下面给出一段使用js实现半透明效果的完整示例代码。

澳门贵宾会娱乐官网,4.应用实例

该实例使用原生js实现一个div的淡入淡出效果;鼠标移入div区域,透明度为100%,鼠标移出div区域透明度为30%,同时用时间控制透明度转换效果;

复制代码
代码如下:window.onload=function(){ var oDiv =
document.getElementById;//获取div的DOM对象 oDiv.onmouseover = function()
//鼠标移入方法 { startMove; }; oDiv.onmouseout = function()
//鼠标移出方法 { startMove; };}var timer = null;//时间对象var alpha =
30;//透明度初始值function startMove{ var oDiv = document.getElementById;
clearInterval;//清空时间对象 timer = setInterval{ var speed = 0; if{
speed =5; }else{ speed = -5; } if{ clearInterval; }else{ alpha +=speed;
//透明度值增加效果 oDiv.style.filter = ‘alpha’; //设置IE透明度
oDiv.style.opacity = alpha / 100; //设置其他浏览器 } },30);}

window的onload函数指定了在页面加载的时候需要执行的方法,document.getElementById实现通过元素的id得到元素对象,然后通过得到对象的onmouseover绑定了鼠标移到指定层上面时对应需要执行的函数,该实例执行startMove,鼠标移出层通过onmouseout绑定对应的执行函数,该实例执行startMove。

startMove函数实现的功能是将指定元素的透明度设置为传入参数iTarget,范围需要在0-255之间,并使用setInterval启动了一个定时器实现动画效果。

总结:说到底就两个属性,一个是这对火狐,谷歌这类浏览器的属性opacity直接设置一个小数即可,另一个针对IE的属性filter:
alpha,都设置好即可,另外jQuery大大简化了相应的操作,如果网站上用到了jQuery的库,还是很推荐使用jQuery的方法的。

发表评论

电子邮件地址不会被公开。 必填项已用*标注