大佬们遇到过这个问题吗？前端业务组件如何更好的适配数据源、状态源，做到关注分离，达到更高可复用性？

Question

问题背景我们通过提炼公用部分，做成可复用的业务组件，一般是通过传入数据展示相应组件，可以定义几种不同类型和状态，后续按照设计规则，复用没什么问题。那么如果现在有很多模块或应用由不同后端开发者维护，且接口不尽相同，是否可以在前端来做适配工作，以不变应万变？举个例子酒店的筛选组件、日历组件等等，如何复用到房产等其他模块，并且不需要接口数据源做任何改动？现状恕我愚钝，没什么思路，难道在接收数据的时候，经过繁琐的步骤强行改造成可用的数据结构？复杂算法完全是小白我现在主要做小程序开发，但不限定技术栈范围，构思和原理是相通的

Answer 1

谢邀。如果题主的问题描述最终是简化为“如何让来自后端接口的数据可以被同一个前端项目使用，并且要求前端实现”，那可以考虑使用适配器模式，也就是在接口返回数据和js之间再增加一层专门做数据转换的层，这样做可以实现接口不变，前端项目稍微做一下改动（改动内容就是对接转换层即可，使代码改动范围最小），举个最简单的例子：
//某个service文件
//旧代码里，getData返回的是一个promise，调用后then里，直接返回接口请求的数据
getData=(params)=>{
return$.get(params)
}
exportdefult{
getData
}
/*---------------------分割线---------------------*/
//新代码，增加个适配器这里简单处理，使用高阶函数实现，主要是说明一下自己的思路。复杂的情况，可以使用专门的类来处理
getData=()=>{
//这里和旧的一样
}
constadapter=(func)=>{
returnfunction(params)=>{
returnnewPromise(resolve=>{
func(params).then(result=>{
//在这里可以做数据转换,把返回的不同格式的都转化成前端可接受的数据格式具体需要怎么转换convert函数就怎么写
constnewResult=convert(result)
resolve(response)
})
})
}
}
exportdefult{
getData：adapter(getData)//类似地，其他旧的请求方法也可以直接使用该适配器
}
上面这个例子，理论上，一般只需要写清楚convert函数，可以使改动范围可以限在当前的service文件当中，具体情境当然还需要具体讨论
只写个简单示例，抛砖引玉。
                            

Answer 2

多谢邀请
楼主列写的筛选组件和日历组件，都是属于基础UI组件。这类组件一般是固定格式，然后按照指定格式传参进行渲染，类比于cube-ui这类组件，开发人员想使用里面的组件，也必须按照其约定的格式来编码。
当然，依赖于不同的后台格式，最好是加一层转换器转换成相应格式才好。但是有一种比较恶心的情况，就是，后台穿的参数需要按照原格式传回后台，这样则需要两层转换。这种情况，不如在写一个另一种数据结构传参的组件