随着业务的庞大。B端的业务越来越重，导致后面的需求越来越难满足，人在工位坐，锅从天上来，一个小前端就地开启了重构之旅

1. 梳理待重构的B端

上面是待重构 B端 的结构图，由 PHP 编写，利用约定的字段上传 JSON 文件，让 Controller 读取文件配置 在 DB 生成一个表，再由 Controller 直出到 View 层；在应对那些比较简单的逻辑或者功能性单一的业务时可以起到非常大的作用。但是需求只会越来越多。越来越复杂，尤其在处理复杂业务的时，整个 Controller 作为数据中枢，如果夹杂了太多的冗余逻辑，渐渐的就跟蜘蛛网一样难以维护。

2. 设计重构方案

了解完整个大概的数据走向以及业务背景之后，接下来就是设计整个重构方案了。

• 
  
• 继承之前的业务逻辑、通过 JSON 文件 渲染整个页面
  
• 整体 UI 升级 ，因为用 React 重构，UI 这里选择 Antd
  
• 前后端分离，本地开发先 Mock ，后期用 node 去代理或者用其他更灵活的方式交互数据
  

3. 配置文件改造

脚手架搭建，这里用 Antd Pro 脚手架 ( umi.js + antd ) , Router 配置 以及 React-Redux 等工具 umi 都帮我们内置了 ，基础搭建就不展开描述了。

{

     "字段名称": {

      "name_cfg": {

        "label": "label",

        "type": "select",

        "tips": "tips",

        "required": "required",

        "max_length": 0,

        "val_arr": {

          "-1": "请选择",

           "1": "字段 A",

           "2": "字段 B",

          "default": "-1"

        },

         "tabhide": {

          "1": "A 字段, B 字段",

          "2": "B 字段, C 字段",

          "3": "C 字段, D 字段"

        }

        "relation_select": {

          "url": "其他业务的接口请求",

          "value": "Option id",

          "name": "Option name",

          "relation_field": "relation_field1, relation_field2"

        }

      },

      "sql_cfg": {

        "type": "int(11)",

        "length": 11,

        "primary": 0,

        "default": -1,

        "auto_increment": 0

      }

    },

    ...

}

这个 JSON 文件共有几十个字段，这里拿了一个比较有代表性的字段。这是一个 Select 类型的表单，val_arr 是这个 Select 的值，relation_select 请求其他业务的接口填进去这个 val_arr 供给给 Select ， tabhide 表示的是，当值为 Key 时 隐藏表单的 Value 字段，多字段时以逗号分割。


此时需要一个过度文件将这个 JSON 文件处理成咋们方便处理的格式

// transfrom.js 

let Arr = [];

let Data = json.field_cfg;

for (let i in Data) {

  let obj = {};

  let val_Array = [];

  let tab_hide = Data[i]['name_cfg']['tabhide']

  for (let index in Data[i]['name_cfg']['val_arr']) {

    let obj = {};

    if (index !== 'default') {

      obj['value'] = index;

      obj['label'] = Data[i]['name_cfg']['val_arr'][index];

      if(tab_hide && tab_hide[index]){

        obj['tab_hide'] = tab_hide[index].split(',');

      }

      val_Array.push(obj);

    } else {

      val_Array.map((item) => {

        if (item.value === Data[i]['name_cfg']['val_arr'][index]) {

          item['default'] = true;

        }

      });

    }

  }

  obj['id'] = i;

  obj['name'] = Data[i]['name_cfg']['label'];

  obj['type'] = Data[i]['name_cfg']['type'];

  obj['required'] = Data[i]['name_cfg']['required'];

  obj['tips'] = Data[i]['name_cfg']['tips'];

  obj['multiple'] = Data[i]['name_cfg']['multiple'];

  obj['val_arr'] = val_Array;

  obj['sql_cfg_type'] = Data[i]['sql_cfg']['type'];

  obj['sql_default'] = Data[i]['sql_cfg']['default'];

  Arr.push(obj);

}


// config.js

const config = [

      {

        id: '字段名称',

        name: 'label -> Name',

        type: 'select',

        required: 'required',

        tips: 'tips',

        val_arr: [

            { value: '-1', label: '请选择', default: true }

            { value: '1', label: 'Option A', tab_hide: ['字段A', '字段B'] }

            { value: '2', label: 'Option B', tab_hide: ['字段B', '字段C'] }

        ],

        sql_cfg_type: 'int(11)',

        sql_default: -1,

      },

      ...

]

4. 表单渲染

Antd 的表单组件的功能非常丰富。拿到 Config 按照文档一把唆就完事了。

React 的 函数组件 和 Hooks 让代码更加简洁了，可太棒了！

  const renderForm: () => (JSX.Element | undefined)[] = () => {

    // renderSelect(); renderText(); renderNumber(); renderDatePicker();

  }

  const renderSelect: (configItem: ConfigListData) => JSX.Element = (configItem) => {...}


  const renderText: (configItem: ConfigListData) => JSX.Element = (configItem) => {...}


  const renderNumber: (configItem: ConfigListData) => JSX.Element = (configItem) => {...}


  const renderDatePicker: (configItem: ConfigListData) => JSX.Element = (configItem) => {...}

5. 默认字段 & 隐藏字段

在 componentDidMount 的时候处理这些字段,用 Hooks 可以这么表达 React.useEffect(()=>{...},[])

默认字段 : 给 Form 表单 设置上配置表的 sql_default 即可。

隐藏字段 : 这里涉及到字段会重叠，之前用 JQuery 单纯操作 DOM 节点去 show() 和 hide()。在操作 Dom 这方面，JQ 确实是有他的优势。

现在的解决方案如下图所示：

  const [hideListMap, setHideListMap] = useState<any>(new Map());

  configObj.forEach((item: { val_arr: { tab_hide: any; value: any; }[]; sql_default: any; id: any; }) => {

    item.val_arr.forEach((val_arr_item: { tab_hide: any; value: any; }) => {

      if (val_arr_item.tab_hide && val_arr_item.value === item.sql_default) {

        hideListMap.set(item.id, val_arr_item.tab_hide);

      }

    });

  });

  setHideListMap(hideListMap)

new Map() 用字段名作为 key ，value 的值为 tab_hide 数组, 之前用 Array 创建一个动态的 key 、value ，发现操作起来没有 Map 好使。

  const [hideList, setHideList] = useState<string[]>();


  React.useEffect(() => {

    let arr: string[] = []

    hideListMap.forEach((item: any, key: any) => {

      arr.push(...item);

    });

    setHideList(arr);

  }, [hideListMap])


  const selctChange = React.useCallback((value: SelectValue, configItem: ConfigListData) => {

    hideListMap.forEach((item: any, key: string) => {

      if (key === configItem.id) {

        configItem.val_arr.forEach((val_arr_item: { value: SelectValue; tab_hide: any; }) => {

          if (val_arr_item.value === value) {

            hideListMap.set(configItem.id, val_arr_item.tab_hide);

            setHideListMap(new Map(hideListMap))

          }

        })

      }

    });

  }, [hideListMap]);

React.useEffect 不仅可以当 componentDidMount ，还可以当 componentDidUpdate 使用，只需要在第二个参数加上监听的值 React.useEffect(()=>{...},[n]), 这里监听了 hideListMap 如果 Select 框触发了 改变了 hideListMap 会自动帮我个更新 hideList，只要拿这个 hideList 作为条件判断是否渲染。就满足了多字段隐藏的需求了。

  const renderForm: () => (JSX.Element | undefined)[] = () => {

    return configObj.map((item: ConfigListData) => {

      if (hideList && hideList.includes(item.id)) {

        return undefined

      }

      if (item.type === 'text') {

        if (item.sql_cfg_type.indexOf('int') !== -1) {

          return renderNumber(item)

        } else {

          return renderText(item)

        }

      }

      if (item.type === 'select') {

        return renderSelect(item)

      }

      if (item.type === 'datetime') {

        return renderDatePicker(item);

      }

      return undefined;

    })

  }

6. Select 动态渲染值

// transfrom.js

let service = [];

let Data = json.field_cfg;

for (let i in Data) {

  let relation_select = Data[i]['name_cfg']['relation_select'];

  if (relation_select && relation_select['relation_field']) {

    relation_select['relation_field'] = relation_select['relation_field'].split(',');

    service.push(relation_select);

  }

}


// config.ts

const SERVICE  = [

    {

      url: "其他业务的接口请求",

      value: "Option id",

      name: "Option name",

      relation_field: ["relation_field1"， "relation_field2" ],

      method: 'get'

    }

    ...

]

// utils.ts

import request from 'umi-request'; // 请求库

export const getSelectApi = async (url: string, method: string) => {

  return request(url, {

    method,

  })

}

之前接口请求与 Config 是耦合在一起的，Config 的字段如果增加到一定的数量时就会变得难以维护。最后决定把 表单Config 和 Service 层解耦，目的是为了更为直观的区别 Config 和 Service，方便以后维护。

数据接口参数格式以及字段都要有所约束。这里需要起一个 node 层，主要是处理第三方接口跨域处理，以及参数统一等。

import { CONFIG_OBJ, SERVICE } from './config';

const Form: React.FC = () => {

  const [configObj, setConfigObj] = React.useState(CONFIG_OBJ);

  React.useEffect(() => {

    (async () => {

      for (let item of SERVICE) {

        for (let fieldItem of item.relation_field) { // 多字段支持

          insertObj[fieldItem] = await getSelectApi(item.url, item.method)

        }

      }

      for (let key in insertObj) {

        if (key === item.id) {

          item.val_arr.push(...insertObj[key].list)

        }

      }

      setConfigObj([...configObj]);

    })()

  })

  ...

}

export default Form

将解耦出来的接口配置融合在 form 表单。useState 检测到数据指向变动就会重新渲染。

到这里 Form 表单组件基本搭建完成了。

6. 最后

再进一步思考，这里还有些优化的点，我们可以把这些配置文件也融进去这个B端里，将 Config 和 Service 都写进 DB，脱离用文件上传这种方式。


B端产品的服务群体是企业内人员。B端的用户体验也一样重要，一个优秀的B端也是提高效率、节省成本的途径之一。



本文到此结束，希望对各位看官有帮助 (‾◡◝)