JS优化：降低语句数

降低语句数

降低语句数，就是为了降低程序规模，从而达到性能调优。但是具体如何操作，我

分享一下自己目前所掌握的写法：

非var声明语句只要以独占一行的方式书写，所有末尾的“;”都能省略，一次声明多个变量的var语句，只要变量独占一行，就能省略变量之间的“，”。

Eg:

var a = document.getElementById('a')

,b = 0;

a.style.width = '20px';

a.style.height = '30px';

a.style.webkitPerspective = 1000;

if( typeof a == 'object' ) alert('object');

转换为

var a =document.getElementById('a')

b = 0

a.style.width= '20px'

a.style.height= '30px'

a.style.webkitPerspective= 1000

if( typeof a == 'object' ) alert('object') 

但我们的js一般在部署期都会先进行压缩，如果像上面的代码经过压缩后会报错，首先js引擎无法解析var a =document.getElementById(‘a’)b=0，提示b之前缺少“;”，而之前没压缩的却没报错的原因是解析器对代码行会先智能解析，尝试解析通过就没报错。

那么既要减少语句数，也要满足压缩后不会报错，要将句末“;”替换成“，”：

var a = document.getElementById('a'),b = 0;

a.style.width = '20px',

a.style.height = '30px',

a.style.webkitPerspective = 1000;

if( typeof a == 'object' ) alert('object')

此时第二，三行代码已经进行替换，但第一行声明a的语句和第四行语句末尾却没有替换!这正是要注意的规则：

1.var语句后面有其他语句，那么不能省去其末尾“;”

2.var语句前面出现以}结束的语句时，前面的语句可以省略“;”

Eg：

if (9>7) {alert('9 > 7') } var a = document.getElementById('a') ,b = 0;(ok)

functionaa(){} var a = document.getElementById('a') ,b = 0;(ok)

{ var b = 23;} var a = document.getElementById('a') ,b = 0;(ok)

if (9>7) {alert('9 > 7') } else e = 9 var a = document.getElementById('a')(wrong)

3.var语句前面出现不以}结束的语句时，前面的语句不可以省略“;”

4.if 语句没有以}结束，而且没有紧跟if，for，var，switch任一种语句时，if语句要不保持末尾“;”，要不将“;”替换成“，”，为了降低语句数，建议替换成“，”。

Eg：

vara = document.getElementById('a');

if( typeof a =='object' ) alert('object'),

setTimeout(function(){ alert('aaa') }, 100 );

5. if 语句没有以}结束，而且后面紧跟if，for，var，switch其中一种语句时，if语句必须保留末尾“;”。

Eg：

vara = document.getElementById('a');

if( typeof a =='object' ) alert('object');

if( typeof a =='object' ) alert('object');

6. for，var，switch 语句同if语句的处理一致。

7.break语句前面存在语句时，前面的语句必须保留末尾的“;”

8.break后面不是紧跟}，必须添加“;”

了解了上面的规则，再介绍一下在实际应用中的操作：

问题1：当遇到var声明语句和if语句之间有若干个语句，如何降低语句数?

摘取base_hscroll.js中的一段代码：

var b = a.slider

,c = b.children;

c[0].style.webkitPerspective = c[c.length -1].style.webkitPerspective = "1000";

a.options.autoSize && (b.style.width = a.options.page *a.wrapperW + "px");

a.maxScrollX = a.wrapperW - a.sliderW;

if ( a.options.loop ) {

…..

}

转化为：

var b = a.slider

,c = b.children;

if ( c[0].style.webkitPerspective = c[c.length -1].style.webkitPerspective = "1000"

, a.options.autoSize&& (b.style.width = a.options.page * a.wrapperW + "px")

, a.maxScrollX =a.wrapperW - a.sliderW

, a.options.loop

) {

…..

}

在这个实例中，我们可以将var声明语句与if语句之间的若干语句放到了if语句的括号之中，而且语句间用“，”分隔开，if语句的判断的依据是最末尾的a.options.loop，它是一个布尔值类型变量。

问题2：当if语句条件满足时候，执行若干语句之后return，如何降低语句数?

摘取base_hscroll.js中的一段代码：

if (b.absDistY > .58 *b.absDistX) {

b.deltaX = 0;

b.directionLocked= "y";

} return;

转化为：

if (b.absDistY > .58 *b.absDistX) return b.deltaX = 0

,b.directionLocked = "y"

,void 0;

这种写法js引擎也会先执行b.deltaX = 0,b.directionLocked= "y"这两条语句才会return，此处void 0等价于undefined，void 0在性能上优于undefined，但可阅读性差，但本文探讨高性能，先抛开可阅读性。

本文来源 我爱IT技术网 http://www.52ij.com/jishu/5214.html 转载请保留链接。