首页 诗词 字典 板报 句子 名言 友答 励志 学校 网站地图
当前位置: 首页 > 教程频道 > 开发语言 > 编程 >

关于代码格局(Coding Layout)

2012-08-16 
关于代码布局(Coding Layout)研究发现,缩进可以提高程序员的理解能力(Program Indentation and Comprehe

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

热点排行