界面交互与数据传输模式

欧雷发表于大约 3 小时之前

总结一些界面交互及其相应的数据传输设计模式。

「动态列表」就是可以直接进行数据填写，可以删除条目，并且将填写好的数据一起保存的列表：

动态列表

这种交互常用于配置类的场景，如：下拉列表的选项设置。

在 HTTP 接口设计上，除了获取已保存数据的列表接口外，与添加、修改及删除相关的接口设计大致有三种方案——

第一种是将保存与删除操作的接口分开，添加与修改的数据一同保存，但在删除时每操作一次请求一遍接口。这种方案虽然让后端能够明确知道哪些数据是被删除了，但每次删除操作都要在前端显示忙碌状态，以避免出现数据不一致的情况。这样一来用户操作就不连贯了，用户体验变差。

第二种是去掉删除接口，即在进行删除操作时不与后端通信。与第一种方案相比，虽然用户操作连贯了，用户体验得到了保证，但后端需要从数据库中捞取一定范围的数据，与前端保存提交的数据进行对比计算出被删除的数据，损失了一些性能，令请求响应变慢。从最终结果来看，还是影响用户体验，虽然小了些。

最后一种方案是前两种方案的折衷——仍然是只有一个保存接口，但在传输数据时将被删除的数据明确告诉后端，这样就避免后端去捞数据再计算被删除的数据。传输的数据格式可以是这样的：

{
  data: [], // 界面交互所产生的最终的添加与修改的数据
  deletedIds: [], // 被删除的已保存在后端的数据的 ID
}

Recommend