前端良好的代码习惯

一. 可读性强的命名

命名是提高代码可读性的第一步，也是极其重要的一步，不仅在js里要命名变量名、函数名，还要在CSS里给命名class、id，给图片命名。好的变量名要完全、准确地描述出该变量所代表的事物。下面是一些命名的规则：

1. 以问题为导向
   一个好记的变量名反映的通常都是问题，而不是解决方案。一个好名字通常表达的是“什么（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 ，这一长度本身就对变量做了一些说明——也就是说，改变量代表的是一个临时的数据，它的作用域非常有限，适用于局部变量或者循环变量;
也并不是所有的较长的名字不好，较长的名字适用于很少用到的变量或者全局变量。

3. 变量名中的计算值限定词
   很多程序都有表示计算结果的变量：总额、平均值、最大值，等等。如果你要用类似于Total、Sum、Average、Max、Min、Record、String、Pointer这样的限定词来修改某个名字，那么请记住把限定词加到名字的最后。

4. 变量名中的常用对仗词

• begin / end
• first / last
• locked / unlocked
• min / max
• next / previous
• old / new
• up / down

5. 为状态变量命名
   像这种 statusFlag = 0x80这样的语句是反映不出这段代码是做什么的，除非你亲自写了这段代码，或者有文档能告诉你 statusFlag和0x80的含义。为了清楚起见，标记应该用枚举类型、具名常量，我们可以这样优化

const CONTROL_CHARACTER = '0x80';
characterType = CONTROL_CHARACTER;

6. 为布尔变量命名
   下面是一些格外有用的布尔变量名：

• done
• error
• found
• success 或 ok

7. 为枚举类型命名
   在使用枚举类型的时候，可以通过使用组前缀，如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语句，大家可以慢慢实践。

作者：瓦斯程序媛
链接：https://www.jianshu.com/p/4003b2cb6155
來源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。