当前位置: 首页 > news >正文

前端代码注释

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

文章目录

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


前言

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


类注释

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

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

在这里插入图片描述


属性注释

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

在这里插入图片描述

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

在这里插入图片描述


函数注释

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

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

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

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

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

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


函数参数注释

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

在这里插入图片描述


解构 & 函数返回结果 注释

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

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


Vue Props 注释

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

在这里插入图片描述

在这里插入图片描述


注释建议

注释内容要清晰简洁

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

注释类型

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

避免不必要的注释

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

采用一致的风格

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

版本与更新记录

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

注释的适用范围

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

更新与维护

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

原文链接

相关文章:

前端代码注释

提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档 文章目录 前言类注释属性注释函数注释函数参数注释解构 & 函数返回结果 注释Vue Props 注释注释建议注释内容要清晰简洁注释类型避免不必要的注释采用一致的风格版本与更…...

Linux线程安全(二)条件变量实现线程同步

目录 条件变量 条件变量初始化和唤醒 键盘触发条件变量唤醒线程demo 条件变量的等待 条件变量定时等待demo 条线变量实现多线程间的同步 条件变量 条件变量是为了控制多个线程的同步工作而设计的 比如说一个系统中有多个线程的存在但有且仅有一个线程在工作&#xff0c…...

Linux初阶——线程(Part2):互斥同步问题

一、互斥锁 1、CPU 运算过程 执行完整个语句后,才会把数据写入内存;如果执行时被中断,那么数据和上下文就会保存到线程的 TCB,但数据并不会被写入内存。 1.1. 当 CPU 执行完整个语句时 CPU 最终执行完整个语句的过程 就用上图举…...

力扣——二叉树的后序遍历(C语言)

1.题目: 给你一棵二叉树的根节点 root ,返回其节点值的后序遍历。 2.原理: 这里的遍历,是要存入到数组中,所以需要建立数组,这里传参有*returnSize,需要求节点个数,可以调用前面Tr…...

利用kimi编程助手从0到1开始搭建小程序!

电脑崩了,更新5次小程序,什么都不剩!(但是遗留下来了一些东西,开源的思维和不断地对于技术的使用和掌握“一个软件更多的哲学:(01)优秀的ui页面设计(02)更加细…...

WSL(Ubuntu20.04)编译和安装DPDK

编译和安装DPDK DPDK可以使用工具meson和ninja在您的系统上进行配置、构建和安装。 DPDK配置 要配置DPDK构建,请使用: meson setup build --prefix/home/xx/dpdk19.11xxxx:~/dpdk-stable-19.11.14/$ meson setup build Message:Content Skipped libs…...

HLS协议之nginx-hls-多码率测试环境搭建

运行环境:ubuntu 20.04 时间:2024年10月26日 环境更新 sudo apt-get update sudo apt-get install build-essential libtool libpcre3 libpcre3-dev zlib1g-dev openssl下载nginx wget http://nginx.org/download/nginx-1.19.2.tar.gz tar xvzf n…...

函数式接口与回调函数实践

函数式接口与回调函数实践 一、Java 的函数式接口 是指仅包含一个抽象方法的接口,通常用于 lambda 表达式或方法引用。Java 8 引入了很多内置的函数式接口,比如 Runnable、Callable、Predicate、Function、Consumer 等 演示,数据类型转换的函…...

Windows11系统如何使用自带的录音、录屏工具?

电脑录音和录屏作为现代办公的辅助工具,不仅极大地提升了工作效率,也保障了信息传递的准确性和完整性。通过合理利用这些工具,我们可以更好地保存和管理重要资料,为办公带来无与伦比的便利。 在会议记录、讲座学习、语音备忘等场景…...

使用 web (vue 和DRF))实现 模拟一个IDE 功能思路

采用文件系统和数据库相结合的方案,不仅可以实现基本的文件管理,还可以为未来的扩展提供灵活性。结合我们讨论的内容,以下是更完善的策略: 方案概述:文件系统与数据库结合 文件系统负责实际的文件存储和执行操作&…...

智航船舶租赁综合管理系统

1.产品介绍 产品介绍方案 产品名称: 智航船舶租赁综合管理系统 主要功能: 船舶信息管理租赁合同管理运营调度与优化财务分析与报告功能介绍: 1. 船舶信息管理 具体作用与使用方式:该功能模块允许用户录入、编辑和查询所有船舶的详细信息,包括但...

统信UOS下启动图形界面应用工具monitor报JAVA相关错:An error has occurred. See the log file

☞ ░ 前往老猿Python博客 ░ https://blog.csdn.net/LaoYuanPython 一、前言 在博文《基于飞腾2000CPU浪潮电脑统信UOS安装达梦数据库详解 https://blog.csdn.net/LaoYuanPython/article/details/143258863》中介绍了基于飞腾2000CPU浪潮电脑统信UOS安装达梦数据库的详细过程…...

N-154基于springboot酒店预订管理系统

开发工具:IDEA 服务器:Tomcat9.0, jdk1.8 项目构建:maven 数据库:mysql5.7 前端技术:AdminLTEBootstrapLayUIHTMLjQuery 服务端技术:springbootmybatis-plusthymeleaf 本项目分前台和后台…...

微信小程序如何实现地图轨迹回放?

要在Uni-app中实现微信小程序的地图轨迹回放功能,你可以按照以下步骤进行操作: 在Uni-app项目中引入地图组件:在页面中使用uni-app提供的map组件,可以使用uni.createMapContext方法获取地图上下文对象,以便后续操作地图…...

vscode的一些使用心得

问题1:/home目录空间有限 连接wsl或者remote的时候,会在另一端下载一个.vscode-server,vscode的插件都会安装进去,导致空间增加很多,可以选择更换这个文件的位置 参考:https://blog.csdn.net/weixin_4389…...

Python金色流星雨(完整代码)

文章目录 环境需求完整代码下载代码代码分析1. 导入库和窗口设置2. 创建画笔对象3. 流星的颜色4. 定义流星类`Meteor`5. `meteor`方法:绘制流星6. `move`方法:流星的运动7. 创建流星对象列表8. 动画循环总结系列目录写在后面环境需求 python3.11.4PyCharm Community Edition …...

[山河CTF 2024] week3

一周不在家,这是补的最后一篇。后边的还有0xgame和shctf的末周。打不动了。 Crypto Approximate_n 题目分两部分,flag分两块两个RSA,第1个泄露了4个n_approxkpr的值,后边只泄露了1个。 第1部分利用以前的模板,造格…...

Java集合常见面试题总结(5)

HashSet 如何检查重复? 当你把对象加入HashSet时,HashSet 会先计算对象的hashcode值来判断对象加入的位置,同时也会与其他加入的对象的 hashcode 值作比较,如果没有相符的 hashcode,HashSet 会假设对象没有重复出现。但是如果发…...

牛客网刷题(3)(Java的几种常用包)

目录 一、牛客网案例题目。 二、Java常用包的总结。 <1>JAVA常用包&#xff08;图片&#xff09;。 <2>java.lang包。 <3>java.util包。 &#xff08;1&#xff09;集合框架。 1、Collection接口。 2、List接口。 3、Set接口。 4、Queue接口。 5、Map接口。 …...

PyTorch nn.Conv2d 空洞卷积

torch.nn.Conv2d() 中 dilation 参数控制卷积核的间隔 dilation controls the spacing between the kernel points 当 dilation1 时, 表示卷积核没有额外的空白间距, 也就是标准卷积当 dilation>1 时, 表示空洞卷积(dilated convolution) 动画演示: 手动计算 以 2*2 的卷…...

UE5 学习系列(二)用户操作界面及介绍

这篇博客是 UE5 学习系列博客的第二篇&#xff0c;在第一篇的基础上展开这篇内容。博客参考的 B 站视频资料和第一篇的链接如下&#xff1a; 【Note】&#xff1a;如果你已经完成安装等操作&#xff0c;可以只执行第一篇博客中 2. 新建一个空白游戏项目 章节操作&#xff0c;重…...

铭豹扩展坞 USB转网口 突然无法识别解决方法

当 USB 转网口扩展坞在一台笔记本上无法识别,但在其他电脑上正常工作时,问题通常出在笔记本自身或其与扩展坞的兼容性上。以下是系统化的定位思路和排查步骤,帮助你快速找到故障原因: 背景: 一个M-pard(铭豹)扩展坞的网卡突然无法识别了,扩展出来的三个USB接口正常。…...

web vue 项目 Docker化部署

Web 项目 Docker 化部署详细教程 目录 Web 项目 Docker 化部署概述Dockerfile 详解 构建阶段生产阶段 构建和运行 Docker 镜像 1. Web 项目 Docker 化部署概述 Docker 化部署的主要步骤分为以下几个阶段&#xff1a; 构建阶段&#xff08;Build Stage&#xff09;&#xff1a…...

树莓派超全系列教程文档--(61)树莓派摄像头高级使用方法

树莓派摄像头高级使用方法 配置通过调谐文件来调整相机行为 使用多个摄像头安装 libcam 和 rpicam-apps依赖关系开发包 文章来源&#xff1a; http://raspberry.dns8844.cn/documentation 原文网址 配置 大多数用例自动工作&#xff0c;无需更改相机配置。但是&#xff0c;一…...

基于距离变化能量开销动态调整的WSN低功耗拓扑控制开销算法matlab仿真

目录 1.程序功能描述 2.测试软件版本以及运行结果展示 3.核心程序 4.算法仿真参数 5.算法理论概述 6.参考文献 7.完整程序 1.程序功能描述 通过动态调整节点通信的能量开销&#xff0c;平衡网络负载&#xff0c;延长WSN生命周期。具体通过建立基于距离的能量消耗模型&am…...

SCAU期末笔记 - 数据分析与数据挖掘题库解析

这门怎么题库答案不全啊日 来简单学一下子来 一、选择题&#xff08;可多选&#xff09; 将原始数据进行集成、变换、维度规约、数值规约是在以下哪个步骤的任务?(C) A. 频繁模式挖掘 B.分类和预测 C.数据预处理 D.数据流挖掘 A. 频繁模式挖掘&#xff1a;专注于发现数据中…...

c++ 面试题(1)-----深度优先搜索(DFS)实现

操作系统&#xff1a;ubuntu22.04 IDE:Visual Studio Code 编程语言&#xff1a;C11 题目描述 地上有一个 m 行 n 列的方格&#xff0c;从坐标 [0,0] 起始。一个机器人可以从某一格移动到上下左右四个格子&#xff0c;但不能进入行坐标和列坐标的数位之和大于 k 的格子。 例…...

dify打造数据可视化图表

一、概述 在日常工作和学习中&#xff0c;我们经常需要和数据打交道。无论是分析报告、项目展示&#xff0c;还是简单的数据洞察&#xff0c;一个清晰直观的图表&#xff0c;往往能胜过千言万语。 一款能让数据可视化变得超级简单的 MCP Server&#xff0c;由蚂蚁集团 AntV 团队…...

2023赣州旅游投资集团

单选题 1.“不登高山&#xff0c;不知天之高也&#xff1b;不临深溪&#xff0c;不知地之厚也。”这句话说明_____。 A、人的意识具有创造性 B、人的认识是独立于实践之外的 C、实践在认识过程中具有决定作用 D、人的一切知识都是从直接经验中获得的 参考答案: C 本题解…...

佰力博科技与您探讨热释电测量的几种方法

热释电的测量主要涉及热释电系数的测定&#xff0c;这是表征热释电材料性能的重要参数。热释电系数的测量方法主要包括静态法、动态法和积分电荷法。其中&#xff0c;积分电荷法最为常用&#xff0c;其原理是通过测量在电容器上积累的热释电电荷&#xff0c;从而确定热释电系数…...