一个前端代码注释的小技巧,让领导开心的不得了!!!

开发 前端
代码注释是代码中很重要的一部分,或者说是一个前端项目中很重要的一部分,因为它能起到解释代码的作用,所以注释越多的项目,说明这个项目的可维护性更高,更加地健壮

代码注释是代码中很重要的一部分,或者说是一个前端项目中很重要的一部分,因为它能起到解释代码的作用,所以注释越多的项目,说明这个项目的可维护性更高,更加地健壮

今天讲讲一些注释的小技巧吧~

类注释

当你想要给一个类注释时,你可以这么去写

图片


这样的话,当你在使用这个类的时候,会有提示


图片



属性注释

当你想要给一个类属性注释时,你可以这么去写

图片


这样的话,当你在使用这个类属性的时候,会有提示

图片


函数注释

对于一个函数,我们可以做很多注释,比如:

  • 函数的用处
  • 函数的参数
  • 函数的使用注意点

还是刚刚的方式,我们甚至可以在注释里面去使用 markdown 语法,让注释变成更加有趣生动

图片

按照上面这样的注释写法,我们在使用这个函数时,可以得到这样的有趣提示~

图片

而类里的方法也是一样的效果

图片

图片

函数参数注释

如果我们相对函数的每一个参数都进行注释,应该怎么做呢?可以这么去写注释

图片


这样我们在使用函数的时候,会有参数提示

图片

解构 & 函数返回结果 注释

想要解构的对象,或者解构函数返回结果时有提示,同样可以在类型那里进行注释

图片

图片


Vue Props 注释

这样的样式同样也适用在 Vue Props 上

图片

图片

注释建议

最后给大家一些注释的建议吧~

注释内容要清晰简洁

  • 避免冗长:注释应简洁明了,直接表达意图,避免复杂的句子。使用简单的语言:确保即使是不熟悉项目的开发者也能理解你的注释

注释类型

  • 模块和组件注释:在每个文件的顶部,描述该模块或组件的功能、目的及用法
  • 函数和方法注释:在函数前简要说明该函数的用途、参数、返回值以及异常情况
  • 代码段注释:在复杂的代码块上方或旁边添加注释,解释其逻辑或特定的实现方法

避免不必要的注释

  • 自解释的代码:如果代码变量、函数命名已经清晰表达其功能,通常不需要额外注释
  • 避免注释明显的内容:如 // 加1 这种注释一般没有必要

采用一致的风格

  • 格式统一:无论是使用单行注释 // 还是多行注释 /* */,都要保持一致
  • 使用文档注释:对于函数和类,使用类似 JSDoc 的格式来标准化注释,这样更易于生成文档

版本与更新记录

  • 记录变更:在文件顶部或注释区域,简要记录修改历史,包括修改者、时间和更改内容
  • 遵循代码风格指南:遵循团队的代码风格指南,以确保注释的风格一致

注释的适用范围

  • 考虑不同受众:注释应考虑到团队中的不同技术水平的开发者,不同背景的开发者需要不同深度的注释
  • 避免私人笔记:注释应面向所有开发者,避免包含个人笔记或无关内容

更新与维护

  • 及时更新:每当代码更改时,要同步更新相关注释,保持注释的准确性和相关性。
  • 定期审查:在代码审查或重构时,检查注释的有效性,确保它们依然适用。
责任编辑:武晓燕 来源: 前端之神
相关推荐

2022-01-27 20:45:08

代码函数Python

2009-06-11 10:59:19

netbeans提示

2024-02-26 18:11:08

Docker容器镜像

2024-05-16 12:03:54

Python代码开发

2024-01-08 17:09:07

Python解释器CPython

2022-01-06 22:31:21

Python技巧代码

2021-06-02 22:54:34

技巧 Git Clone项目

2017-01-16 15:12:36

Linuxwatch命令命令

2020-11-11 08:22:40

前端开发JavaScript

2020-09-26 21:50:26

JavaScript代码开发

2022-03-10 08:01:06

CSS技巧选择器

2022-11-24 10:34:05

CSS前端

2020-06-01 12:47:12

戴尔

2020-07-08 17:06:00

Python开发工具

2023-12-06 13:43:00

python代码

2024-05-08 07:40:20

ChatGPT训练数据预测

2019-04-29 08:31:25

PythonPandas数据

2020-05-06 16:32:18

for循环Python迭代

2020-05-07 17:03:49

Python编码开发

2024-01-19 08:20:27

JavaScript编程语言箭头函数
点赞
收藏

51CTO技术栈公众号