Skip to content

✍️ 注释规范

  • 注释应该清晰、简洁,并能够反映代码的功能和意图
  • 注释应该放在代码的上方,而不是下方
  • 注释应与代码保持同步更新,修改代码时需同时更新对应注释
  • 避免无意义的冗余注释(如:// 设置姓名 = name)
  • 复杂逻辑必须添加说明注释,解释实现原理和业务背景

html注释示例

html
<!-- 数据导出弹窗 -->
<export-table ref="export" :open-move="moveTrue" :export-name="exportName"></export-table>
<!-- 工单详情弹窗 -->
<workorderCom
    ref="workOrderCom"
    :open-move="moveWorkorder"
    :woid="workOrderId"
    :can-edit-btn="hasEdit"
    :team-id="teamDataInfo.tid"
    @workorderReturn="workorderFunc"
></workorderCom>
...
<!--审批详情-->
<workReportDetail ref="approvalRef" @opDetail="openSlider" :is-done="isDone" :can-edit-btn="hasEdit" @appvoalReturn="approvalFunc" />

javascript注释示例

js
/**
 * JavaScript模块注释示例
 * 防抖函数,确保只有在一段时间的不活动后才执行
 * @param {function|string} fn - 需要防抖的函数。如果是字符串,则假设该字符串是调用对象的方法。
 * @param {number} [wait=600] - 执行防抖函数之前等待的毫秒数。
 * @return {function} - 防抖函数。
 */
export function debounce(fn, wait = 600){
    //函数体
}
/* 普通组件中 */
// 表格分页
    handlePageSize({ page, size }) {
        //函数体
    },
    //日期format
    getDateFormatYMD,

css注释示例

css
/*  报表内容 */
  // 表格上的功能栏:如放大镜查询、添加、打印、导入导出等
  .table-toolbar {
    ...
    .el-button {
      ...
      span {
        ...
      }
    }
  }
  /*
    统一表格样式 使用clss="table-wrapper"包裹表格主体(u-table)并设置clss="table-main"
  */
  .table-main{
    .el-table{
        ...
    }
  }

树字标品MES 让智造简单些!