前后端分离与SPA的理解

前后端分离

一些概念理解

• 前端：在浏览器端运行的内容为前端。通常是用HTML+CSS+JS来实现的，如APP、小程序、H5等。
• 后端：在服务器端运行的内容为后端。如Java、C、Python、PHP等
• 静态页面：网页中没有程序代码，仅HTML。一般静态页面一旦生成，内容就不会被改变。
• 动态页面：网页文件除了HTML还包括一些程序代码使浏览器可以与服务器交互，随用户交互的不同请求动态的生成网页内容。
• 网页的静态化：将动态数据都提前生成为静态的html页面，避免从数据库取数的时间。
• DOM：文档对象模型（Document Object Model），一种将HTML/XML文档组织成对象模型（DOM树）的建模过程。
• 虚拟DOM：DOM树结构在内存里的映射

前后端不分离架构

传统的不分离架构的设计大致为：

1. 浏览器发出请求。
2. 服务器收到请求，从数据库取出数据后，生成渲染整个页面发送给浏览器。
3. 浏览器将页面展示给用户。
4. 以上步骤循环进行。

此种方式缺点是不但无法将前后端开发人员的职能分开（或要求开发人员掌握全栈），且在技术层面，每一次请求，要发送的内容数量很大，包括整个HTML、CSS以及JavaScript。

优点是服务器可以缓存整个页面，页面静态化或访问时可以不用再次访问数据。

若需要提升性能，要么提升服务器响应时间，要么压缩传输的内容。相比之下，压缩传输的内容的优化更有效。

Ajax

不分离架构需传输的内容太多，是否可以只传输变化的内容。因此引出了Ajax。

Ajax只传输数据，不传输整个网页。此时处于一种半分离的状态。设计大概为：

1. 浏览器发出请求。
2. HTML中的JS代码以Ajax方式向后台接口请求数据。
3. 后台接口返回JSON数据
4. 页面解析Json数据，通过DOM渲染页面展示给用户。

此种方式前端不会嵌入过多后台代码，前端专注自己的开发，不依赖后段。

缺点是JS会出现大量冗余。若JSON数据量大，渲染仍然会花费很长时间。若业务复杂，一个页面需要发起多次http请求才能渲染完整个页面。

前后端分离架构

由此产生前后端分离架构，前端只负责view和controller层，后段只负责model层、业务处理和数据持久化。前后端只通过JSON交流。

1. 浏览器发出请求。
2. Web服务器解析请求，经过转换，发送给各个相关的后端服务器。
3. 后端服务器返回处理过的业务数据。
4. Web服务器将返回的业务数据填入HTML模版发送给浏览器。
5. 浏览器展示页面。

前后端人员约定好接口后，就可以各自开发测试。前端不用关心业务处理，后端也不用关心前端界面。代码管理、服务部署也可以分别管理。

SPA

SPA（Single Page Web Applications）单页应用，是实践前后端分离架构最好的方案。它是一种只需要将单个页面加载到浏览器中的Web应用程序。

工作时，在Web页面初始化时，就加载完相应的HTML、CSS、JS内容，以后不会因用户的操作而进行页面的重新加载或跳转。当用户交互时，只通过Javascript动态变换HTML的内容，即进行部分内容的动态切换和替换。

优点：用户体验快，避免不必要的跳转和页面的重复渲染，加快了对数据的刷新，对服务器压力小。且共用一套后端代码即可同时应用于Web界面、手机、平板等多种客户端。

缺点：SEO难度较高，页面的前进后退管理复杂，且初次加载时可能耗时会较长。

核心逻辑

动态切换视图

• 通过JavaScript的$().replacewith()等方法实现切换。

• 通过URL路由机制，从URL路由中的hashtag获取信息，再通过window.location.hash.slice()方法实现页面内容切换

数据获取

1. 通过ajax获取数据
2. 载入前占位提示。由于从服务器端获取数据需要时间，则设置一个占位符，如loading样式、文字提示，表示数据正在载入，请等待。
3. 异步操作(取数据渲染页面)：await callback promise

模版替换

1. JSON数据转换：JSON是字符串，需要将它转换为DataObject使用，jQuery会自动解析，其他的库需要自己解析
2. 模版替换：数据转换后就发给模版，将对应内容进行替换，得到HTML

双向绑定和动态渲染

服务器端渲染：一次请求渲染一次，新的数据变更在新的请求后渲染。

前端SPA渲染：用户修改数据，相应的数据要同步修改，故需要用到事件机制通知。修改数据后触发事件机制，事件绑定的函数检查修改的数据，重新通过模版渲染页面，填回DOM对应的地方，即做到自动更新。

问题：实现时，每次修改可能会渲染整个页面，效率十分低。

解决：只渲染修改的部分。

虚拟DOM

调用虚拟DOM实现动态渲染修改的内容。

每次修改完内容，按新内容在内存里构建一个新的虚拟DOM树， 与旧的DOM树比较，检查节点变动情况，再到真实的DOM树中，修改对应的节点，完成渲染更新。

组件化和重用

支持自定义标签，在重用时只需要关注内容，不需要关心具体结构。若需要变动，只需要调整自定义标签的模版，那整个页面使用的自定义标签都会自动更新。