前端代码注释

提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档

文章目录

  • 前言
  • 类注释
  • 属性注释
  • 函数注释
  • 函数参数注释
  • 解构 & 函数返回结果 注释
  • Vue Props 注释
  • 注释建议
      • 注释内容要清晰简洁
      • 注释类型
      • 避免不必要的注释
      • 采用一致的风格
      • 版本与更新记录
      • 注释的适用范围
      • 更新与维护


前言

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


类注释

示例:pandas 是基于NumPy 的一种工具,该工具是为了解决数据分析任务而创建的。

当你想要给一个类注释时,你可以这么去写
在这里插入图片描述
这样的话,当你在使用这个类的时候,会有提示

在这里插入图片描述


属性注释

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

在这里插入图片描述

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

在这里插入图片描述


函数注释

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

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

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

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

在这里插入图片描述
而类里的方法也是一样的效果

在这里插入图片描述
在这里插入图片描述


函数参数注释

如果我们相对函数的每一个参数都进行注释,应该怎么做呢?可以这么去写注释
在这里插入图片描述
这样我们在使用函数的时候,会有参数提示

在这里插入图片描述


解构 & 函数返回结果 注释

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

在这里插入图片描述
在这里插入图片描述


Vue Props 注释

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

在这里插入图片描述

在这里插入图片描述


注释建议

注释内容要清晰简洁

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

注释类型

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

避免不必要的注释

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

采用一致的风格

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

版本与更新记录

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

注释的适用范围

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

更新与维护

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

原文链接

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/460837.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

[ 问题解决篇 ] 解决windows虚拟机安装vmtools报错-winserver2012安装vmtools及安装KB2919355补丁 (附离线工具)

🍬 博主介绍 👨‍🎓 博主介绍:大家好,我是 _PowerShell ,很高兴认识大家~ ✨主攻领域:【渗透领域】【数据通信】 【通讯安全】 【web安全】【面试分析】 🎉点赞➕评论➕收藏 养成习…

安娜的档案(Anna’s Archive) 镜像网站/国内最新可访问入口(持续更新)

安娜的档案(Anna’s Archive)是一个颇受关注的资源库。它涵盖了广泛的内容,可能包括各类文献、资料等。其特色在于丰富的信息储备和一定的系统性。安娜的档案(Anna’s Archive)用户可以从中获取多样的知识和数据&#…

【p2p、分布式,区块链笔记 分布式容错算法】: 拜占庭将军问题+实用拜占庭容错算法PBFT

papercodehttps://pmg.csail.mit.edu/papers/osdi99.pdfhttps://github.com/luckydonald/pbft 其他相关实现:This is an implementation of the Pracltical Byzantine Fault Tolerance protocol using PythonAn implementation of the PBFT consensus algorithm us…

系统架构图设计(行业领域架构)

物联网 感知层:主要功能是感知和收集信息。感知层通过各种传感器、RFID标签等设备来识别物体、采集信息,并对这些信息进行初步处理。这一层的作用是实现对物理世界的感知和初步处理,为上层提供数据基础网络层:网络层负责处理和传输…

简缩极化模型+简缩极化求解用优化的方法,也需要保证方程和未知数个数

一个定标器可以得到一个复数矢量,4个实数方程 而模型中我们有,每个定标器有不同的A和φ (两个实数)和相同的R和δc (4个复数)

paimon实战 -- Changelog Producer到底有什么用?

目的 Chaneglog producer 的主要目的是为了在 Paimon 表上产生流读的 changelog, 所以如果只是批读的表是可以不用设置 Chaneglog producer 的。 一般对于数据库如 MySQL 来说, 当执行的语句涉及数据的修改例如插入、更新、删除时,MySQL 会将这些数据变动记录在 b…

Istio基本概念及部署

一、Istio架构及组件 Istio服务网格在逻辑上分为数据平面和控制平面。 控制平面:使用全新的部署模式:Istiod,这个组件负责处理Sidecar注入,证书颁发,配置管理等功能,替代原有组件,降低复杂度&…

支付宝自动扣款如何关闭服务

支付宝作为我们日常生活中常用的支付工具,不仅方便快捷,还提供了自动扣款服务。然而,有时候我们可能会因为不再需要某项服务,或者其他原因,需要关闭这些自动扣款服务。本文将详细介绍如何在支付宝中关闭自动扣款服务。…

Java爬虫:在1688上“照片快递”上传图片

想象一下,你是一名快递小哥,不过你送的不是包裹,而是图片——而且是用Java编写的爬虫作为你的快递车,将图片快速准确地送到1688的服务器上。今天,我们将一起化身为代码界的“照片快递”,使用Java爬虫技术&a…

Windows安装Git最新保姆级教程【附安装包】

一、Git下载: 链接:https://pan.baidu.com/s/1_uH-_-cdBb6GD58oLcxvAA 提取码:m366 二、安装Git 1.右键桌面【此电脑】-【属性】,查看操作系统是32位还是64位。 2.下载好对应64位操作系统版本的Git,解压并打开。 我电脑系统是64位…

vue3父子组件传值,子组件暴漏方法

1.父传子 defineProps 父组件直接通过属性绑定的方式给子组件绑定数据&#xff0c;子组件通过defineProps接收函数接收 其中v-model是完成事件绑定和事件监听的语法糖。v-model算是v-bind和v-on的简洁写法&#xff0c;等价于 <c-input ref"inputRef" :modelValue…

2024年,Rust开发语言,现在怎么样了?

Rust开发语言有着一些其他语言明显的优势&#xff0c;但也充满着争议&#xff0c;难上手、学习陡峭等。 Rust 是由 Mozilla 主导开发的通用、编译型编程语言&#xff0c;2010年首次公开。 在 Stack Overflow 的年度开发者调查报告中&#xff0c;Rust 连续多年被评为“最受喜爱…

【C++动态规划】有效括号的嵌套深度

本文涉及知识点 C动态规划 LeetCode1111. 有效括号的嵌套深度 有效括号字符串 定义&#xff1a;对于每个左括号&#xff0c;都能找到与之对应的右括号&#xff0c;反之亦然。详情参见题末「有效括号字符串」部分。 嵌套深度 depth 定义&#xff1a;即有效括号字符串嵌套的层…

医院信息化与智能化系统(14)

医院信息化与智能化系统(14) 这里只描述对应过程&#xff0c;和可能遇到的问题及解决办法以及对应的参考链接&#xff0c;并不会直接每一步详细配置 如果你想通过文字描述或代码画流程图&#xff0c;可以试试PlantUML&#xff0c;告诉GPT你的文件结构&#xff0c;让他给你对应…

dedecms手机搜索不跳转手机页面模板的解决方法

1.找到文件plus/search.php&#xff0c;添加如下代码并保存 $mobile (isset($mobile) && is_numeric($mobile)) ? $mobile : 0; if ( $mobile1 ) {define(DEDEMOB, Y); } 2.来到网站后台&#xff0c;默认模板管理&#xff0c;新建模板 将手机端列表页面的.html文件&…

臻于智境 安全护航 亚信安全受邀出席新华三智算新品发布会

近日&#xff0c;紫光股份旗下新华三集团在北京隆重举办了主题为“乘势 进化 臻于智境”的新华三智算新品发布会。作为新华三集团的长期战略合作伙伴&#xff0c;亚信安全受邀参会&#xff0c;亚信安全CEO马红军出席发布仪式&#xff0c;并与来自各界的业界伙伴共同探讨智能化…

金和OA-C6 ApproveRemindSetExec.aspx XXE漏洞复现(CNVD-2024-40568)

0x01 产品描述&#xff1a; 金和C6协同管理平台是以"精确管理思想"为灵魂&#xff0c;围绕“企业协同四层次理论”模型&#xff0c;并紧紧抓住现代企业管理的六个核心要素&#xff1a;文化 Culture、 沟通Communication 、 协作Collaboration 、创新 Creation、 控制…

DB-GPT系列(一):DB-GPT能帮你做什么?

DB-GPT是一个开源的AI原生数据应用开发框架(AI Native Data App Development framework with AWEL and Agents)&#xff0c;围绕大模型提供灵活、可拓展的AI原生数据应用管理与开发能力&#xff0c;可以帮助企业快速构建、部署智能AI数据应用&#xff0c;通过智能数据分析、洞察…

Synergy遇见的问题

1.两台设备无法ping通 首先两个设备是在同一个局域网中&#xff0c;但任然是无法ping通 问题所在&#xff1a;防火墙进行了隔离&#xff1b; 解决方法&#xff1a; &#xff08;1&#xff09;关闭防火墙 没有用过&#xff0c;个人感觉不怎么安全就没有使用&#xff1b; &am…

视觉目标检测标注xml格式文件解析可视化 - python 实现

视觉目标检测任务&#xff0c;通常用 labelimage标注&#xff0c;对应的标注文件为xml。 该示例来源于开源项目&#xff1a;https://gitcode.com/DataBall/DataBall-detections-100s/overview 读取 xml 标注文件&#xff0c;并进行可视化示例如下&#xff1a; #-*-coding:ut…