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

科技   2024-10-26 09:04   广东  

前言

大家好,我是林三心,用最通俗易懂的话讲最难的知识点是我的座右铭,基础是进阶的前提是我的初心~

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

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

类注释

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



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




属性注释

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


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


函数注释

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

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

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


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


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


函数参数注释

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


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


解构 & 函数返回结果 注释

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


Vue Props 注释

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


注释建议

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

注释内容要清晰简洁

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

注释类型

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

避免不必要的注释

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

采用一致的风格

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

版本与更新记录

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

注释的适用范围

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

更新与维护

  • 及时更新:每当代码更改时,要同步更新相关注释,保持注释的准确性和相关性。
  • 定期审查:在代码审查或重构时,检查注释的有效性,确保它们依然适用。

结语

我是林三心,一个待过小型toG型外包公司、大型外包公司、小公司、潜力型创业公司、大公司的作死型前端选手

前端之神
一位前端小菜鸡,写过400多篇原创文章,全网有6w+个前端朋友,梦想是成为”前端之神“~
 最新文章