菜单

402.com谈谈前后端的分工协作

2019年2月21日 - 计算机教程

谈谈前后端的分工协作

2015/05/15 · HTML5 · 1
评论
·
Web开发

原文出处:
小胡子哥的博客(@Barret李靖)   

前后端分工协作是一个老生常谈的大话题,很多公司都在尝试用工程化的方式去提升前后端之间交流的效率,降低沟通成本,并且也开发了大量的工具。但是几乎没有一种方式是令双方都很满意的。事实上,也不可能让所有人都满意。根本原因还是前后端之间的交集不够大,交流的核心往往只限于接口及接口往外扩散的一部分。这也是为什么很多公司在招聘的时候希望前端人员熟练掌握一门后台语言,后端同学了解前端的相关知识。

题目1: ajax 是什么?有什么作用?

ajax(Asynchronous JavaScript and XML
异步的JavaScript与XML技术),他利用HTML.CSS.Javascript.XML以及最最最重要的XMLHttpResponse接口向后端发送http请求实现不刷新页面的情况下更新部分页面内容.
步骤:
1.构建ajax, xhr = new XMLHttpResponse
2.设置发送方式.接口名字,参数.
xhr.open(‘get’,’/loadMore?index=’+pageIndex+’length=5′,true)
3.设置header,文件格式等参数
4.发送HTTP请求,xhr.send()
5.接受数据,对数据进行操作
6.更新页面相关内容
作用:不刷新页面的情况下,更新部分页面内容,不耽误用户其他操作,提升用户体验.

一、开发流程

前端切完图,处理好接口信息,接着就是把静态demo交给后台去拼接,这是一般的流程。这种流程存在很多的缺陷。

当然,存在的问题远不止上面枚举的这些,这种传统的方式实在是不酷(Kimi
附身^_^)。还有一种开发流程,SPA(single page
application),前后端职责相当清晰,后端给我接口,我全部用 ajax
异步请求,这种方式,在现代浏览器中可以使用 PJAX 稍微提高体验,Facebook
早在三四年前对这种 SPA
的模式提出了一套解决方案,quickling+bigpipe,解决了 SEO
以及数据吐出过慢的问题。他的缺点也是十分明显的:

问题多的已经是无力吐槽了,当然他依然有自己的优势,咱们也不能一票否决。

针对上面看到的问题,现在也有一些团队在尝试前后端之间加一个中间层(比如淘宝UED的
MidWay )。这个中间层由前端来控制。

JavaScript

+—————-+ | F2E | +—↑——–↑—+ | | +—↓——–↓—+ |
Middle | +—↑——–↑—+ | | +—↓——–↓—+ | R2E |
+—————-+

1
2
3
4
5
6
7
8
9
10
11
    +—————-+
    |       F2E      |
    +—↑——–↑—+
        |        |
    +—↓——–↓—+
    |     Middle     |
    +—↑——–↑—+
        |        |  
    +—↓——–↓—+
    |       R2E      |
    +—————-+

中间层的作用就是为了更好的控制数据的输出,如果用MVC模型去分析这个接口,R2E(后端)只负责
M(数据) 这部分,Middle(中间层)处理数据的呈现(包括 V 和
C)。淘宝UED有很多类似的文章,这里不赘述。

题目2: 前后端开发联调需要注意哪些事情?后端接口完成前如何 mock 数据?

注意事项:大的方面我需要什么,我给你什么.具体来讲:
1.约定后端发回的数据格式.数组.JSON.文本.二进制文件
2.约定请求方式:post或者get
3.约定接口名字/路径
4.约定发送的参数
mock数据
要完整运行前端代码,通常并不需要完整的后端环境,我们只要在mock
server中实现以下几点就行了:

![](https://upload-images.jianshu.io/upload_images/5927991-9f59e15fb04d32f8.png)

image.png



测试环境

参考

相关文章

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图