开发模式：页面与接口解耦

发表于   |   分类于   |     |  

[TOC]

很多时候接口字段格式和页面所维护的字段格式并不是一样的，有些字段并不能直接绑定到element的组件上，或者element的组件返回的值需要经过处理才能得到接口需要的

下面讲下怎么设计model可扩展性更好

1
2
3
4
接口字段：apiDataModel
页面维护的字段：localDataModel
各个组件内部维护的字段：componentLocalDataModel
url中存储的字段：urlParamDataModel
现在要实现的功能是：

正常流程：页面localDataModel改变了 –> url需要记录请求参数，实现url分享功能 –> 发起接口请求

从分享url进入页面：从url读取请求参数 –> 初始化localDataModel –> 走正常流程

不推荐的组织模式

我以前习惯页面维护的localDataModel和接口的字段格式保持一致，这样在接口结构比较简单或者接口字段设计的比较好不需要做另外计算的时候是很快捷的一种方式，然而，一旦接口的参数格式和页面合不起来，这样的一种模式就会变得很臃肿，特别是后期有改动的时候就跟打补丁似的，东补一下西补一下，耦合性非常大，对接口的依赖性很严重，如果接口参数有变动可能逻辑调整很大。

如果apiDataModel并不能直接跟页面合起来（就是字段不能直接绑定到组件的v-model，比如组件v-model要求的是个对象但接口要求的是个数组），这种情况下localModel用apiDataModel的格式，就需要在各个组件内部再维护各自跟页面相合的componentLocalModel，localModel需要初始化componentLocalDataModel，且componentLocalDataModel变化了需要传出来改变localDataModel，这样很容易成死循环。

推荐的组织模式

  • 在model.js中维护一个apiDataModel，apiDataModel字段格式与接口要求的格式一致。

  • 然后在vue文件中维护一个localDataModel，localDataModel字段格式最好是可以直接绑定页面组件的v-model，这样组件变化了不用进行中间转换。

  • 在用户点击了提交操作的时候，先将localDataModel的值push进URL，即赋值给urlParamDataModel，然后再在model.js中将localDataModel转换成apiDataModel，最后发请求。
  • 在页面初始化的时候，从url中获取参数，即用urlParamDataModel去初始化localDataModel。
  • 如果系统要先用接口获取来的数据初始化页面而不需要从url中读取数据，那么先从接口拉取数据存到apiModel，然后在model.js中将apiModel转换成localDataModel的格式返给localDataModel。

总而言之，和接口相关的东西都放在model.js中处理，与页面渲染相关的放在vue文件里，model.js中作为中间层负责接口和渲染层的转换，这样当接口后期有变动的时候只需要改model.js中的东西，vue文件就不需要什么改动。vue文件放跟接口耦合性不大的东西。

当然，localDataModel和apiDataModel之间是越接近越好，比如localDataModel设计成需要从好几个地方获取数据才能拼合成接口数据apiDataModel，这样工作量反而增大了，而且数据之间的同步也是个问题。

热评文章