web前后端分离的意义( 二 )


由于我主要从事企业级后台应用的前端开发工作 , 个人认为对于后台应用的开发来说 , 前后端分离带来的利是远大于弊的 。
大多数后台应用我们都可以做成SPA应用(单页应用) , 而单页应用最主要的特点就是局部刷新 , 这通过前端控制路由调用AJAX , 后台提供接口便可以实现 , 而且这样的方式用户体验更加友好 , 网页加载更加快速 , 开发和维护成本也降低了不少 , 效率明显提升 。
同样的 , 在展示类网站和移动APP页面中前后端分离也同样试用 。前后端不分离的情况下 , 服务端要单独针对Web端做处理 , 返回完整HTML , 这样势必增加服务端的复杂度 , 可维护性差 , 而web端需要加载完整的HTML , 一定程度上影响网页性能 , 这对于移动端性能为王的地方非常的不友好 。
随着前端技术的发展和迭代 , 前端MVC框架应运而生 , 利用目前主流的前端框架 , 如React、Vue、等我们可以轻松的构建起一个无需服务器端渲染就可以展示的网站 , 同时这类框架都提供了前端路由功能 , 后台可以不再控制路由的跳转 , 将原本属于前端的业务逻辑全部丢给前端 , 这样前后端分离可以说是最为彻底 。下面是一段前端控制路由的代码:
'use strict'export default function (router) {router.map({'/': {component: function (resolve) {require(['./PC.vue'], resolve)}},'/m/:params': {component: function (resolve) {require(['./Mobile.vue'], resolve)}},'/p': {component: function (resolve) {require(['./PC.vue'], resolve)},subRoutes: {'/process/:username': {component: function (resolve) {require(['./components/Process.vue'], resolve)}}}}})}
前后端分离的实现对技术人员尤其是前端人员的要求会上升一个层次 , 前端的工作不只是切页面写模板或是处理一些简单的js逻辑 , 前端需要处理服务器返回的各种数据格式 , 还需要掌握一系列的数据处理逻辑、MVC思想和各种主流框架 。
优势与意义
对于前后端分离的意义我们也可以看做是前端渲染的意义 , 我主要总结了下面四点:
1.彻底解放前端
前端不再需要向后台提供模板或是后台在前端html中嵌入后台代码 , 如:
{% for p in p_list %}{% endfor %}
这是前后端耦合的 , 可读性差 。

上面是前端渲染的一段代码 , 前端通过AJAX调用后台接口 , 数据逻辑放在前端 , 由前端维护 。
2.提高工作效率 , 分工更加明确
前后端分离的工作流程可以使前端只关注前端的事 , 后台只关心后台的活 , 两者开发可以同时进行 , 在后台还没有时间提供接口的时候 , 前端可以先将数据写死或者调用本地的json文件即可 , 页面的增加和路由的修改也不必再去麻烦后台 , 开发更加灵活 。
3.局部性能提升
通过前端路由的配置 , 我们可以实现页面的按需加载 , 无需一开始加载首页便加载网站的所有的资源 , 服务器也不再需要解析前端页面 , 在页面交互及用户体验上有所提升 。