前端业务组件如何更好的适配数据源、状态源,做到关注分离,达到更高可复用性?

周振超
  • 1.1k

问题背景

  • 我们通过提炼公用部分,做成可复用的业务组件,一般是通过传入数据展示相应组件,可以定义几种不同类型和状态,后续按照设计规则,复用没什么问题。
  • 那么如果现在有很多模块或应用由不同后端开发者维护,且接口不尽相同,是否可以在前端来做适配工作,以不变应万变?

举个例子

酒店的筛选组件、日历组件等等,如何复用到房产等其他模块,并且不需要接口数据源做任何改动?

现状

  • 恕我愚钝,没什么思路,难道在接收数据的时候,经过繁琐的步骤强行改造成可用的数据结构?复杂算法完全是小白
  • 我现在主要做小程序开发,但不限定技术栈范围,构思和原理是相通的
回复
阅读 2.4k
3 个回答

谢邀。如果题主的问题描述最终是简化为“如何让来自后端接口的数据可以被同一个前端项目使用,并且要求前端实现”,那可以考虑使用适配器模式,也就是在接口返回数据和js之间再增加一层专门做数据转换的层,这样做可以实现接口不变,前端项目稍微做一下改动(改动内容就是对接转换层即可,使代码改动范围最小),举个最简单的例子:

// 某个service文件
 
// 旧代码里,getData返回的是一个promise,调用后then里,直接返回接口请求的数据
getData = (params) => {
    return $.get(params)
}

export defult {
    getData 
}

/* --------------------- 分割线 ---------------------*/
// 新代码,增加个适配器 这里简单处理,使用高阶函数实现,主要是说明一下自己的思路。复杂的情况,可以使用专门的类来处理
getData = () => {
 // 这里和旧的一样   
}

const adapter = (func) => {
    return function(params) =>{
          return new Promise(resolve=>{
            func(params).then(result => {
                //在这里可以做数据转换,把返回的不同格式的都转化成前端可接受的数据格式 具体需要怎么转换 convert函数就怎么写
                const newResult = convert(result)
                resolve(response)
            })
         })
    }
}

export defult {
    getData:adapter(getData) // 类似地,其他旧的请求方法也可以直接使用该适配器
}

上面这个例子,理论上,一般只需要写清楚convert函数,可以使改动范围可以限在当前的service文件当中,具体情境当然还需要具体讨论

只写个简单示例,抛砖引玉。

多谢邀请

楼主列写的筛选组件和日历组件,都是属于基础UI组件。这类组件一般是固定格式,然后按照指定格式传参进行渲染,类比于cube-ui这类组件,开发人员想使用里面的组件,也必须按照其约定的格式来编码。

当然,依赖于不同的后台格式,最好是加一层转换器转换成相应格式才好。但是有一种比较恶心的情况,就是,后台穿的参数需要按照原格式传回后台,这样则需要两层转换。这种情况,不如在写一个另一种数据结构传参的组件

不要求返回数据格式字段规范做不到,加中间层做数据处理并不建议,组件内部绑定都是需要key或者数组遍历(多字段还是需要key)

宣传栏