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


Posted in Javascript onDecember 03, 2012

问题是怎么个情况?

网页中的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 的应用如何组织代码?
Javascript 相关文章推荐
javascript进行数组追加方法小结
Jun 16 Javascript
JavaScript获取客户端IP的方法(新方法)
Mar 11 Javascript
BootStrap+Angularjs+NgDialog实现模式对话框
Aug 24 Javascript
JS简单获取客户端IP地址的方法【调用搜狐接口】
Sep 05 Javascript
JS实现页面打印(整体、局部)
Aug 18 Javascript
jQuery获取复选框选中的当前行的某个字段的值
Sep 15 jQuery
vue router 源码概览案例分析
Oct 09 Javascript
详解小程序中h5页面onShow实现及跨页面通信方案
May 30 Javascript
JS中实现浅拷贝和深拷贝的代码详解
Jun 05 Javascript
Vue仿微信app页面跳转动画效果
Aug 21 Javascript
使用easyui从servlet传递json数据到前端页面的两种方法
Sep 05 Javascript
JavaScript 反射和属性赋值实例解析
Oct 28 Javascript
Javascript在IE和FireFox中的不同表现简析
Dec 03 #Javascript
js+JQuery返回顶部功能如何实现
Dec 03 #Javascript
ajax异步刷新实现更新数据库
Dec 03 #Javascript
JavaScript代码复用模式实例分析
Dec 02 #Javascript
JSONP 跨域访问代理API-yahooapis实现代码
Dec 02 #Javascript
script标签属性type与language使用选择
Dec 02 #Javascript
JavaScript中valueOf函数与toString方法深入理解
Dec 02 #Javascript
You might like
PHP数据缓存技术
2007/02/14 PHP
php获取从百度搜索进入网站的关键词的详细代码
2014/01/08 PHP
ThinkPHP采用原生query实现关联查询left join实例
2014/12/02 PHP
百万级别知乎用户数据抓取与分析之PHP开发
2015/09/28 PHP
PHP记录页面停留时间的方法
2016/03/30 PHP
基于jquery的lazy loader插件实现图片的延迟加载[简单使用]
2011/05/07 Javascript
JS实现带有抽屉效果的产品类网站多级导航菜单代码
2015/09/15 Javascript
JS实现浏览器状态栏文字从右向左弹出效果代码
2015/10/27 Javascript
JavaScript缓冲运动实现方法(2则示例)
2016/01/08 Javascript
AngularJS通过$http和服务器通信详解
2016/09/21 Javascript
vue分类筛选filter方法简单实例
2017/03/30 Javascript
EasyUI在Panel上动态添加LinkButton按钮
2017/08/11 Javascript
解决Vue.js 2.0 有时双向绑定img src属性失败的问题
2018/03/14 Javascript
微信小程序实现分享到朋友圈功能
2018/07/19 Javascript
浅谈webpack4.x 入门(一篇足矣)
2018/09/05 Javascript
微信小程序实现日历签到
2020/09/21 Javascript
[02:56]DOTA2上海特锦赛小组赛解说FreeAgain采访花絮
2016/02/27 DOTA
理解Python中的With语句
2015/02/02 Python
Python脚本判断 Linux 是否运行在虚拟机上
2015/04/25 Python
Python递归实现汉诺塔算法示例
2018/03/19 Python
利用CSS3实现自定义滚动条代码分享
2016/08/18 HTML / CSS
护理专业推荐信
2013/11/07 职场文书
退休教师欢送会主持词
2014/03/31 职场文书
艺术学院毕业生求职信
2014/07/09 职场文书
个人委托书
2014/07/31 职场文书
党支部三严三实对照检查材料思想汇报
2014/09/29 职场文书
群众路线教育实践活动整改落实情况汇报
2014/10/28 职场文书
党校个人总结
2015/03/04 职场文书
行政撤诉申请书
2015/05/18 职场文书
小学数学教学反思范文
2016/02/16 职场文书
Python使用random模块实现掷骰子游戏的示例代码
2021/04/29 Python
Python一些基本的图像操作和处理总结
2021/06/23 Python
仅用几行Python代码就能复制她的U盘文件?
2021/06/26 Python
浅谈Python中的正则表达式
2021/06/28 Python
源码分析Redis中 set 和 sorted set 的使用方法
2022/03/22 Redis
python可视化分析绘制带趋势线的散点图和边缘直方图
2022/06/25 Python