關於代碼布局(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更多的內容可以看這裡:  編碼工藝--命名和注釋  《代碼整潔之道》摘錄---格式  《代碼整潔之道》摘錄---注釋   建立一個函數需要理由嗎