关于代码布局(Coding Layout)
研究发现，缩进可以提高程序员的理解能力(<<Program Indentation and Comprehensibility>>, Miaria et al. 1983)。缩进是代码布局的一项技术。作为代码布局并不像命名和注释那样明确，它更像一种感觉。比如摄影的构图，或者国画的留白。虽然很难给一个标准的评价标准，但是<<代码大全>>的作者Steve.McConnell和<<程序员修炼之道>>的两位作者还是给了一些建议。
首先，需要先明确代码的重要性。对于绝大多数软件项目而言，代码是用来沟通的(参考)，以便于别人的阅读理解。(至于为什么，参考这里)
使用的好布局可以达到以下的效果:
1.准确表达代码的逻辑结构.
2.始终如一的表现代码的逻辑结构.
3.改善可读性.
4.经得起修改(Withstand modifications)
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
更多的内容可以看这里: