image.png
背景
之前的一个项目，当时需求紧急，在项目结构和代码质量上有点把控不严格，为此leader命我重构，感觉这是件很有意思的事情，不仅能了解到其他同事代码风格，还能学习到其他同事的一些优秀的逻辑。
本篇将讲述一下，我在重构的过程中总结的一些良好的代码习惯。
一. 可读性强的命名
命名是提高代码可读性的第一步，也是极其重要的一步，不仅在js里要命名变量名、函数名，还要在CSS里给命名class、id，给图片命名。好的变量名要完全、准确地描述出该变量所代表的事物。下面是一些命名的规则：
- 以问题为导向
一个好记的变量名反映的通常都是问题，而不是解决方案。一个好名字通常表达的是“什么（what）”，而不是“如何（how）”。
2.最适当的名字长度
研究发现，当变量名的平均长度在10到16个字符的时候，调试程序所需花费的力气是最小的（1990）。平均名字长度在8到20个字符的程序也几乎同样容易调试。这项原则并不意味着你应该尽量把变量名控制在9到15或者10到16个字符长。它强调的是，如果你查看自己写的代码时发现了很多更短名字，那么你需要认真检查，确保这些名字含义足够清晰。
表1：变量名太长、太短或更好合适的示例
| 太长 | 太短 | 正好 |
|---|---|---|
| numberOfPeopleOnTheUsOlympicTeam, numberOfSeatsInTheStadium, maximumNumberOfPointsInModernOlympics |
n, np, ntm n, ms, nsisd m,mp,max,points |
numTeamMembers, teamMemberCount numSeatsInStadium, seatCount teamPontMax,pointsRecodrd |
note: 并不是所有短的变量名都不好，当你把一个变量名取得很短的时候，如
i，这一长度本身就对变量做了一些说明——也就是说，改变量代表的是一个临时的数据，它的作用域非常有限，适用于局部变量或者循环变量;
也并不是所有的较长的名字不好，较长的名字适用于很少用到的变量或者全局变量。
-
变量名中的计算值限定词
很多程序都有表示计算结果的变量：总额、平均值、最大值，等等。如果你要用类似于Total、Sum、Average、Max、Min、Record、String、Pointer这样的限定词来修改某个名字，那么请记住把限定词加到名字的最后。 -
变量名中的常用对仗词
- begin / end
- first / last
- locked / unlocked
- min / max
- next / previous
- old / new
- up / down
- 为状态变量命名
像这种statusFlag = 0x80这样的语句是反映不出这段代码是做什么的，除非你亲自写了这段代码，或者有文档能告诉你 statusFlag和0x80的含义。为了清楚起见，标记应该用枚举类型、具名常量，我们可以这样优化
const CONTROL_CHARACTER = '0x80';
characterType = CONTROL_CHARACTER;
- 为布尔变量命名
下面是一些格外有用的布尔变量名：
- done
- error
- found
- success 或 ok
- 为枚举类型命名
在使用枚举类型的时候，可以通过使用组前缀，如color_ , planet_ 或者 month_
二. 写好注释
代码注释一定是注明代码的目的，而不是代码的行为。
三. 降低 if else 面条代码复杂度
重构复杂的 if else代码，简单的方法是使用所谓的查找表。它通过键值对的形式来封装每个if else 的逻辑，如下代码：
function test1 (a, b, c) {}
function test2 (a, b, c) {}
function test3 (a, b, c) {}
function main (a, b, c) {
let product = getProduct();
let result;
if (product === 'aa') {
result = test1(a, b, c);
} else if (product === 'bb') {
result = test2(a, b, c);
} else if (product === 'cc') {
result = test3(a, b, c);
}
return result
}
//我们可以优化成
function main (a, b, c) {
let product = getProduct();
let productMap = {
'aa' : function (a, b, c) {/* ... */},
'bb' : function (a, b, c) {/* ... */},
'cc' : function (a, b, c) {/* ... */},
}
return productMap[product](a, b, c)
}
优化后的代码要比用if else 简洁多了，使用这种查找表的方式可以完成更复杂的if else语句，大家可以慢慢实践。
网友评论