前端开发,遇到 UI 完全一致,但是数据结构完全不一致的情况,怎样处理才更易维护更加优雅呢

2024-04-07 21:32:29 +08:00
 mouyase

比如说现在有一个带图片的列表页面(类似小红书主页,B 站主页等),然后项目中同时有 N 个相似的页面。

但是可能组件 A 的数据结构为

[
    {
        "name": "数据 1",
        "url": "https://a.cn/1.jpg"
    },
    {
        "name": "数据 2",
        "url": "https://a.cn/2.jpg"
    },
    {
        "name": "数据 3",
        "url": "https://a.cn/3.jpg"
    }
]

B 组件的结构可能为

[
    {
        "title": "数据 1",
        "cover": {
            "url": "https://a.cn/1.jpg"
        }
    },
    {
        "name": "数据 2",
        "cover": {
            "url": "https://a.cn/1.jpg"
        }
    },
    {
        "name": "数据 3",
        "cover": {
            "url": "https://a.cn/1.jpg"
        }
    }
]

类似这种不同的数据。

而且不同的页面里面可能也会带有不同的交互。

因为项目里面有很多这种 UI 类似,功能类似,但是接口数据结构不同的组件。 所以请问有什么好办法比较容易的处理这种数据吗。

1998 次点击
所在节点    前端开发
22 条回复
Helsing
2024-04-07 21:53:37 +08:00
Clean 架构了解一下
BoomMan
2024-04-07 21:53:40 +08:00
jsonpath
ClericPy
2024-04-07 21:54:57 +08:00
适配器模式?
P233
2024-04-07 22:02:52 +08:00
保持组件数据一致, 请求完数据后先处理一下再传给前端组件
Rocketer
2024-04-07 22:06:02 +08:00
前端应有自己的模型,后端来的数据都处理成自己所需的样子。
ChefIsAwesome
2024-04-07 22:16:49 +08:00
list 和 item 要分开。比方说拆成 <ListItem> 这么一个组件,它收的 props 是 name 和 url 。在你这个例子里,ListItem 处理真正的 ui ,List 是处理数据请求、循环的逻辑。
解决功能类似这个问题,要看你真正变化的部分有多少。变化少,那通过参数控制显示就可以了。变化多,那就要考虑是不是靠 slot 提供接口,是不是要再拆成更小的组件。本质上就是老生常谈的组合还是继承的问题。
mouyase
2024-04-07 22:28:06 +08:00
P233 @Rocketer 就是在数据请求回来时候重新做数据拼装然后在传递给 UI 组件吗,这样会不会导致数据转换地狱呢,一串数据在不同的组件传递的时候经过了 N 多次转换之类的。请问有没有什么好的数据转换的方法呢( js/ts)
mouyase
2024-04-07 22:29:27 +08:00
@BoomMan 这种是不是写的时候还是得组件根据各种不同的数据源来进行判断,再取值呢
K120
2024-04-07 22:58:26 +08:00
适配器,在 service 层处理
Xu3Xan89YsA7oP64
2024-04-07 23:44:35 +08:00
容器组件处理数据,统一格式后传入展示组件,这不是基本功吗
43n5Z6GyW39943pj
2024-04-07 23:46:41 +08:00
1.组件中处理一下,2.干后端
Adelell
2024-04-07 23:53:39 +08:00
api 给的数据必须洗一遍,不然不放心。
Adelell
2024-04-07 23:55:58 +08:00
洗数据是个技术活,做的好无论接口怎么变,前端都能自动适配。
mouyase
2024-04-07 23:56:37 +08:00
@Adelell 所以有什么好的方案用来做数据清洗吗
mouyase
2024-04-07 23:57:47 +08:00
@shizhibuyu2023 API 这边现在给的数据比较乱,字段又多又杂,而且不同的应用场景同一个字段也会有不同的用途,所以一直都没有想到一个比较优秀的统一处理方案
Adelell
2024-04-07 23:59:27 +08:00
洗数据最好的办法是调用 gpt4 的接口,先告诉 gpt 自己需要的目标格式,然后把 api 的原数据发给 gpt 帮你转换成目标格式
mouyase
2024-04-08 00:01:39 +08:00
@Adelell 说实话我们的数据有些问后端都不知道这个字段是干嘛的或者怎么解释,我们前端也很难用语言描述,感觉接 GPT 可能也没那么现实……
Adelell
2024-04-08 00:08:08 +08:00
简单的话就把原始格式和目标格式告诉 gpt ,让 gpt 写个 function 处理下
Rocketer
2024-04-08 07:15:15 +08:00
@mouyase 地不地狱的都不能相信别人给你的数据,你的数据必须是自己的
DimitriYoon
2024-04-08 15:31:12 +08:00
都已经设计成这样了,你怎么做也优雅不了了吧...

这是一个专为移动设备优化的页面(即为了让你能够在 Google 搜索结果里秒开这个页面),如果你希望参与 V2EX 社区的讨论,你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://www.v2ex.com/t/1030392

V2EX 是创意工作者们的社区,是一个分享自己正在做的有趣事物、交流想法,可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX