励志当一名架构师

谁借莪１个温暖的怀抱￠ 2023-01-21 05:25 41阅读 0赞

## 前言 ##

本篇文章主要总结项目中常见的架构，从前后端的各种耦合到前后端的分离为主线，其他技术作为副线详细总结

## 未分离时代(各种耦合) ##

早期主要使用的是 MVC 架构

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNzYzMzQ0_size_16_color_FFFFFF_t_70]

大致就是所有的请求都被发送给作为控制器的Servlet，它接受请求，并根据请求信息将它们分发给适当的JSP来响应

大致开发流程，值得一提的是，现在仍然有一些小公司在用这套开发流程  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNzYzMzQ0_size_16_color_FFFFFF_t_70 1]

MVC 主要缺点

*  前端无法单独测试
 *  前端不可避免会遇到后台代码，增加前端开发人员的成本
 *  JSP第一次运行的时候比较缓慢，因为里头包含一个将JSP翻译为Servlet的步骤

## 半分离时代 ##

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

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_0_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNzYzMzQ0_size_16_color_FFFFFF_t_70]

请求步骤如下

1.  浏览器请求，CDN 返回 HTML 页面
2.  HTML 中的 JS 代码以 ajax 方式，请求后台的 Restuful 接口
3.  接口返回 json 数据，页面解析 json 数据，通过 dom 操作渲染页面

为什么说是半分离？

在多页面的情况下，前端没有掌握 colltroller 层，前端需要和后端达成一致，这个页面是同步输出还是异步 json 渲染

这种半分离模式的优点对于 MVC 主要体现在前端不会嵌入任何的后端代码，前端就是专注于 HTML ，css ,js 的开发， 而且还能够自己模拟 json 数据来渲染页面，发现bug 也可以迅速定位出问题来

## 分离时代 ##

在前后端彻底分离这一时期，前端的范围被扩展，controller层也被认为属于前端的一部分。在这一时期：

*  前端：负责View和Controller层。
 *  后端：只负责Model层，业务/数据处理等。

可是服务端人员对前端HTML结构不熟悉，前端也不懂后台代码呀，controller层如何实现呢？这就是node.js的妙用了，node.js适合运用在高并发、I/O密集、少量业务逻辑的场景

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_0_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNzYzMzQ0_size_16_color_FFFFFF_t_70 1]

可以就把Nodejs当成跟前端交互的api。总得来说，NodeJs的作用在MVC中相当于C（控制器）。Nodejs路由的实现逻辑是把前端静态页面代码当成字符串发送到客户端（例如浏览器），简单理解可以理解为路由是提供给客户端的一组api接口，只不过返回的数据是页面代码的字符串而已。

用 Node.js 来作为桥梁架接服务器端API输出的JSON， 后端处于性能的原因，提供的接口所返回的数据格式也许不太适合前端直接使用，前端所需的排序功能、筛选功能，以及到了视图层的页面展现，也许都需要对接口所提供的数据进行二次处理。这些处理虽可以放在前端来进行，但也许数据量一大便会浪费浏览器性能。因而现今，增加Node中间层便是一种良好的解决方案。

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_0_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNzYzMzQ0_size_16_color_FFFFFF_t_70 2]

数据流动步骤

1.  浏览器请求服务器端的 NodeJS
2.  NodeJS 再次发起HTTP 请求 jsp
3.  JSP 依然原样 api 输出 json 给 NodeJS
4.  NodeJS 收到 json 后再渲染出 HTML 页面
5.  NodeJS 直接将 HTML 页面 flush 到浏览器

这样浏览器得到的就是 HTML 页面了，而不用再发 ajax 去请求服务器了

### 增加 Node.js 作为中间层，具体有哪些好处呢？ ###

#### (1) 适配性提示 ####

我们其实在开发过程中，经常会给PC端、mobile、app端各自研发一套前端。其实对于这三端来说， 大部分端业务逻辑是一样的，唯一的区别就是**交互展现逻辑不同，如果controller层在后端手里，后端为了这些不同端页面展示逻辑，自己维护这些controller，模版无法重用，徒增和前端沟通成本**。 如果增加了node.js层，此时架构图如下：

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_0_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNzYzMzQ0_size_16_color_FFFFFF_t_70 3]

在该结构下，每种前端的界面展示逻辑由 node 层自己维护，如果产品经理中途想要改动界面什么的，可以由前端自己专职维护，后端无需操心。前后端各司其职，后端专注自己的业务逻辑开发，前端专注产品效果开发。

#### (2) 响应速度提升 ####

如果后端给前端响应的数据太过简单，速度其实没有什么大影响，但是当数据量太大的情况下，再加上对数据做分组逻辑运算会有明显的卡顿效果。而中间 node 层其实可以把很多的代码放入 node 层做处理，可以替后端分担一些简单的逻辑，又可以用模板引擎自己掌握前台的输出，使得灵活性和响应速度得到提升

举个例子，即使做了页面静态化之后，前端依然还是有不少需要实时从后端获取的信息，这些信息都在不同的业务系统中，所以需要前端发送5、6个异步请求来。有了NodeJs之后，前端可以在NodeJs中去代理这5个异步请求。还能很容易的做bigpipe，这块的优化能让整个渲染效率提升很多。在PC上你觉得发5、6个异步请求也没什么，但是在无线端，在客户手机上建立一个http请求开销很大。有了这个优化，性能一下提升好几倍。

#### (3)性能得到提升 ####

大家应该都知道单一职责原则。从该角度来看，我们请求一个页面可能要响应很多个后端接口，请求变多自然速度就变慢了，这种现象在mobile端更加严重。采用node作为中间层，将页面所需要的多个后端数据，直接在内网阶段就拼装好，再统一返回给前端，会得到更好的性能。

#### (4)异步与模板统一 ####

淘宝首页就是被几十个HTML片段（每个片段一个文件）拼装成，之前PHP同步include这几十个片段，一定是串行的，Node可以异步，读文件可以并行，一旦这些片段中也包含业务逻辑，异步的优势就很明显了，真正做到哪个文件先渲染完就先输出显示。前端机的文件系统越复杂，页面的组成片段越多，这种异步的提速效果就越明显。前后端模板统一在无线领域很有用，PC页面和WIFI场景下的页面适合前端渲染（后端数据Ajax到前端），2G、3G弱网络环境适合后端渲染（数据随页面吐给前端），所以同样的模板，在不同的条件下走不同的渲染渠道，模板只需一次开发。

### 增加 Node 层后的职业划分 ###

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_0_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNzYzMzQ0_size_16_color_FFFFFF_t_70 4]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNzYzMzQ0_size_16_color_FFFFFF_t_70]: /images/20221020/2706193516b44513b1523a76a9e270fd.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNzYzMzQ0_size_16_color_FFFFFF_t_70 1]: /images/20221020/35258c4afdd54937a282096b66ae5084.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_0_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNzYzMzQ0_size_16_color_FFFFFF_t_70]: /images/20221020/59a2e963e23844059fba358af95fa201.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_0_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNzYzMzQ0_size_16_color_FFFFFF_t_70 1]: /images/20221020/443f7e09afb74e789a16f10a1c5c8773.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_0_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNzYzMzQ0_size_16_color_FFFFFF_t_70 2]: /images/20221020/5bdf28ca6e234ffcadc5dd8b34bf01e8.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_0_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNzYzMzQ0_size_16_color_FFFFFF_t_70 3]: /images/20221020/a24f95498bcb4689b6c602115ef316c1.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_0_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNzYzMzQ0_size_16_color_FFFFFF_t_70 4]: /images/20221020/c3cc3f0dc64741c883c085c58cbc961b.png