代码来找茬

找茬项目 速搭平台
开发人员 刘金萍
找茬人员 刘心瑜、刘金萍、王慧敏、魏孟皓、彭从豪、齐继超、许敏
下期找茬 微服务流立方

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

找茬规则

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

    找茬案例

    找茬者-彭从豪

    优化代码片段一 ```vue // not good

// good

  1. 该代码存在以下规范问题：<br />4.1【推荐】element-ui组件样式放置在style后
  3. <a name="l1Fem"></a>
  4. #### 找茬者-魏孟皓
  5. 优化代码片段一
  6. ```css
  7. // not good 
  8. .el-icon-question {
  9.   top: 50%;
  10.   position: absolute;
  11.   transform: translateY(-35%);
  12.   font-size: 14px;
  13. }
  15. // good
  16. .el-icon-question {
  17.   position: absolute;
  18.   top: 50%;
  19.   transform: translateY(-35%);
  20.   font-size: 14px;
  21. }

该代码存在以下规范问题：
4.2【参考】相关的属性声明按以下顺序做分组处理，组之间需要有一个空行

找茬者-刘心瑜

优化代码片段一

  1. // not good
  2. <el-form-item label="提交次数:" class="select-form">
  4. // good
  5. <el-form-item class="select-form" label="提交次数:">

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

优化代码二

  1. // not good
  2. openBrowsing: false, //开启浏览展示
  3. taskSubmTimes: '1', //默认为永久提交一次
  5. // good
  6. openBrowsing: false, // 开启浏览展示
  7. taskSubmTimes: '1', // 默认为永久提交一次

该代码存在以下规范问题：
4.3 代码风格 9.【强制】注释：//后插入一个空格，/*后插入一个空格，*/前插入一个空格

找茬者-许敏

优化代码片段一

  1. // not good 
  2. <orga :orgid="msg" flag="task" @updata="closeTaskOrga"></orga>
  4. // good 
  5. <orga :org-id="msg" flag="task" @updata="closeTaskOrga"></orga>

该代码存在以下规范问题：
4.4 语法 8.【推荐】Prop 名大小写，在声明 prop 的时候，其命名应该始终使用 camelCase，而在模板和 JSX 中应该始终使用 kebab-case
优化代码片段二

  1. // not good 
  2. const nameFilter = (rule, value, callback) => {
  3.     console.log('ppp');
  4.     if (value.trim() === '') {
  5.         callback(new Error('任务名不能为空'));
  6.     } else {
  7.         callback();
  8.     }
  9. };
  11. // good 
  12. const nameFilter = (rule, value, callback) => {
  13.     if (value.trim() === '') {
  14.         callback(new Error('任务名不能为空'));
  15.     } else {
  16.         callback();
  17.     }
  18. };

该代码存在以下规范问题：
4.3 语法 14.【推荐】慎用 console.log，因 console.log 大量使用会有性能问题

找茬者-刘金萍

优化代码片段一

  1. // not good
  2. <el-dialog top="2%" class="dialogEditorg" title="组织管理"></el-dialog>
  4. // good
  5. <el-dialog top="2%" class="dialog-editorg" title="组织管理"></el-dialog>

该代码存在以下规范问题：
4.2 CSS / Less 编码规范
【强制】类名使用小写字母，以中划线分隔

找茬者-王慧敏

优化代码片段一

  1. // not good
  2. import { getSessionStorageUserInfo } from '@/utils/auth';
  3. const userInfo = JSON.parse(getSessionStorageUserInfo());
  4. import { mapGetters } from 'vuex';
  5. import { queryorgPerson } from '@/api/organization';
  6. import { queryProjectInfo, queryOnlinePageByProject, handOut, queryProjectOrg } from '@/api/lowCode';
  8. // good
  9. import { getSessionStorageUserInfo } from '@/utils/auth';
  10. import { mapGetters } from 'vuex';
  11. import { queryorgPerson } from '@/api/organization';
  12. import { queryProjectInfo, queryOnlinePageByProject, handOut, queryProjectOrg } from '@/api/lowCode';
  13. const userInfo = JSON.parse(getSessionStorageUserInfo());

该代码存在以下规范问题：
【推荐】全局变量在导入相关文件后，应该写在导入文件的最后

找茬者-齐继超

优化代码片段一

  1. // not good
  2. <el-input placeholder="请输入成员名称或手机号" v-model="valueSearch" @keyup.enter.native="searchprojectPerson" size="small" >
  3.   <el-button slot="append" @click="searchprojectPerson"><span>搜索</span></el-button>
  4. </el-input>
  6. // good
  7. <el-input v-model="valueSearch" @keyup.enter.native="searchprojectPerson" size="small" placeholder="请输入成员名称或手机号">
  8.   <el-button slot="append" @click="searchprojectPerson"><span>搜索</span></el-button>
  9. </el-input>

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