Coding Layout)

The study found that indentation can improve the programmer's understanding (<program indentation and comprehensibility>, miaria et al. 1983 ). Indentation is a technology in code layout. As code layout is not as explicit as naming and commenting, it is more like a feeling. For example, the composition of photography, or the white of Chinese painting. Although it is difficult to give a standard rating, the authors of <code Daquan> Steve McConnell and <programmer's path to practice> still gave some suggestions.

 

First, you need to clarify the importance of the Code. For most software projects, code is used for communication (reference) to facilitate others' reading and understanding. (For the reason, refer to here)

 

A good layout can achieve the following results:
1. accurately express the logic structure of the Code.
2. consistently display the logic structure of the Code.
3. improve readability.
4. Modify (withstand modifications)Main layout principles: 1. one statement per line. 2. the indent of the comment should be consistent with the corresponding code. 3. Use blank lines to separate the parts of a subroutine.Such as function headers, data and constant declarations, and different logical parts of the program body. 4. Use blank lines to separate paragraphs in the code.* Your code should have no redundant code before that. Otherwise, it would be a waste to put the smelly code in a better shape. Why does JavaScript suffer a headache after compression? Let's try again:

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;}

What if we use JavaScript beautifier to convert it:

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; }

The devil is in the details. From understanding to understanding the details, the key lies in details. Not to mention indentation. Let's take a look at the use of empty rows.First, the three paragraphs in this Code are separated by two blank lines., You can see that it contains three sections.Second, for example, in the following function, the function body is divided into three parts by empty rows.You can see three different functional codes at a glance.

chrome.tabs.getSelected(null, function (tab) {    var tablink = tab.url;     document.getElementById("url").value = tablink;    document.getElementById("url").focus();   changeBarCode(); });

 

The two rows have independent meanings, and the two rows in the middle are in the same group to complete the control setting and selection functions. Similar code is combined, and then different paragraphs are separated by blank lines. Unlike the layout rules in the composition. (For example, my blog is not indented according to the first two words of the standard paragraph, but written in the English top line .) for another method (to enhance the concept, I added some code ):

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(); });

In this way, we can feel that the second method separates the operations of the same document. XXXXX, and the processing in the middle is relatively independent. They should be considered as different paragraphs:

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(); });

The second function has a similar application, so I will not explain it.Third, spaces are used to separate operators in expressions., As follows:

If (0 = text. Length) has the advantage that both sides of the operator are clear. Otherwise, if you accidentally write = As =, the result is not necessarily. Let's take a good look at it. Grouping puts similar functions together, so it won't jump in mind. Blank spaces can enhance the recognition of grouping concepts, thus improving understanding. Think about the white-keeping method of traditional Chinese painting, isn't it just the same? There is also a situation that occurs in long judgment statements:

 if (   ( (con1) || (con2) ) &&       (con3) &&      (con4) &&      (con5) &&      ( (con6) || (con7) )     ){   ;}

 

How do you feel:

if ( (  (con1) || (con2)  ) && (con3) && (con4) && (con5) && ((con6)||(con7)) ){   ;}

If a row is too long, you can use a branch to simplify it. With regard to indentation, many software have the function of automatic indentation. Find it to help you solve the big problem.TIPS:I have always had a habit of entering both the left and right sides of the brackets in the brackets or braces. For example, to write a function, you must first write it:Function ABCD (){}Then start to input the function body, so that the next one will not be missed. For example, if the previous judgment statement is input in this way, it basically does not need to be confirmed. Please indicate the source for forwarding: http://blog.csdn.net/horkychenmore content here: Coding Process-naming and commenting on the "clean code" Excerpt-extracting the format "clean code"-Why do you need to create a function?