比如说现在有一个带图片的列表页面(类似小红书主页,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 类似,功能类似,但是接口数据结构不同的组件。 所以请问有什么好办法比较容易的处理这种数据吗。
1
Helsing 244 天前 via iPhone
Clean 架构了解一下
|
2
BoomMan 244 天前
jsonpath
|
3
ClericPy 244 天前 1
适配器模式?
|
4
P233 244 天前
保持组件数据一致, 请求完数据后先处理一下再传给前端组件
|
5
Rocketer 244 天前 via iPhone
前端应有自己的模型,后端来的数据都处理成自己所需的样子。
|
6
ChefIsAwesome 244 天前
list 和 item 要分开。比方说拆成 <ListItem> 这么一个组件,它收的 props 是 name 和 url 。在你这个例子里,ListItem 处理真正的 ui ,List 是处理数据请求、循环的逻辑。
解决功能类似这个问题,要看你真正变化的部分有多少。变化少,那通过参数控制显示就可以了。变化多,那就要考虑是不是靠 slot 提供接口,是不是要再拆成更小的组件。本质上就是老生常谈的组合还是继承的问题。 |
7
mouyase OP P233 @Rocketer 就是在数据请求回来时候重新做数据拼装然后在传递给 UI 组件吗,这样会不会导致数据转换地狱呢,一串数据在不同的组件传递的时候经过了 N 多次转换之类的。请问有没有什么好的数据转换的方法呢( js/ts)
|
9
K120 244 天前
适配器,在 service 层处理
|
10
Xu3Xan89YsA7oP64 244 天前
容器组件处理数据,统一格式后传入展示组件,这不是基本功吗
|
11
43n5Z6GyW39943pj 244 天前
1.组件中处理一下,2.干后端
|
12
Adelell 244 天前 via iPhone
api 给的数据必须洗一遍,不然不放心。
|
13
Adelell 244 天前 via iPhone
洗数据是个技术活,做的好无论接口怎么变,前端都能自动适配。
|
15
mouyase OP @shizhibuyu2023 API 这边现在给的数据比较乱,字段又多又杂,而且不同的应用场景同一个字段也会有不同的用途,所以一直都没有想到一个比较优秀的统一处理方案
|
16
Adelell 244 天前 via iPhone
洗数据最好的办法是调用 gpt4 的接口,先告诉 gpt 自己需要的目标格式,然后把 api 的原数据发给 gpt 帮你转换成目标格式
|
18
Adelell 244 天前 via iPhone
简单的话就把原始格式和目标格式告诉 gpt ,让 gpt 写个 function 处理下
|
20
DimitriYoon 244 天前
都已经设计成这样了,你怎么做也优雅不了了吧...
|
21
mouyase OP @DimitriYoon 后入场的项目没办法(
|