让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 相关文章推荐
jquery ajax 检测用户注册时用户名是否存在
Nov 03 Javascript
IE6下opacity与JQuery的奇妙结合
Mar 01 Javascript
可插入图片的TEXT文本框
Dec 27 Javascript
JS、jquery实现几分钟前、几小时前、几天前等时间差显示效果的代码实例分享
Apr 11 Javascript
利用css+原生js制作简单的钟表
Apr 07 Javascript
AngularJS双向绑定和依赖反转实例详解
Apr 15 Javascript
ReactNative实现图片上传功能的示例代码
Jul 11 Javascript
js读取本地文件的实例
Dec 22 Javascript
vue-vuex中使用commit提交mutation来修改state的方法详解
Sep 16 Javascript
解决Layui 表格自适应高度的问题
Nov 15 Javascript
vue自动添加浏览器兼容前后缀操作
Aug 13 Javascript
使用js原生实现年份轮播选择效果实例
Jan 12 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/06/14 PHP
PHP实现图片裁剪、添加水印效果代码
2014/10/01 PHP
PHP redis实现超迷你全文检索
2017/03/04 PHP
PHP实现将base64编码字符串转换成图片示例
2018/06/22 PHP
JS中style属性
2006/10/11 Javascript
Javascript匿名函数的一种应用 代码封装
2010/06/27 Javascript
强大的jquery插件jqeuryUI做网页对话框效果!简单
2011/04/14 Javascript
document.createElement()用法
2013/03/13 Javascript
jquery移动listbox的值原理及代码
2013/05/03 Javascript
javaScript面向对象继承方法经典实现
2013/08/20 Javascript
raphael.js绘制中国地图 地图绘制方法
2014/02/12 Javascript
jquery日历控件实现方法分享
2014/03/07 Javascript
JQuery插件iScroll实现下拉刷新,滚动翻页特效
2014/06/22 Javascript
JavaScript插件化开发教程 (二)
2015/01/27 Javascript
javascript清空table表格的方法
2015/05/14 Javascript
从零开始学习Node.js系列教程三:图片上传和显示方法示例
2017/04/13 Javascript
微信小程序中吸底按钮适配iPhone X方案
2017/11/29 Javascript
Vue el-autocomplete远程搜索下拉框并实现自动填充功能(推荐)
2019/10/25 Javascript
vue全屏事件开发详解
2020/06/17 Javascript
vue webpack build资源相对路径的问题及解决方法
2020/06/04 Javascript
vue组件是如何解析及渲染的?
2021/01/13 Vue.js
布同 Python中文问题解决方法(总结了多位前人经验,初学者必看)
2011/03/13 Python
python中的函数用法入门教程
2014/09/02 Python
详解Python程序与服务器连接的WSGI接口
2015/04/29 Python
Python实现合并字典的方法
2015/07/07 Python
Python实现配置文件备份的方法
2015/07/30 Python
基于Python+QT的gui程序开发实现
2020/07/03 Python
国际旅客访问北美最大的汽车租赁提供商:Alamo Rent A Car
2018/06/13 全球购物
高中毕业的自我鉴定
2013/12/09 职场文书
本科生的职业生涯规划范文
2014/01/09 职场文书
创意广告词
2014/03/17 职场文书
说明书怎么写
2014/05/06 职场文书
好媳妇事迹材料
2014/12/24 职场文书
大学三好学生主要事迹范文
2015/11/03 职场文书
如何书写授权委托书?
2019/06/25 职场文书
Python实战之大鱼吃小鱼游戏的实现
2022/04/01 Python