「React实践」不同内容相似结构？按个开关试试

2022-09-26 106

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： 前端开发中，有些相似性高的不同模块，可以通过合理的设计，减少开发量，提升代码可扩展性

前言

在做需求迭代的时候，会进行开发设计，时不时会想出一些不错的点子。这些点子跳出了开发舒适圈，帮助我提升自身技术。

我将这些点子进行了整理，全部归纳为我的「工作小记」。

今天分享不同内容但是结构相似的展示，如何通过开关控制进行实现。

分享代码基于Recat Hooks实现的。

功能分析

UI

网络异常，图片无法展示

功能解析

现有功能中，鞋子看板和帽子看板的展示类型完全一致，仅不同类型下的具体数据不同。

新需求，将鞋子看板中原有的今日已付款和本月已付款改为了上月已付款和上年已付款。

开发设计

以往思路

在以往的开发思路中，自然而然的列表展示之前进行列表重组，根据看板类型的不同，区分不同内容。

if (type === 'shoses' && (item.key === '上月已付款' || item.key === '上年已付款') ) { 
    // 鞋子看板加入两项 
} 
if (type === 'hat' && (item.key === '今日已付款' || item.key === '本月已付款') ) 
{ 
    // 帽子看板加入两项 
}

如果后续新增其他类型看板或者鞋子看板新增其他项展示或者帽子看板增其他项展示，条件语句需要继续新增，不方便维护，并且容易影响已有功能。

思维转换

对于内容展示，只有展示和不展示两种情况中的一种，类似灯亮与不亮，是通过电源开关控制，这里也可以控制不同看板下的类型展示开关，即不影响原有功能，又方便后续扩展。

具体实现

设置看板变量

/** @name 看板类别对象  */
const boardObj = {
    1 : {
        key: 'shoes',
        // 唯一key
        name: '鞋子',
        // 看板展示标题
        class: 1,
        // 和后端数据对应的值
    },
    2 : {
        key: 'hat',
        name: '帽子',
        class: 2,
    },
};

设置看板展示具体项的对象

包含展示涉及的全部项，需要区分看板类型的项，设置控制开关的值。

/** @name 看板展示具体项的对象  */
const boardOption = {
  name: '看板',
  list: [{
    key: 'allPay',
    // 唯一key
    name: '全部待付款',
    // 展示名称
    selfStyle: {
      color: '#d9041b',
    },
    // 字体颜色
    sumNum: '',
    // 展示值
    sumKey: 'allPay',
    // 展示值的key
  },
  {
    key: 'today',
    name: '今日已付款',
    selfStyle: {
      color: '#2eaaaa',
    },
    sumNum: '',
    sumKey: 'today',
    moduleShowType: 'hat',
    // 模块展示控制开关
  },
  {
    key: 'month',
    name: '本月已付款',
    selfStyle: {
      color: '#2eaaaa',
    },
    sumNum: '',
    sumKey: 'month',
    moduleShowType: 'hat',
  },
  {
    key: 'lastMonth',
    name: '上月已付款',
    search: '',
    selfStyle: {
      color: '#F59A23',
    },
    sumNum: '',
    sumKey: 'lastMonth',
    moduleShowType: 'shoes',
  },
  {
    key: 'lastYear',
    name: '上年已付款',
    search: '',
    selfStyle: {
      color: '#F59A23',
    },
    sumNum: '',
    sumKey: 'lastYear',
    moduleShowType: 'shoes',
  },
  {
    key: 'year',
    name: '今年已付款',
    selfStyle: {
      color: '#2eaaaa',
    },
    sumNum: '',
    sumKey: 'year',
  },
  ],
};

数据初始化

将页面请求数据进行初始化，转换成我们需要的能展示到页面的数据。

/** @name 页面展示看板列表数组  */
const[boardList, setBoardList] = useState([]);
useEffect(() =>{
  let dataList = [{
    allPay: 1100,
    class: 1,
    month: 10,
    lastMonth: 10,
    lastYear: 100,
    today: 2,
    year: 200,
  },
  {
    allPay: 2200,
    class: 2,
    month: 20,
    lastMonth: 30,
    lastYear: 400,
    today: 2,
    year: 299,
  },
  ];
  const list = [];
  dataList.forEach(item =>{
    let boardItem = boardObj[item.class];
    boardItem.board = _.cloneDeep(boardOption);
    boardItem.board.list.forEach(board =>{
      board.sumNum = item[board.sumKey];
    });
    list.push(boardItem);
  });
  setBoardList(list);
},
[]);

看板项开关设置方法

开关的具体逻辑如下：

不设置开关字段的项直接展示；
设置开关字段的项，根据内容里面的具体看板类型进行展示

/**
   * 看板项开关设置方法
   * @param {Object} board 看板项数据
   * @param {Object} item 看板数据
   * @return {boolean} 看板项展示布尔值
   */
const moduleShowFlag = (board, item) =>{
  let flag = false;
  // =>true: 不设置开关字段的项直接展示
  if (!board.moduleShowType) {
    flag = true;
  } else {
    // =>true: 设置开关字段的项，根据内容里面的具体看板类型进行展示
    if (board.moduleShowType.includes(item.key)) {
      flag = true;
    }
  }
  return flag;
};

页面渲染

初始化好的列表数据循环渲染，不同看板类型展示具体项添加开关设置方法，根据返回的布尔值进行展示。

网络异常，图片无法展示

总结

一次简单的改变，可能会使前方的路豁然开朗。努力探索，继续加油。💐