关于代码布局(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

更多的内容可以看这里:

编码工艺--命名和注释

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

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

创建一个函数需要理由吗

关于代码布局(Coding Layout)相关推荐

java中android_在Android中用纯Java代码布局
本文的完成了参考了一篇国外的教程,在此表示感谢. Android中的界面布局主要有两种方式,一种是xml文件和Java代码结合的布局方式,一种是完全依靠Java代码布局. 两种布局方式的比较对于第一 ...
在Android中用纯Java代码布局
感谢大佬:https://www.jianshu.com/p/7aedea560f16 在Android中用纯Java代码布局本文的完成了参考了一篇国外的教程,在此表示感谢. Android中的界面 ...
Android帧布局(Frame Layout)
Android帧布局(Frame Layout) FrameLayout是最简单的一个布局管理器.FrameLayout为每个加入其中的组件创建一个空白区域(一帧),这些组件根据layout_grav ...
Android线性布局(Linear Layout)
Android线性布局(Linear Layout) LinearLayout是一个view组(view group),其包含的所有子view都以一个方向排列,垂直或是水平方向.我们能够用androi ...
php layout布局文件,layout（布局） - jQuery EasyUI中文文档 - EasyUI中文站
Layout(布局) 使用$.fn.layout.defaults重写默认值对象. 布局容器有5个区域:北.南.东.西和中间.中间区域面板是必须的,边缘的面板都是可选的.每个边缘区域面板都可以通过拖拽 ...
easyui php分页,easyui datagrid分页 4、easyUI-七种布局（layout）
1.为网页创建边框布局边框布局(border layout)提供五个区域:east.west.north.south.center.以下是一些通常用法: north 区域可以用来显示网站的标语. s ...
jQuery easyUI布局（Layout）与手风琴（Accordion）
上期讲了easyUI最重要的组件:面板,这期讲讲布局和手风琴运用jQuery easyUI是需要引用文件的,详见上一期布局(layout) 效果图如下: 我们从上图可以看到,整个布局分为五个部分, ...
Flex 布局（layout）
Flex 布局(layout) Flex是Flexible Box(弹性盒)的缩写,意为"弹性布局".网页布局(layout)是 CSS 的一个重点应用.布局的传统解决方案,基于盒 ...
【CSS 网格布局 (Grid Layout )】
CSS 网格布局 Grid Layout CSS 网格布局 Grid Layout 1. CSS 网格布局的基本概念 1.1 网格相关术语 1.2 网格布局的属性分类 2. grid 属性: 同时 ...

关于代码布局(Coding Layout)

关于代码布局(Coding Layout)相关推荐

最新文章

热门文章