日期:2014-05-16  浏览次数:20600 次

【分享】让AJAX不依赖后端接口

问题是怎么个情况?

  网页中的ajax请求越来越多,或者应用开始就一直使用ajax与后端进行数据交换。(目前我在公司参与的项目就是如此)N多接口前后端来回调试是个麻烦事。

后端不可能短时间把所有的接口都写完,也不会为了前端测试而制造假的数据和接口,不仅耗费时间而且到了开发阶段返回的数据结构、接口名称也可能会有许多改动。那么后端?

一边写接口一边给前端,这看起来不错。但在具体实施过程中,后端未完成的接口可能有错误,你需要不停的和后端沟通不停的找原因,有可能中途还会停滞等待后端返回数据正
确才能继续。

为什么会这样?

  1:前端在开发初期就依赖了未成形的接口。

  2:后端不完全知道前端需要的数据项及数据格式。

如何解决?

  1:需求确认会议中前后端充分讨论功能和接口。(需求明确的backlog,这个工作非常简单)

      在有完善的backlog文档前提下,用户的每个操作都被记录成明确的功能。只要在最后的确认中开发人员一致认同这些条目,就很容易总结出需要的接口。

  2:前端写接口文档(后端辅助)。

      为什么是前端?

       1:前端完全了解页面需要展示的数据。2:前端完全了解需要的数据格式(如何处理错误码等等)

      前端的接口文档可能是这样:(示例登录接口)

?

复制代码
1:用户登录
                    url: ? (留给后端补充)
                    请求方式:POST
                    请求参数:email:String
                          pwd:String
                          checkCode:String
                    返回数据:
                        {
                            code:int
,//
错误编码,登录成功为0 其他错误返回错误编码,没有result项


                            result:{
                                id:int
 //
 用户ID


                                name:string //
用户名


                                ...
                            }
                        }
复制代码

      后端如何辅助?

        1:补充请求url。2:修正返回数据的字段。如果返回数据项很多文档中的字段不符合后端的开发字段,那么后端需要修改过来。
         修改文档是一个前后端讨论的过程,有任何疑问都可以沟通。文档完成以后各自一份。(文档中任何修改都可以使用其他颜色标注,提醒其他人员注意)

        后端补充完整以后可能是这样:

?

复制代码
1:用户登录
                    url: user/login.php (补充)
                    请求方式:POST
                    请求参数:email:String
                          pwd:String
                          checkCode:String
                    返回数据:
                        {
                            code:int
,//
错误编码,登录成功为0 其他错误返回错误编码,没有result项


                            result:{
                                id:int
 //
 用户ID


                                user:string //
用户名(修改)


                                ...
                            }
                        }
复制代码


    3:开发过程完全依照文档

      文档完成以后,大家心里都很清楚我只要这样做,返回、使用这样的数据就一定没错。

      后端开始写代码,完全不用理会前端,他根本不会来找你的麻烦。

?

前端如何依照文档开始工作?

    接口都有了,返回数据也有了。那么接下来的工作就是构建一套可以使用模拟数据测试的框架。

    如果使用jquery,一个简单的结构可能是这样。

    用户点击登录按钮,前端模拟了文档中描述的数据,直接调用了回调函数。这跟真实情况一样。