首頁  >  文章  >  web前端  >  前端開發程式碼註解的作用及使用示範

前端開發程式碼註解的作用及使用示範

yulia
yulia原創
2018-09-15 17:41:475504瀏覽

我們在寫頁面的時候,註解是不可或缺的一部分,註解一方面可以讓自己看清程式碼的結構,找起來更方便,另一方面,也有利於同事之間的工作交接,當然程式碼註解也要規範使用。那麼今天就跟大家聊聊前端程式碼的註解吧,有需要的朋友可以參考一下,希望對你有幫助。

一、程式碼註解有什麼用

1、和偽程式碼一樣的作用,為接下來要實現的功能寫出一個指導性的演算法思路。只是沒有偽代碼詳細。但也指出了完成此功能的大體演算法思路。
2、給看程式碼的人一個解釋性說明。注意看代碼的人包括你自己。讓看你程式碼的人可以快速的瀏覽你的程式碼,不至於每看一行都要一行一行的看下去,才能明白你寫的什麼。

二、程式碼註解規範,遵循以下原則

1、能夠幫助讀者更好的了解程式碼邏輯與結構
2、特別的或不容易理解的寫法可以解釋說明
3、特殊標記註釋:如TODO、FIXME 等有特殊含義的標記
4、文件註釋:部分規定會要求在文件頭部書寫固定格式的註釋,如註明作者、協定等資訊
5、文件類別註解:部分規定要求API類別、函數等使用文件類別註解(如jsdoc 風格)
6、遵循統一的風格規範,如一定的空格、空行,以確保註解自身的可讀性

三、程式碼註解怎麼寫

1、HTML程式碼註解:1e7e1bf2c15b02654f4fe3afcb2a6d07;

<!-- 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程式碼註解: /* 註解內容*/

與html中的註解形式不同,css中的註解採取的是/*css中的註解*/的形式。註解的內容沒有單行多行之分。

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

3、JS程式碼註解: //註解內容; 或/*   註解內容*/, 

與html\css不同的是,js中的註解存在單行多行的區分,也是種類比較繁多下面就一一介紹。
(1) // 兩個斜線表示單行註解。
(2) 9f0826587cb3eec62c00b91ef631844b    使用3bbb231a7e70298d80e5803ee88b04c9 作為單行註解.
(3)/* * /  多行註解

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

總結:前端開發人員應該深入理解程式碼註解的目的和原則,遵循註解規約並結合工具使用,這樣才能使註解成為程式碼良好的輔助,增強可讀性和可維護性,從而提高程式碼品質。

#

以上是前端開發程式碼註解的作用及使用示範的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn