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

查看 230|回复 18
作者: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 类似,功能类似,但是接口数据结构不同的组件。
所以请问有什么好办法比较容易的处理这种数据吗。
Helsing   
Clean 架构了解一下
BoomMan   
jsonpath
ClericPy   
适配器模式?
P233   
保持组件数据一致, 请求完数据后先处理一下再传给前端组件
Rocketer   
前端应有自己的模型,后端来的数据都处理成自己所需的样子。
ChefIsAwesome   
list 和 item 要分开。比方说拆成  这么一个组件,它收的 props 是 name 和 url 。在你这个例子里,ListItem 处理真正的 ui ,List 是处理数据请求、循环的逻辑。
解决功能类似这个问题,要看你真正变化的部分有多少。变化少,那通过参数控制显示就可以了。变化多,那就要考虑是不是靠 slot 提供接口,是不是要再拆成更小的组件。本质上就是老生常谈的组合还是继承的问题。
mouyase
OP
  
P233 @Rocketer 就是在数据请求回来时候重新做数据拼装然后在传递给 UI 组件吗,这样会不会导致数据转换地狱呢,一串数据在不同的组件传递的时候经过了 N 多次转换之类的。请问有没有什么好的数据转换的方法呢( js/ts)
mouyase
OP
  
@BoomMan 这种是不是写的时候还是得组件根据各种不同的数据源来进行判断,再取值呢
K120   
适配器,在 service 层处理
您需要登录后才可以回帖 登录 | 立即注册

返回顶部