mouyase

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

  •  
  •   mouyase ·
    mouyase · Apr 7, 2024 · 3031 views
    This topic created in 941 days ago, the information mentioned may be changed or developed.

    比如说现在有一个带图片的列表页面(类似小红书主页,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 类似,功能类似,但是接口数据结构不同的组件。 所以请问有什么好办法比较容易的处理这种数据吗。

    22 replies  •  2024-04-08 22:20:53 +08:00
    Helsing
    Helsing
    Apr 7, 2024 via iPhone
    1
    Clean 架构了解一下
    BoomMan
    BoomMan
    Apr 7, 2024
    2
    jsonpath
    ClericPy
    ClericPy
    Apr 7, 2024❤️1
    3
    适配器模式?
    P233
    P233
    Apr 7, 2024
    4
    保持组件数据一致, 请求完数据后先处理一下再传给前端组件
    Rocketer
    Rocketer
    Apr 7, 2024 via iPhone
    5
    前端应有自己的模型,后端来的数据都处理成自己所需的样子。
    ChefIsAwesome
    ChefIsAwesome
    Apr 7, 2024
    6
    list 和 item 要分开。比方说拆成 <ListItem> 这么一个组件,它收的 props 是 name 和 url 。在你这个例子里,ListItem 处理真正的 ui ,List 是处理数据请求、循环的逻辑。
    解决功能类似这个问题,要看你真正变化的部分有多少。变化少,那通过参数控制显示就可以了。变化多,那就要考虑是不是靠 slot 提供接口,是不是要再拆成更小的组件。本质上就是老生常谈的组合还是继承的问题。
    mouyase
    mouyase
    OP
    Apr 7, 2024
    7
    P233 @Rocketer 就是在数据请求回来时候重新做数据拼装然后在传递给 UI 组件吗,这样会不会导致数据转换地狱呢,一串数据在不同的组件传递的时候经过了 N 多次转换之类的。请问有没有什么好的数据转换的方法呢( js/ts)
    mouyase
    mouyase
    OP
    Apr 7, 2024
    8
    @BoomMan 这种是不是写的时候还是得组件根据各种不同的数据源来进行判断,再取值呢
    K120
    K120
    Apr 7, 2024
    9
    适配器,在 service 层处理
    Xu3Xan89YsA7oP64
    Xu3Xan89YsA7oP64
    Apr 7, 2024
    10
    容器组件处理数据,统一格式后传入展示组件,这不是基本功吗
    43n5Z6GyW39943pj
    43n5Z6GyW39943pj
    Apr 7, 2024
    11
    1.组件中处理一下,2.干后端
    Adelell
    Adelell
    Apr 7, 2024 via iPhone
    12
    api 给的数据必须洗一遍,不然不放心。
    Adelell
    Adelell
    Apr 7, 2024 via iPhone
    13
    洗数据是个技术活,做的好无论接口怎么变,前端都能自动适配。
    mouyase
    mouyase
    OP
    Apr 7, 2024
    14
    @Adelell 所以有什么好的方案用来做数据清洗吗
    mouyase
    mouyase
    OP
    Apr 7, 2024
    15
    @shizhibuyu2023 API 这边现在给的数据比较乱,字段又多又杂,而且不同的应用场景同一个字段也会有不同的用途,所以一直都没有想到一个比较优秀的统一处理方案
    Adelell
    Adelell
    Apr 7, 2024 via iPhone
    16
    洗数据最好的办法是调用 gpt4 的接口,先告诉 gpt 自己需要的目标格式,然后把 api 的原数据发给 gpt 帮你转换成目标格式
    mouyase
    mouyase
    OP
    Apr 8, 2024
    17
    @Adelell 说实话我们的数据有些问后端都不知道这个字段是干嘛的或者怎么解释,我们前端也很难用语言描述,感觉接 GPT 可能也没那么现实……
    Adelell
    Adelell
    Apr 8, 2024 via iPhone
    18
    简单的话就把原始格式和目标格式告诉 gpt ,让 gpt 写个 function 处理下
    Rocketer
    Rocketer
    Apr 8, 2024 via iPhone
    19
    @mouyase 地不地狱的都不能相信别人给你的数据,你的数据必须是自己的
    DimitriYoon
    DimitriYoon
    Apr 8, 2024
    20
    都已经设计成这样了,你怎么做也优雅不了了吧...
    mouyase
    mouyase
    OP
    Apr 8, 2024
    21
    @DimitriYoon 后入场的项目没办法(
    BoomMan
    BoomMan
    Apr 8, 2024
    22
    @mouyase 组件仅考虑输入输出,具体在什么时候转换,是生产关系决定的,jsonpath 可以配置化的很好解决这个问题。
    About   ·   Help   ·   Advertise   ·   Blog   ·   API   ·   FAQ   ·   Privacy   ·   Solana   ·   2528 Online   Highest 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 43ms · UTC 14:54 · PVG 22:54 · LAX 06:54 · JFK 09:54
    ♥ Do have faith in what you're doing.