V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
mouyase
V2EX  ›  前端开发

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

  •  
  •   mouyase ·
    mouyase · 43 天前 · 1289 次点击
    这是一个创建于 43 天前的主题,其中的信息可能已经有所发展或是发生改变。

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