分布式之闲侃前后端分离架构的必要性！

　　作者：孤独烟 来源：https://mp.weixin.qq.com/s/yujpjWLLh-YpVr-tzK2rkg

　　由于近期前端抽不出资源，博主最近接手一个前端项目的代码维护工作。拿到手一看，一脸懵逼，和博主当年所学的jsp开发方式、利用ajax来请求数据的单页面开发方式完全不同。然而火坑已经跳下，只能硬着头皮啃，博主只能默默告诉自己“冲冲冲，四驱战士在行动”。

　　博主勉强算是经历了前端开发的几个时期吧。本文以一种循序渐进的方法，讲前后端分离架构的必要性。不过不得不说一点，目前前后端分离架构的文章一搜一大把，博主毕竟不是专业搞前端的，如果文章有什么理解不到位的地方，请及时指出，不胜感激。

　　正文

　　以博主的资历，没有经历过更早的时期了，一出山SpringMVC和struts2等架构已经很成熟，所以博主最早接触的开发方式就是从MVC开发方式开始的，博主将开发方式分为未分离，半分离和分离三个时期。

　　未分离时期

　　MVC，博主就不多做解释了，在早期JSP+SERVLET中的结构图如下

　　大致就是所有的请求都被发送给作为控制器的Servlet，它接受请求，并根据请求信息将它们分发给适当的JSP来响应。同时，Servlet还根据JSP的需求生成JavaBeans的实例并输出给JSP环境。JSP可以通过直接调用方法或使用UseBean的自定义标签得到JAVABeans中的数据。需要说明的是，这个View还可以采用 Velocity、Freemaker 等模板引擎。使用了这些模板引擎，可以使得开发过程中的人员分工更加明确，还能提高开发效率。那么，在这个时期，开发方式有如下两种方式一:

　　方式二:

　　先说明一下，方式二已经逐渐淘汰。主要原因有两点:

　　(1)前端在开发过程中严重依赖后端，在后端没有完成的情况下，前端根本无法干活。

　　(2)由于趋势问题，会JSP,懂velocity,freemarker的前端越来越少。

　　因此，方式二逐渐不被采用。然而，不得不说一点，方式一，其实很多小型传统软件公司至今还在使用。那么，方式一和方式二具有哪些共同的缺点呢?

　　I、前端无法单独调试

　　在项目上线后，遇到一些问题。比如样式出问题了，由于前端不具备项目开发环境，那么就有可能出现如下对话：

　　前端:"我这里没问题啊。后端，你那里正常么?"后端:"我这里不正常啊。要不你过来看一下吧?"前端:"一时我也看不出问题，我也没环境，怎么办?"后端:"你没环境，坐我这边调吧。"然后，前端就满脸不爽的在你那调代码了。更有些情商低的后端就直接在旁边开摁手机，实在是。。。。。

　　总结，因为前端无法单独调试。一方面开发效率降低。另一方面，还有可能引发公司内部人员上的矛盾。

　　II、前端不可避免会遇到后台代码

　　比如前端可能碰到如下结构的代码

　　<div><%request.setCharacterEncoding("utf-8")String name=request.getParameter("username");out.print(name);%></div>

　　身为前端，在页面里看到了后台代码，必然内心是十分不快的，这种方式耦合性太强。那么，就算你用了freemarker等模板引擎，不能写JAVA代码。那前端也不可避免的要去重新学习该模板引擎的模板语法，无谓增加了前端的学习成本。正如我们后端开发不想写前端一样，你想想如果你的后台代码里嵌入前端代码，你是什么感受?因此，这种方式十分不妥。

　　III、JSP本身所导致的一些其他问题

　　比如，JSP第一次运行的时候比较缓慢，因为里头包含一个翻译为Servlet的步骤。再比如因为同步加载的原因，在jsp中有很多内容的情况下，页面响应会很慢。

　　半分离时期

　　前后端半分离，前端负责开发页面，通过接口(Ajax)获取数据，采用dom操作对页面进行数据绑定，最终是由前端把页面渲染出来。这也就是其他博客里说的，Ajax与SPA应用(单页应用)结合的方式。其结构图如下

　　步骤如下:

　　(1)浏览器请求，cdn返回html页面

　　(2)html中的js代码以ajax方式请求后台的restful接口

　　(3)接口返回json数据，页面解析json数据，通过dom操作渲染页面

　　ps：博主早期就是用jquery的ajax请求，然后这么做的。

　　为什么说是半分离的?

　　因为不是所有页面都是单页面应用，在多页面应用的情况下，前端因为没有掌握controller层，前端需要跟后端讨论，我们这个页面是要同步输出呢，还是异步json渲染呢?因此，在这一阶段，只能算半分离。

　　这种方式的优缺点有哪些呢?

　　首先，这种方式的优点是很明显的。前端不会嵌入任何后台代码，前端专注于html、css、js的开发，不依赖于后端。自己还能够模拟json数据来渲染页面。发现bug，也能迅速定位出是谁的问题，不会出现互相推脱的现象。

　　然而，在这种架构下，还是存在明显的弊端的。最明显的有如下几点：

　　(1)js存在大量冗余，在业务复杂的情况下，页面的渲染部分的代码，非常复杂。(2)在json返回的数据比较大的情况下，渲染的十分缓慢，会出现页面卡顿的情况(3)seo非常不方便，由于搜索引擎的爬虫无法爬下js异步渲染的数据，导致这样的页面，SEO会存在一定的问题。(4)资源消耗严重，在业务复杂的情况下，一个页面可能要发起多次http请求才能将页面渲染完毕。可能有人不服，觉得pc端建立多次http请求也没啥。那你考虑过移动端么，知道移动端建立一次http请求需要消耗多少资源么?

　　正是因为如上缺点，真正的前后端分离架构诞生了

　　分离时期

（编辑：辽源站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!