web前端避免无意义的数据判空及优雅的混入属性

在web前端开发中,有这么几种情况,后台返回的数据并不完整。

  1. 后台只给了一个状态值, 我们前端在显示时, 需要显示状态的名。
  2. 后端在开发时, 自己在数据库中造了一些测试数据,没有关联正确,导致返回的数据有缺失。
  3. 正常业务的不同阶段,有一些数据字段与业务状态有关,导致接口中的一些字段缺失了。

当接口嵌套层级过多及接口字段过多时,前端在页面展示时,对接口数据的判空令人很头痛。

之前一直这样混入属性数量少还行,混入的字段多了,太不直观了,加之有些字段可能是空的,判空操作令人及其反感。

如何对返回的数据进行优雅的处理脏数据,混入前台直接可以使用的数据呢?

我是这样实现的:

  1. 实现一个函数tranNullObject,对接口中的数据和数据模板进行比对,如果返回的数据缺失了某些字段,那么补上,这样就能极大的避免了无意义的空值判断,如果需要对字段判空,我们只需对最后一级进行判断。
  2. 在接口数据模板上,定义以函数的形式混入前端自己的字段。由于在第一步中数据模板会与真实数据进行比对, 比对完成后, 接口数据中就被混入上了这个函数。
  3. 混入的属性是个函数,不是数据,没法直接使用,又实现了一个函数mixinsFiledUseFunc来执行在上步中混入的函数,得到需要的数据。

代码见 https://blog.csdn.net/cxgasd/article/details/106072736?spm=1001.2014.3001.5501

使用示例

只需要定义一个接口数据模板,然后执行这两个函数 tranNullObject(item, tpl);mixinsFiledUseFunc(item);即可。

相关推荐
©️2020 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页