前后台分离的演变史

落日映苍穹つ 2021-07-24 14:50 458阅读 0赞

**目录**

一 后端为主的MVC时代

二 基于AJAX带来了SPA时代

三 前端为主的MV\*时代（大前端时代）

四 NodeJS带来的前端全栈时代

五 总结

--------------------

# 一 后端为主的MVC时代 #

为了降低开发的复杂度，以后端为出发点，比如：Struts、SpringMVC等框架，就是后端的MVC时代。

SpringMVC的架构图

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NoZW5ncWl1bWluZw_size_16_color_FFFFFF_t_70][]

优点：

MVC是一个非常好的协作模式，能够有效降低代码的耦合度，从架构上能够让开发者明白代码应该写在哪里。为了让View更纯粹，还可以使用Thymeleaf、Freemaker等模板引擎，是模板无法写入Java代码，让前后端分工更加清晰。

缺点：

*  前端开发重度依赖开发环境，开发效率低，这种架构下，前后端协助有两种模式：

第一种是前端写DEMO，写好后，让后端套模板。

第二种是前端负责浏览器端的所有开发和服务器端的View层模块开发。

*  前后端职责纠缠不清。
 *  对前端发挥局限。

2005年以前，包括早期的JSP和PHP，可以称为Web1.0时代。如果是你一名Java初学者，请不要把一些陈旧的技术太当回事，比如JSP，因为时代在变，技术在变、什么都在变，唯一不变的就是变化本身。

# 二 基于AJAX带来了SPA时代 #

时间回到2005年AJAX（Asynchronous JavaScript And XML，异步JavaScript和XML，老技术新用法）被正式提出并开始使用CDN作为静态资源存储，于是出现了JavaScript王者归来的SPA（Single Page Application）单页面应用时代。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NoZW5ncWl1bWluZw_size_16_color_FFFFFF_t_70 1][]

优点

前后端的分工非常清晰，前后端的关键协作点是AJAX接口，这个时代开始出现了前端的分层架构。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NoZW5ncWl1bWluZw_size_16_color_FFFFFF_t_70 2][]

缺点

*  前后端接口约定成为一件痛苦的事情。
 *  前端开发的复杂度增加。

# 三 前端为主的MV\*时代（大前端时代） #

此处的MV\*模式如下：

MVC（同步通信为主）：Model、View、Controller

MVP（异步通信为主）：Model、View、Presenter

MVVM（异步通信为主）：Model、View、ViewModel

这些框架总的原则是先按类型分层，比如Template、Controller、Models，然后在层内切分。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NoZW5ncWl1bWluZw_size_16_color_FFFFFF_t_70 3][]

优点：

*  前后端职责清晰
 *  前后开发的复杂度可控
 *  部署相对独立

# 四 NodeJS带来的前端全栈时代 #

# 五 总结 #

模式也好，技术也罢，没有好坏优势之分，只有适合不适合，前后分离的开发思想主要是基于Soc（关注分离原则），上面种种模式，都是让前后端职责更清晰，分工更合理高效。

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NoZW5ncWl1bWluZw_size_16_color_FFFFFF_t_70]: /images/20210724/22a63041b9db48a39eeeea740306fd72.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NoZW5ncWl1bWluZw_size_16_color_FFFFFF_t_70 1]: /images/20210724/8ef46f6580ff49ab9142da800ab1897c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NoZW5ncWl1bWluZw_size_16_color_FFFFFF_t_70 2]: /images/20210724/121098fbd54e4f67b33df424b9be128f.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NoZW5ncWl1bWluZw_size_16_color_FFFFFF_t_70 3]: /images/20210724/dc541993fd394179bd108e757859450d.png