首页 > html教程 > 正文

前端开发代码注释的作用及使用示范

原创 2018-09-15 17:41:47 0 100
赞助会员专享特权
我们在编写页面的时候,注释是必不可少的一部分,注释一方面可以让自己看清代码的结构,找起来更方便,另一方面,也有利于同事之间的工作交接,当然代码注释也要规范使用。那么今天就和大家聊聊前端代码的注释吧,有需要的朋友可以参考一下,希望对你有所帮助。

一、代码注释有什么用

1、和伪代码一样的作用,为接下来要实现的功能写出一个指导性的算法思路。只是没有伪代码详细。但是也指出了完成此功能的大体算法思路。
2、给看代码的人一个解释性说明。注意看代码的人包括你自己。让看你代码的人可以快速的浏览你的代码,不至于每看一行都要一行一行的看下去,才能明白你写的什么。

二、代码注释规范,遵循以下原则

1、能够帮助读者更好的了解代码逻辑与结构
2、特别的或不容易理解的写法可以解释说明
3、特殊标记注释:如 TODO、FIXME 等有特殊含义的标记
4、文件注释:部分规定会要求在文件头部书写固定格式的注释,如注明作者、协议等信息
5、文档类注释:部分规定要求 API类、函数等使用文档类注释(如 jsdoc 风格)
6、遵循统一的风格规范,如一定的空格、空行,以保证注释自身的可读性

三、代码注释怎么写

1、HTML代码注释:<!--注释内容 -->;

<!-- 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) <!-- 或者 <!-- --> 使用<!--或者<!-- --> 作为单行注释.
(3)/* */ 多行注释

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

总结:前端开发人员应该深入理解代码注释的目的和原则,遵循注释规约并结合工具使用,这样才能使注释成为代码良好的辅助,增强可读性和可维护性,从而提高代码质量。

以上就是前端开发代码注释的作用及使用示范的详细内容,更多请关注php中文网其它相关文章!

  • 相关标签:代码注释,前端开发
  • 本文原创发布php中文网 ,转载请注明出处,感谢您的尊重!
  • 相关文章


  • 代码注释,神兽护体,代码无bug
  • 注释规范,代码注释规范
  • XML中的代码注释书写方法的详解
  • 在HTML中水平线标注与代码注释应该如何使用
  • 关于HTML中的代码注释
  • 前端开发代码注释的作用及使用示范
  • 网友评论

    文明上网理性发言,请遵守 新闻评论服务协议

    我要评论
    独孤九贱(4)_PHP视频教程

    独孤九贱(4)_PHP视频教程

    江湖传言:PHP是世界上最好的编程语言。真的是这样吗?这个梗究竟是从哪来的?学会本课程,你就会明白了。 PHP中文网出品的PHP入门系统教学视频,完全从初学者的角度出发,绝不玩虚的,一切以实用、有用...

    独孤九贱(5)_ThinkPHP5视频教程

    独孤九贱(5)_ThinkPHP5视频教程

    ThinkPHP是国内最流行的中文PHP开发框架,也是您Web项目的最佳选择。《php.cn独孤九贱(5)-ThinkPHP5视频教程》课程以ThinkPHP5最新版本为例,从最基本的框架常识开始,将...

    独孤九贱(1)_HTML5视频教程

    独孤九贱(1)_HTML5视频教程

    《php.cn原创html5视频教程》课程特色:php中文网原创幽默段子系列课程,以恶搞,段子为主题风格的php视频教程!轻松的教学风格,简短的教学模式,让同学们在不知不觉中,学会了HTML知识。 ...

    ThinkPHP5实战之[教学管理系统]

    ThinkPHP5实战之[教学管理系统]

    本套教程,以一个真实的学校教学管理系统为案例,手把手教会您如何在一张白纸上,从零开始,一步一步的用ThinkPHP5框架快速开发出一个商业项目。

    PHP入门视频教程之一周学会PHP

    PHP入门视频教程之一周学会PHP

    所有计算机语言的学习都要从基础开始,《PHP入门视频教程之一周学会PHP》不仅是PHP的基础部分更主要的是PHP语言的核心技术,是学习PHP必须掌握的内容,任何PHP项目的实现都离不开这部分的内容,通...

    相关视频教程

  • 弹指间学会HTML+CSS 弹指间学会HTML+CSS
  • CSS  在线手册 CSS 在线手册
  • JavaScript教程 JavaScript教程
  • 独孤九贱(3)_JavaScript视频教程 独孤九贱(3)_JavaScript视频教程
  • JavaScript高级框架设计视频教程 JavaScript高级框架设计视频教程
  • 相关视频章节