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

企鹅博客
企鹅博客
企鹅博客
25193
文章
0
评论
2020年8月31日02:20:20 评论 26 views

问题是怎么个情况?

  网页中的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 的应用如何组织代码?

继续阅读
企鹅博客
  • 本文由 发表于 2020年8月31日02:20:20
  • 转载请务必保留本文链接:https://www.qieseo.com/423463.html
使用js提交表单form js教程

使用js提交表单form

首先我们先用html创建一个表单 Name: Email: <--一般情况下,这里是使用submit--> 在这个表单中,我们没用使用submit,我们准备使用js来提交这个表单。首先介绍...
js下载以及修改文件名的实例教程 js教程

js下载以及修改文件名的实例教程

这篇文章主要为大家详细介绍了js下载文件并修改文件名的代码,具有一定的参考价值,感兴趣的小伙伴们可以参考一下 用js下载文件,使用<a>标签,添加download属性即可。 var a =...
匿名

发表评论

匿名网友 填写信息

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: