关于代码格局(Coding Layout)

关于代码布局(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更多的内容可以看这里:  编码工艺--命名和注释  《代码整洁之道》摘录---格式  《代码整洁之道》摘录---注释   创建一个函数需要理由吗 

查看更多 下一篇