让AJAX不依赖后端接口实现方案_javascript技巧
程序员文章站
2022-06-03 16:37:26
...
问题是怎么个情况？
网页中的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 的应用如何组织代码？
网页中的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 的应用如何组织代码？