任何你写的代码,超过 6 个月不去看它,当你再看时,都像是别人写的。
条件语句的写法
常规写法
if (type === 'foo' || type === 'bar') {
}
写法1:用正则
if (/^(foo|bar)$/.test(type)) {
}
写法2:用对象
if (({foo:1, bar:1})[type]) {
}
对于上面的3种写法。
- 常规写法的性能比用正则好。
- 在条件判断数量(数量小于5)比较少的情况下,常规写法比用对象快。条件多的情况下,用对象更快。
具体的benchmark 见这里
常规写法
if (value == 0) {
return result0;
} else if (value == 1) {
return result1;
} else if (value == 2) {
return result2;
} else if (value == 3) {
return result3;
} else if (value == 4) {
return result4;
} else if (value == 5) {
return result5;
} else if (value == 6) {
return result6;
} else if (value == 7) {
return result7;
} else if (value == 8) {
return result8;
} else if (value == 9) {
return result9;
} else {
return result10;
}
优化写法:用二分法
if (value < 6) {
if (value < 3) {
if (value == 0) {
return result0;
} else if (value == 1) {
return result1;
} else {
return result2;
}
} else {
if (value == 3) {
return result3;
} else if (value == 4) {
return result4;
} else {
return result5;
}
}
} else {
if (value < 8) {
if (value == 6) {
return result6;
} else {
return result7;
}
} else {
if (value == 8) {
return result8;
} else if (value == 9) {
return result9;
} else {
return result10;
}
}
}
判断值是数字的常规写法
if (value == 0) {
return result0;
} else if (value == 1) {
return result1;
} else if (value == 2) {
return result2;
}
优化写法: 用数组
var results = [result0, result1, result2];
return results[value];
对于 if 内容只有一行内容的简写
var
type = 'foo',
type2 = 'bar',
result = 0;
type == 'foo' && result++;
console.log(result); // 1
!type == 'foo' || result++;
console.log(result); // 2
type == 'foo' && type2 == 'bar' && result++;
console.log(result); //3
type == 'foo' && type2 == 'bar' && result == 3 && (result=0)
console.log(result); //0
type == 'OOF' || result++; //equivalent: type != 'OOF' && result++;
console.log(result); //1
所有 JavaScript 模式:http://shichuan.github.io/javascript-patterns/
文章推荐
《Vue 组件间的样式污染》
背景
Vue 组件的组件化写法符合 web component 这种面向未来的规范,然而在样式隔离方面,它依然有一点美中不足。
概要
- 污染是如何产生的?
- 增加 Scoped 标识
- ScopeId 的继承
- 怎么破?
- 这应当属于 Vue-loader 的一个 bug
网友评论