关于代码布局(Coding Layout)

研究发现，缩进可以提高程序员的理解能力(<<Program Indentation and Comprehensibility>>, Miaria et al. 1983)。缩进是代码布局的一项技术。作为代码布局并不像命名和注释那样明确，它更像一种感觉。比如摄影的构图，或者国画的留白。虽然很难给一个标准的评价标准，但是<<代码大全>>的作者Steve.McConnell和<<程序员修炼之道>>的两位作者还是给了一些建议。

 

首先，需要先明确代码的重要性。对于绝大多数软件项目而言，代码是用来沟通的(参考)，以便于别人的阅读理解。(至于为什么，参考这里)

 

使用的好布局可以达到以下的效果:
1.准确表达代码的逻辑结构.
2.始终如一的表现代码的逻辑结构.
3.改善可读性.
4.经得起修改(Withstand modifications)

 

布局的主要原则:

1. 每行一条语句.

2. 注释的缩进应当与相应代码保持一致.

3. 使用空行分隔子程序的各部分. 如函数头、数据和常量声明以及程序体中不同的逻辑部分.

4.使用空行将代码中的段落分开.

*你的代码在此之前应当确保没有过多的冗余代码。否则已经臭掉的代码摆得再好看也是枉然。

 

为什么压缩后JavaScript看到就头疼？再来回味一下:

var tablink;chrome.tabs.getSelected(null,function(tab){var tablink=tab.url;document.getElementById("url").value=tablink;document.getElementById("url").focus();changeBarCode();});function changeBarCode(){var text=document.getElementById("url").value;if(0==text.length){text="http://blog.csdn.net/horkychen";} var newPicUrl="xxxx"+text;}

 

如果通过JS Beautifier转换一下呢:

var tablink;
 

chrome.tabs.getSelected(null, function (tab) { 
   var tablink = tab.url; 

   document.getElementById("url").value = tablink; 
   document.getElementById("url").focus();

   changeBarCode(); 
});
 
 
function changeBarCode() { 
   var text = document.getElementById("url").value; 

   
   if (0 == text.length) { 
      text = "http://blog.csdn.net/horkychen"; 
   }
 
   var newPicUrl = "xxxx"+ text; 
   document.getElementById("barcode_img").src = newPicUrl; 
}

 

魔鬼在细节之中。从知道到懂关键在细节。缩进就不用说了, 看一下空行的运用。

 

第一点，这段代码中三块段落之间被两行空行隔开，可以大概看出包含了三段内容。

 

第二点，比如下面这个函数，其函数体被空行分成了三个部分，一眼望去就可知道有三段不同功能的代码。

chrome.tabs.getSelected(null, function (tab) { 
   var tablink = tab.url;  

   document.getElementById("url").value = tablink; 
   document.getElementById("url").focus();

   changeBarCode(); 
});

 

其中前后两行意义比较独立，中间两行归在一组完成控件设定和选中的功能。也就相似的代码归在一起，再使用空行将这样不同的段落分隔开来。像不像作文里面讲的布局规则。(比如我的博客就没有按标准段首两个字的缩进，而是用的英文顶行写的.)

 

 如果换一种写法(为了强化概念，我添加了一些代码):

chrome.tabs.getSelected(null, function (tab) { 

   document.getElementById("url").focus();
 
   var tablink = tab.url;  
   if (tablink != undefined && tablink.length > 0)
   {
       tablink = "http://blog.csdn.net/horkychen";
   }
   document.getElementById("url").value = tablink;

   changeBarCode(); 
});

这样就可以感受到第二种写法将相同document.xxxxx的操作分开了，中间的处理又相对独立，它们本来要视为不同的段落更为合适:

chrome.tabs.getSelected(null, function (tab) { 

   var tablink = tab.url;  
   if (tablink != undefined && tablink.length > 0)
   {
       tablink = "http://blog.csdn.net/horkychen";
   }
   
   document.getElementById("url").value = tablink;
   document.getElementById("url").focus();

   changeBarCode(); 
});

 

第二个函数也有类似的应用, 就不解释了。

 

第三，在表达式中操作符间使用了空格区隔，如下:

   if (0 == text.length)

  这样的好处是操作符两边比较清楚，不然一不小心将==写成了===，结果就不一定了。

 

可以好好体会一下，分组将相似的功能放在一起，思维上不会跳跃。空白可以加强对分组概念的识别，从而提高理解能力。再想想国画留白的手法，是不是有异曲同工之妙?

 

还有一种情况发生在较长的判断语句上:

 if (   ( (con1) || (con2) ) && 
      (con3) &&
      (con4) &&
      (con5) &&
      ( (con6) || (con7) )     )
{
   ;
}

 

写成这样呢，你是什么感受:

if ( (  (con1) || (con2)  ) && (con3) && (con4) && (con5) && ((con6)||(con7)) )
{
   ;
}

如果一行太长，就可以使用分行来简化它。

 

关于缩进，很多软件都有自动缩进的功能，找一找，它能帮你解决大问题。

 

Tips: 我一直有个习惯，在需要括号, 中括号或者大括号的地方，输入时一定是左右两个同时输入。比如写函数，一定会先写成:

  function abcd() {}

然后再开始输入函数体，这样就不会遗漏后面的那一个了。比如前面那个判断语句，按这种方式输入完了, 基本上是不需要再确认的。

 

转发请注明出处:http://blog.csdn.net/horkychen

更多的内容可以看这里:

  编码工艺--命名和注释

  《代码整洁之道》摘录---格式

   《代码整洁之道》摘录---注释  

  创建一个函数需要理由吗