一些写代码的习惯

本篇将讲述一下，我在重构项目的过程中总结的一些良好的代码习惯。

一. 可读性强的命名

命名是提高代码可读性的第一步，也是极其重要的一步，不仅在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语句，大家可以慢慢实践。