代码来找茬

找茬项目 中台三问检测平台
开发人员 王慧敏
找茬人员 刘心瑜、刘金萍、王慧敏、魏孟皓、彭从豪、齐继超、许敏
下期找茬 速搭平台

遵循规范：2022 前端工程师开发规范手册（v22.5.27） https://www.yuque.com/docs/share/6f0825ad-6d9f-4d70-bbd1-ca1a4b5c694c

找茬规则

  • 每周四轮流对一个项目进行代码Reivew
  • 成员可对项目进行相互找茬，找出可优化的代码片段
  • 遵循规范给出调整建议并指出规范问题
  • 案例留档整理

    找茬案例

    找茬者-齐继超

    优化代码片段一 ```javascript // not good this.testloading=true;

// good this.tableLoading = true;

  1. 该代码存在以下规范问题：<br />4.3.1【强制】标准变量采用驼峰式命名<br />4.3.3【强制】变量名不应过短，要能准确完整地描述该变量所表述的事物  <br />3.6【强制】安装插件 [Prettier - Code formatter](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode)（ CSS / Less / JS 等其他文件代码格式化）, 运算符前后加空格。
  3. 优化代码片段二
  4. ```vue
  5. // not good 
  6. <div class="Statistics">
  7.   <div class="topNav">
  8.     <Nav></Nav>
  9.   </div>
  10.   <div class="testResult_content">
  11.   </div>
  12. <div>
  14. // good 
  15. <div class="statistics">
  16.     <div class="top-nav">
  17.       <app-nav></app-nav>
  18.     </div>
  19.     <div class="test-result-content"></div>
  20. <div>

该代码存在以下规范问题：
4.2.1【强制】类名使用小写字母，以中划线分隔
4.4.3【推荐】应用特定样式和约定的基础组件 (也就是展示类的、无逻辑的或无状态的组件) 应该全部以一个特定的前缀开头，比如 Base、App 或 V
4.4.语法【强制】模版中的组件名大小写在单文件组件和字符串模板中组件名应该总是 PascalCase 的；但是在 DOM 模板中总是 kebab-case 的

找茬者-刘金萍

优化代码片段一

  1. // not good
  2. padding: 10px 20px 10px 20px;
  4. // good
  5. padding: 10px 20px;

该代码存在以下规范问题：
4.2声明简写【推荐】当你确定自己的声明不会影响到其他属性时，请使用简写提升代码简洁性

优化代码片段二

  1. // not good 
  2. <el-input
  3.   size="small"
  4.   style="width: 220px; margin-right: 50px"
  5.     placeholder="支持应用单位、能力来源模糊搜索"
  6.     suffix-icon="el-icon-search"
  7.     v-model="keyword"
  8.     @keyup.enter.native="testResultSearch()"
  9.   >
  10. </el-input>
  12. // good 
  13. <el-input
  14.   style="width: 220px; margin-right: 50px"
  15.   size="small"
  16.     suffix-icon="el-icon-search"
  17.     v-model="keyword"
  18.   placeholder="支持应用单位、能力来源模糊搜索"
  19.     @keyup.enter.native="testResultSearch()"
  20.   >
  21. </el-input>

该代码存在以下规范问题：
属性顺序
【参考】属性应该按照特定的顺序出现以保证易读性

  1. class
  2. id
  3. name
  4. data-*
  5. src, for, type, href, value , max-length, max, min, pattern
  6. placeholder, title, alt
  7. aria-*, role
  8. required, readonly, disabled

元素特性的顺序
【参考】元素 (包括组件) 的特性应该有统一的顺序，这是我们为元素特性推荐的默认顺序：

  1. 定义 (提供组件的选项)
    • is
  2. 列表渲染 (创建多个变化的相同元素)
    • v-for
  3. 条件渲染 (元素是否渲染/显示)
    • v-if
    • v-else-if
    • v-else
    • v-show
    • v-cloak
  4. 渲染方式 (改变元素的渲染方式)
    • v-pre
    • v-once
  5. 全局感知 (需要超越组件的知识)
    • id
  6. 唯一的特性 (需要唯一值的特性)
    • ref
    • key
    • slot
  7. 双向绑定 (把绑定和事件结合起来)
    • v-model
  8. 其它特性 (所有普通的绑定或未绑定的特性)
  9. 事件 (组件事件监听器)
    • v-on
  10. 内容 (覆写元素的内容)
    • v-html
    • v-text

找茬者-彭从豪

优化代码片段一

  1. <!-- not good -->
  2. <el-table
  3.   v-loading="testloading"
  4.   :header-cell-style="{background: '#DCDEE6','text-align': 'center'}"
  5.   :cell-style="{ 'text-align': 'center', 'font-size': '12px' }"
  6.   :data="list"
  7.   border
  8.   style="width: 100%"
  9.   >
  10.   <!-- good -->
  11.   <el-table
  12.     v-loading="testloading"
  13.     :header-cell-style="{'background': '#dcdee6','text-align': 'center'}"
  14.     :cell-style="{ 'text-align': 'center', 'font-size': '12px' }"
  15.     :data="list"
  16.     border
  17.     style="width: 100%"
  18.     >

该代码存在以下规范问题：
4.5【强制】header-cell-style中的样式对象格式未统一

找茬者-王慧敏

优化代码片段一

  1. // not good
  2. .Statistics {
  3.   display: flex;
  4.   justify-content: flex-start;
  5.   flex-direction: column;
  6.   background: #e9ebef;
  7.   padding: 10px 20px 10px 20px;
  8.   .testResult_content {
  9.     background: #ffffff;
  10.     border-radius: 5px 5px 5px 5px;
  11.     padding: 20px 30px;
  12.     margin: 10px 0 0 0;
  13.     position: relative;
  14.     .testResult_rDom {
  15.       margin-bottom: 15px;
  16.     }
  17.   }
  18. }
  20. // good
  21. .statistics {
  22.   display: flex;
  23.   justify-content: flex-start;
  24.   flex-direction: column;
  25.   padding: 10px 20px 10px 20px;
  26.   background: #e9ebef;
  27.   .test-result-content {
  28.     position: relative;
  29.     padding: 20px 30px;
  30.     margin: 10px 0 0 0;
  31.     background: #ffffff;
  32.     border-radius: 5px 5px 5px 5px;
  33.     .test-result-rdom {
  34.       margin-bottom: 15px;
  35.     }
  36.   }
  37. }

该代码存在以下规范问题：
4.2.1【强制】类名使用小写字母，以中划线分隔
4.2.8【参考】相关的属性声明按以下顺序做分组处理，组之间需要有一个空行

  1. Positioning（影响其他元素和自身位置相关声明）
  2. Box model（自身盒模型相关声明）
  3. Typographic（文本相关声明）
  4. Visual（自身样式）
  5. Misc（其他声明）

找茬者-许敏

优化代码片段一

  1. // not good 
  2. if (res.data.retCode == 200) {
  3.     this.testloading = false;
  4.     this.list = res.data.data.checkResultList;
  5.     this.total = res.data.data.totalCount;
  6. }
  8. // good 
  9. if (res.data.retCode === 200) {
  10.     this.testloading = false;
  11.     this.list = res.data.data.checkResultList;
  12.     this.total = res.data.data.totalCount;
  13. }

该代码存在以下规范问题：
【推荐】使用===代替==，!==代替!=（==会自动进行类型转换，可能会出现奇怪的结

找茬者-魏孟皓

优化代码片段一

  1. <!-- not good -->
  2. <el-table
  3.   v-loading="testloading"
  4.   :header-cell-style="{background: '#DCDEE6','text-align': 'center'}"
  5.   :cell-style="{ 'text-align': 'center', 'font-size': '12px' }"
  6.   :data="list"
  7.   border
  8.   style="width: 100%"
  9.   >
  10.   <!-- good -->
  11.   <el-table
  12.     v-loading="testloading"
  13.     :header-cell-style="{'background': '#dcdee6','text-align': 'center'}"
  14.     :cell-style="{ 'text-align': 'center', 'font-size': '12px' }"
  15.     :data="list"
  16.     border
  17.     style="width: 100%"
  18.     >

该代码存在以下规范问题：
4.5【强制】16进制使用小写字母

【主动学习分享】

url携带参数为乱码 - 彭从豪
https://www.yuque.com/docs/share/29be5653-4938-477e-9436-09a755982f00?#
decodeURI()函数解决url携带参数为乱码
image.png