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

Question

问题背景

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

举个例子

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

现状

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

Answer 1

谢邀。如果题主的问题描述最终是简化为“如何让来自后端接口的数据可以被同一个前端项目使用，并且要求前端实现”，那可以考虑使用适配器模式，也就是在接口返回数据和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文件当中，具体情境当然还需要具体讨论

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

Answer 2

多谢邀请

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

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

Answer 3

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