让AJAX不依赖后端接口实现方案_鸿宇娱乐平台【官方网站注册登录】 

常见问题当前位置:鸿宇娱乐 > 常见问题 > >

让AJAX不依赖后端接口实现方案

  

[AJAX,后端接口]让AJAX不依赖后端接口实现方案

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

  
后端不可能短时间把所有的接口都写完,也不会为了前端测试而制造假的数据和接口,不仅耗费时间而且到了开发阶段返回的数据结构、接口名称也可能会有许多改动。那么后端 一边写接口一边给前端,这看起来不错。但在具体实施过程中,后端未完成的接口可能有错误,你需要不停的和后端沟通不停的找原因,有可能中途还会停滞等待后端返回数据正  
确才能继续。

  
  
为什么会这样?  
  1:前端在开发初期就依赖了未成形的接口。

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

  
如何解决?  
  1:需求确认会议中前后端充分讨论功能和接口。(需求明确的backlog,这个工作非常简单)  
  在有完善的backlog文档前提下,用户的每个操作都被记录成明确的功能。只要在最后的确认中开发人员一致认同这些条目,就很容易总结出需要的接口。

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

  
为什么是前端?  
  1:前端完全了解页面需要展示的数据。2:前端完全了解需要的数据格式(如何处理错误码等等)  
  前端的接口文档可能是这样:(示例登录接口)  
代码如下:

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

  
}  
}  

  
后端如何辅助?  
1:补充请求url。2:修正返回数据的字段。如果返回数据项很多文档中的字段不符合后端的开发字段,那么后端需要修改过来。

  
 修改文档是一个前后端讨论的过程,有任何疑问都可以沟通。文档完成以后各自一份。(文档中任何修改都可以使用其他颜色标注,提醒其他人员注意)  
后端补充完整以后可能是这样:  
代码如下:

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

  
}  
}  

  
3:开发过程完全依照文档  
  文档完成以后,大家心里都很清楚我只要这样做,返回、使用这样的数据就一定没错。

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

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

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

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

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

  
代码如下:

  
View Code  
Common = {  
post:function(url, data, success){//一个基本的post请求封装  
$.ajax({  
url:url,  
type:"post",  
data:data,  
dataType:"json",  
error:function(){  
//Common.tip(TipData["1002"], 0);  
//ajax错误提示  
},  
success:function(data){  
if(data && data.code != 0){  
//Common.showError(data);  
//错误处理code转换成文字提示给用户  
};  
success && success(data);  
}  
});  
}  
};  
// 1:用户登录  
function login(email, pwd, checkCode, callback){  
//测试环境  
var data = { //模拟数据  
code : 0,  
result:{  
id:'123456',  
user:"lujun"  
}  
};  
callback(data);//直接把模拟数据传递给回调函数  
return ;  
//---链接真实数据的时候注释以上代码, 上线以前通过压缩工具这些注释掉会被移除  
//正式环境  
Common.post("user/login.php",{email:email, pwd:pwd, checkCode:checkCode}, callback);  
};  
//点击事件驱动登录  
//登录成功执行一些列动作  
$('#submit').click(function(){  
var email = $('#email').val();  
var pwd = $('#pwd').val();  
var checkCode = $('#checkCode').val();  
//调用登录接口  
login(email, pwd, checkCode, function(data){  
if(data && data.code == 0){  
//ajax执行成功  
data = data.result;  
$('#userName').text(data.user);  
//其他代码 ...

  
}  
});  
});  

  
如何更好的工作?

  
全部功能接口都采用这样的方式工作,会发现整个应用不需要后端支持,完全用模拟数据就可以验收测试,是不是酷了一点呢!

  
一旦你准备链接正式数据,注释掉测试代码以后(这可能分布在代码的各个角落,10处或者更多)。你不能在测鸿宇娱乐试环境、链接数据库的环境中快速切换!

  
这样的测试代码价值太有限。

  
我们可以把测试数据独立出来作为一个文件,使用方法覆盖的方式把最底层的AJAX请求方法覆盖。

  
代码如下:

  
View Code  
//testData.js 用来存放所有测试数据  
TestData = {  
"userlogin":{ //登录的测试数据  
code : 0,  
result:{  
id:'123456',  
user:"lujun"  
}  
}  
// ... 其他结构的测试虎踞  
};  
// common.js  
// 覆盖 Common.post 方法  
Common.post:function(url, data, success){//一个基本的post请求封装  
//把url进行MD5来作为key也是一个不错的想法,可以省去那么多判断  
if(url == "user/login.php"){  
success(TestData["userlogin"]);  
}else if(url == "other"){//其他接口  
//...

  
}  
};  
// 1:用户登录  
function login(email, pwd, checkCode, callback){  
Common.post("user/login.php",{email:email, pwd:pwd, checkCode:checkCode}, callback);  
};  
//点击事件驱动登录  
//登录成功执行一些列动作  
$('#submit').click(function(){  
var email = $('#email').val();  
var pwd = $('#pwd').val();  
var checkCode = $('#checkCode').val();  
//调用登录接口  
login(email, pwd, checkCode, function(data){  
if(data && data.code == 0){  
//ajax执行成功  
data = data.result;  
$('#userName').text(data.user);  
//其他代码 ...

  
}  
});  
});  

  
上面的代码很容易理解,想要模拟数据测试的时候就把最底层的ajax请求方法覆盖掉。

  
当然这只是其中的一种,你可能有更好的方法或者通过一个全局变量就可以切换两个环境,就好象 debug = false, debug = true 这样!

  
最后  
方法说透了其实也非常简单,重要的是scrum中backlog的分解和理解。

  
我所在的团队现在采用这种方式工作非常顺利。

  
最后我一直在考虑一个合并混淆压缩有500K JS 的应用如何组织代码?

(责任编辑:admin)

上一篇:javascript 鼠标拖动图标技术

下一篇:Extjs4 类的定义和扩展实例

推荐内容

客户服务热线

010-400-12345

在线客服