组件开发 | 不同内容相似结构？按个开关试试
【摘要】 前端开发中，有些相似性高的不同模块，可以通过合理的设计，减少开发量 ，提升代码可扩展性
前言
在做需求迭代的时候，会进行开发设计，时不时会想出一些不错的点子。这些点子跳出了开发舒适圈，帮助我提升自身技术。
我将这些点子进行了整理，全部归纳为我的「工作小记」。
今天分享不同内容但是结构相似的展示，如何通过开关控制进行实现。
分享代码基于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;
};页面渲染
初始化好的列表数据循环渲染，不同看板类型展示具体项添加开关设置方法，根据返回的布尔值进行展示。
总结
通过配置驱动视图的方式，后续的维护和扩展也变得相对简单。
作者：非职业「传道授业解惑」的开发者叶一一
简介：「趣学前端」、「CSS畅想」系列作者，华夏美食、国漫、古风重度爱好者，刑侦、无限流小说初级玩家。
如果看完文章有所收获，欢迎点赞👍 | 收藏⭐️ | 留言📝。
【版权声明】本文为华为云社区用户原创内容，转载时必须标注文章的来源（华为云社区）、文章链接、文章作者等基本信息， 否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容，欢迎发送邮件进行举报，并提供相关证据，一经查实，本社区将立刻删除涉嫌侵权内容，举报邮箱：
cloudbbs@huaweicloud.com
- 点赞
- 收藏
- 关注作者
评论（0）