首页   注册   登录
V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
推荐关注
Meteor
JSLint - a JavaScript code quality tool
jsFiddle
D3.js
WebStorm
推荐书目
JavaScript 权威指南第 5 版
Closure: The Definitive Guide
zzlit
V2EX  ›  JavaScript

关于对象里面有很多参数需要处理的问题

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

    比如说这种情况,从后端请求一个接口,然后返回的值里面有部分需要重新组装成前端需要的格式,而有部分又不需要,这时就会有很长的一段代码,如下:

    const data = await getShopDetail({id})
    let detail = {}
    // 下面只给出了几种情况,实际是有更多的情况的
    // 不需要改动
    detail.name = data.name
    
    // 这里处理时间
    detail.created_at = day(data.created_at)
    
    // 一些判断处理
    detail.status = data.status.toString() ? data.status.toString() : ''
    
    // 判断有没有时间然后再处理
    if (data.cosume_times) {
      const [start, end] = data.cosume_times.split('-')
      detail.cosume_times_start = day(start, 'HH:mm')
      detail.cosume_times_end = day(end, 'HH:mm')
    }
    
    // 做图片处理
    detail.img = data.img ? JSON.parse(data.img) : []
    detail.img.forEach((item, index) => {
      ...
    })
    
    // 数组里面做一些运算处理
    data.info.forEach(item => {
      if (item.type === 1) {
        detail.count = item.count
        detail.rate = NP.divide(item.rate, 100)
        if (item.food_type === 1) {
          detail.price = NP.divide(item.price, 100)
          detail.weight = NP.divide(item.weight, 100)
        } else {
          ...
        }
      } else {
        ...
        if (item.food_type === 1) {
          ...
        } else {
          ...
        }
      }
    })
    
    // 做一些运算处理
    detail.profit = data.profit !== '' ? NP.divide(data.profit, 100) : ''
    
    this.setState({
      detail
    })
    
    

    相应的获取详情之后编辑提交的时候肯定也会有如上类似的处理组装成后端需要的格式,同样也是一大段类似的代码,请问大佬这种该怎么优化呢?

    12 回复  |  直到 2019-12-23 15:14:06 +08:00
    guyeu
        1
    guyeu   66 天前
    有一大堆名称很像的工具库:BeanUtils,其实没办法解决真正的痛点。。。
    kiracyan
        2
    kiracyan   66 天前
    前端最好不处理数据 都是让后端处理的..
    rain0002009
        3
    rain0002009   66 天前
    我很好奇 data.img 返回的是个字符串吗 竟然需要 JSON.parse 这不应该呀
    a570295535
        4
    a570295535   66 天前 via Android
    对不起,找不到对象!
    KuroNekoFan
        5
    KuroNekoFan   66 天前
    dirty work 逃得掉吗?逃不掉!其实就是比较烦人,不一定会耗费很多时间。
    我比较推荐前端定义自己的 view model,然后和后台交互的时候转换一下,这样比较 flexible
    lihongjie0209
        6
    lihongjie0209   66 天前
    你写后端也会有这个问题, 在前端看来是一个接口, 其实后端调用了 N 个外部接口+N 个数据库查询然后再组装计算出来的。 只要是系统集成对接就会有这个问题, 所以, 慢慢写喽。

    至于说让后端把数据处理好给前端??一个接口写 N 次就是为了小程序和安卓 UI 上一个字段的格式不同???


    后端接口要具有一定的抽象, 把一些共性的东西确定好, 把一些通用的东西规范化, 这样才能足够灵活。


    比如说一个日期格式, 小程序端需要显示 20190101, 安卓端需要显示 2019/01/01, 后端需要把这个抽象出来,然后规范化: 返回一个日期 2019-01-01,至于说怎么展示, 那么每个客户端都按照自己的需要去格式化就好了,后端只需要保证数据是能够覆盖客户端的需求就好了
    zzlit
        7
    zzlit   66 天前
    @guyeu 但我觉得引入工具库又额外增加成本了。。
    @kiracyan 但是后台传过来的数据总还是需要进行处理,可能没有我例子那么多罢了
    @rain0002009 就是字符串。。。
    @KuroNekoFan 其实根本的解决方法的确是这样的,只是就目前来看是不可能了,所以就想看看有没有什么好一点的写法
    @lihongjie0209 谢谢指点!
    Light3
        8
    Light3   66 天前
    是这样的 看你和后端能不能沟通了...
    反正至少要有一方的代码是这样的
    或者两方都是
    因为后端 很多的数据也是 数据库查询拼接 然后转换给你的..
    我之前写的接口 基本都是 让前端当傻瓜 直接拿值显示就行了..

    不过作为成长 个人觉得还是 更多的学习处理数据 会带来提高 (因我认识个哥们 直接数据库查出来就抛出来了 前端自己想办法)
    Greendays
        9
    Greendays   66 天前
    如果后端没法改的话,这也是没办法的。我觉得后端应该尽可能简单一些,把该传的字段都传了就行了,至于怎么用那是前端的事情。
    GzhiYi
        10
    GzhiYi   66 天前
    后端返回基本而且通用的数据格式,前端进行处理。
    Mutoo
        11
    Mutoo   65 天前
    一般我会把接口数据按后端给的结构放在 model 层,方便更新和提交,
    然后在 viewModel 层转换成需要的格式用于显示和交互。
    对 redux 来说 model 层就是 store,vm 就是 reselect
    对 vue 来说就是 data / computed
    wheatup
        12
    wheatup   56 天前
    这种情况还是用`useMemo`的 hook 吧
    关于   ·   FAQ   ·   API   ·   我们的愿景   ·   广告投放   ·   感谢   ·   实用小工具   ·   3684 人在线   最高记录 5168   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 29ms · UTC 09:17 · PVG 17:17 · LAX 01:17 · JFK 04:17
    ♥ Do have faith in what you're doing.