The role and usage demonstration of code comments in front-end development

When we write pages, comments are an indispensable part. On the one hand, comments can allow you to see the structure of the code clearly, making it easier to find. On the other hand, it is also conducive to the handover of work between colleagues. Of course, Code comments should also use in a standardized way. So today I will talk to you about annotations of front-end code. Friends in need can refer to it. I hope it will be helpful to you.

1. What are the uses of code comments?

1. It has the same function as pseudo code, writing a guiding algorithm idea for the function to be implemented next. Just not as detailed as pseudocode. However, the general algorithm idea for completing this function is also pointed out.
2. Give an explanatory note to those who read the code. Note that the only people looking at the code include yourself. Let people who look at your code quickly browse your code without having to read it line by line every time they read it in order to understand what you wrote.

2. Code comment specifications, follow the following principles

1. Can help readers better understand the code logic and structure
2. Special or difficult The understanding of the writing method can be explained
3. Special mark comments: such as TODO, FIXME and other marks with special meaning
4. File comments: Some regulations will require fixed format comments to be written in the header of the file, such as Author, protocol and other information
5. Documentation comments: Some regulations require API classes, functions, etc. to use documentation comments (such as jsdoc style)
6. Follow unified style specifications, such as certain spaces and blank lines, To ensure the readability of the comments themselves

3. How to write code comments

1. HTML code comments: ;

<!-- html中要注释的内容 -->
在web页面中，最常见的注释就是这种了。我们在布局页面结构的时候，会添加少许的注释方便我们查找与记忆我们的想法。
那么在页面中除了这样的注释外，还有那些注释呢，这里我列举一些：
If条件不同版本浏览器注释列表：
<!--[if !IE]>除IE外都可识别<![endif]--> 
<!--[if IE]> 所有的IE可识别 <![endif]-->
<!--[if gt IE 5.0]> IE5.0以及IE5.0以上版本都可以识别 <![endif]--> 
<!--[if IE 6]> 仅IE6可识别 <![endif]--> 
<!--[if lt IE 6]> IE6以及IE6以下版本可识别 <![endif]--> 
<!--[if gte IE 6]> IE6以及IE6以上版本可识别 <![endif]--> 
<!--[if IE 7]> 仅IE7可识别 <![endif]--> 
<!--[if lt IE 7]> IE7以及IE7以下版本可识别 <![endif]--> 
<!--[if gte IE 7]> IE7以及IE7以上版本可识别 <![endif]-->

2. CSS code comments: /* Comment content*/

Different from the comment form in html, comments in css take the form of /*comments in css*/ . There is no single line or multiple lines of comment content.

/*.aa,.bb {
                height: 100px;
                margin: 1px;
                background: #ccc;
            }*/

3. JS code comments: //Comment content; or /* Comment content*/,

Different from html\css, comments in js have single-line and multi-line distinctions , and there are quite a lot of types. Let’s introduce them one by one below.
(1) // Two slashes represent a single line comment.
(2) Use as a single-line comment.
(3) /* * / Multi-line comments

//          function out(obj){
//              obj.innerHTML = "移出了";
//              obj.style.background = "#ccc";        
//          }

Summary: Front-end developers should have a deep understanding of the purpose and principles of code comments, follow the comment conventions and use them in conjunction with tools, so that comments can become a good auxiliary to the code. Enhance readability and maintainability, thereby improving code quality.

The above is the detailed content of The role and usage demonstration of code comments in front-end development. For more information, please follow other related articles on the PHP Chinese website!