关于前端:代码优化-一状态提取和代码复用

状态的提取和封装

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

过程中会间接应用未通过解决封装的数据,若前期更改时将难以查找和批改。

解决办法：

• 提取出全局的状态或变量
• 给其增加阐明和其余属性(封装到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;

长处：缩小代码量,进步复用性。