代码优化 (一）：状态提取和代码复用

Posted 2021-09-13 XuMingJie

状态的提取和封装

编写代码声明变量的过程中经常会存在各种状态或者类型的初始化。最开始参与项目的

过程中会直接使用未经过处理封装的数据,若后期更改时将难以查找和修改。

解决方法：

• 提取出全局的状态或变量
• 给其添加说明和其他属性(封装到enum(状态,变量值公共文件)),
• 导出,需要时按需导入

优点：

易于快速查找和修改，逻辑清晰。

修改一处即可,减少增删改查工程量。

example:选择作业类型分布进行处理

selectHomeworkType = (value) => {
      console.log(\'you select\',value);
      switch (value) {
        case 52690:
        case 52691:
          fn1...;
          break;
        case 52692:
        case 52693:
          fn2....
          break;
        case 52694:
          fn3... 
          break;
      }
  };

上述不同的value代表不同的作业类型，靠数字标号来标记作业后期会造成混淆，难查
找以及不理解数字代表的具体作业类型。

解决方法：将作业类型提取到enum之中。添加name信息：

const HOMEWORK_TYPES = [
  {
    name: \'黑盒测试\',
    typeId: 52690,
  },
  {
    name: \'白盒测试\',
    typeId: 52691,
  },
  {
    name: \'单元测试\',
    typeId: 52692,
  },
  {
    name: \'测试用例\',
    typeId: 52693,
  },
  {
    name: \'性能测试\',
    typeId: 52694,
  },
];

结论：对于各种复杂的公共状态和常用类型变量都可以提取出来（为其添加其他属
性信息）,需要时再导入,让自己编写的代码更加优美规范。

代码精简和复用

自己在编写代码过程存在着同一段代码或者同一相似组件大量重复出现的情况,这

时就应该考虑提取封装成函数或者组件(细微的差异通过函数参数或组件props处理);    

example:

      {
          title: \'静态检查\',
          dataIndex: \'checkStyle\',
          key: \'checkStyle\',
          align: \'center\',
          render: (value, record) => {
            return (
              <Tag style={{width: 45, textAlign: \'center\', verticalAlign: \'middle\'}} color={type}>
                {value}
              </Tag>
            );
          },
        },
        {
          title: \'检查通过率\',
          dataIndex: \'checkJunit\',
          key: \'checkJunit\',
          align: \'center\',
          render: (value, record) => {
            return (
              <Tag style={{width: 45, textAlign: \'center\', verticalAlign: \'middle\'}} color={type}>
                {value}
              </Tag>
            );
          },
        },
        {
          title: \'检查覆盖率\',
          dataIndex: \'checkCoverage\',
          key: \'checkCoverage\',
          align: \'center\',
          render: (value, record) => {
            return (
              <Tag style={{width: 45, textAlign: \'center\', verticalAlign: \'middle\'}} color={type}>
                {value}
              </Tag>
            );
          },
        },

        {
          title: \'检查重复率\',
          dataIndex: \'checkDuplicate\',
          key: \'checkDuplicate\',
          align: \'center\',
          render: (value, record) => {
            return (
              <Tag style={{width: 45, textAlign: \'center\', verticalAlign: \'middle\'}} color={type}>
                {value}
              </Tag>
            );
          },
        },
        {
          title: \'迟交\',
          dataIndex: \'allowLateSubmission\',
          align: \'center\',
          render: (value, record) => {
            return (
              <Tag style={{width: 45, textAlign: \'center\', verticalAlign: \'middle\'}} color={type}>
                {value}
              </Tag>
            );
          },
        },

上述代码中均返回<Tag>标签,不同的只是color和value,当返回组件内容较多时，考
虑将其封装成Class公共组件,通过组件props的color和value进行传递

封装组件：

import React, { PureComponent } from \'react\';
import {
  Tag,
} from \'antd\';

class StatusTag extends PureComponent {
  render() {
    const { color,value } = this.props;
    return (
      <Tag style={{ textAlign: \'center\', verticalAlign: \'middle\' }} color={color}>
        {value}
      </Tag>
    );
  }
}

export default StatusTag;

优点：减少代码量,提高复用性。