「工作小记」不同内容相似结构?按个开关试试
前言
在做需求迭代的时候,会进行开发设计,时不时会想出一些不错的点子。这些点子跳出了开发舒适圈,帮助我提升自身技术。
我将这些点子进行了整理,全部归纳为我的「工作小记」。
今天分享不同内容但是结构相似的展示,如何通过开关控制进行实现。
分享代码基于 Recat Hooks 实现的。
功能分析
UI
功能解析
现有功能中,鞋子看板和帽子看板的展示类型完全一致,仅不同类型下的具体数据不同。
新需求,将鞋子看板中原有的今日已付款和本月已付款改为了上月已付款和上年已付款。
开发设计
以往思路
在以往的开发思路中,自然而然的列表展示之前进行列表重组,根据看板类型的不同,区分不同内容。
复制代码
如果后续新增其他类型看板或者鞋子看板新增其他项展示或者帽子看板增其他项展示,条件语句需要继续新增,不方便维护,并且容易影响已有功能。
思维转换
对于内容展示,只有展示和不展示两种情况中的一种,类似灯亮与不亮,是通过电源开关控制,这里也可以控制不同看板下的类型展示开关,即不影响原有功能,又方便后续扩展。
具体实现
设置看板变量
复制代码
设置看板展示具体项的对象
包含展示涉及的全部项,需要区分看板类型的项,设置控制开关的值。
复制代码
数据初始化
将页面请求数据进行初始化,转换成我们需要的能展示到页面的数据。
复制代码
看板项开关设置方法
开关的具体逻辑如下:
不设置开关字段的项直接展示;
设置开关字段的项,根据内容里面的具体看板类型进行展示
复制代码
页面渲染
初始化好的列表数据循环渲染,不同看板类型展示具体项添加开关设置方法,根据返回的布尔值进行展示。
总结
一次简单的改变,可能会使前方的路豁然开朗。努力探索,继续加油。💐
版权声明: 本文为 InfoQ 作者【叶一一】的原创文章。
原文链接:【http://xie.infoq.cn/article/630d94c43a6405f9fe2ff0e29】。文章转载请联系作者。
评论