前端|前后端分离模式的思考(二)

简介: 前端|前后端分离模式的思考(二)

一 、引入

上次谈完了前后端分离的模式,接下来分析总结一下非前后端分离模式的缺点。

1.开发效率低。

图1.1 步骤展示

通过上面的图,可以看的出每一个环节都依赖进行,可能会延长了开发周期。

2.整个团队的协作耦合度高。

环节层层依赖。如果某个环境进行了修改,其他的环境就会受到影响。

3.团队容易甩锅。

当项目出现问题之后,团队成员很容易将一些责任推到其他的环节上面。

4.难以处理越来越复杂的业务。

随着目前的业务发展趋势,业务也越来越复杂。例如,一些页面交互效果,数据处理。传统的模式很难支持这样的业务场景。通过前后端分离,前端负责对应的交互业务,后端负责数据的处理。

5.使得代码的耦合度更高。

这里可以从一种软件设计模式来分析。那就是MVC模式,模型层(M)负责数据库层面的操作,视图层(V)负责数据渲染,控制层(C)负责处理逻辑。这是一种很不错的软件设计模式,但在不做到严格规范的情况下,仍有很多的程序开发者,在控制层C输出一些视图层V的业务代码,这样的代码耦合度更高,同时也难以维护。

 

二、前后端分离有什么好处

综上了解了非前后端分离的弊端,但也不难分析出前后端分离的一些好处。
1.提高开发效率。
2.降低了软件设计的耦合度。不管是前端还是后端,都可以针对不同的端,实现一些工程化的东西。
3.提高了处理复杂业务的能力。后端可以只专注后端业务,前端可以只专注于前端的业务。

三、前后端分离有哪些缺点
1.团队沟通成本。
每个环节都需要保证沟通、协商好,否则很容易导致团队混乱,因此前后端分离模式对团队协调也是有着较高的要求。
2.不利于搜索引擎抓取。
因为搜索引擎看的是html源码,不能执行js,也就无法获取js动态从ajax抓的内容。
3.项目维护成本。
前后端分离,后端的代码和前端的代码都需要单独部署。在开发中也需要针对开发需求部署不同的环境。
4.增加繁杂的配置。
前后端分离,需要设置跨域一系列的其他操作。同时也会针对前后端的一些监控处理,都将会增加工作量。

四、前后端分离涉及到开发的哪些环节
所谓的前后端并不是单纯的指前端工程师负责的内容和后端工程师负责的内容之间可以独立进行。总体归纳如下几点:
1.产品设计
2.设计
3.前端开发
4.后端开发
5.测试
6.部署
这几个环节,其实很多都可以并行运行。
(1)例如,在产品设计好之后,能够具体确定哪些功能,前后端工程师可以协商接口、接口参数等需要对接的内容,同时设计师可以负责设计。
(2)当定义好了项目的一些规范后,前后端的开发人员在开发的过程中,可能会需要一些模拟数据,这时候后端开发人员并未开发出对应的接口,那怎么办呢?就可以使用mock模拟一些数据,供前端人员调用。后端人员开发完成之后,前端直接调用真实数据。
(3)在前后端开发过程中,测试人员可以针对前端人员开发的功能进行前端调试。测试人员也可以针对后端开发人员的接口进行数据调试。

目录
相关文章
|
6月前
|
设计模式 存储 缓存
精进前端开发:深入探讨前端设计模式
精进前端开发:深入探讨前端设计模式
64 0
|
6月前
|
前端开发 搜索推荐 UED
解密前端路由: hash模式vs.history模式
解密前端路由: hash模式vs.history模式
|
6月前
|
移动开发 前端开发 JavaScript
VSCode设置类似Webstorm那样可以用本地局域网IP地址访问自己开发的测试项目,vs code 前端如何以服务器模式打开?
VSCode设置类似Webstorm那样可以用本地局域网IP地址访问自己开发的测试项目,vs code 前端如何以服务器模式打开?
VSCode设置类似Webstorm那样可以用本地局域网IP地址访问自己开发的测试项目,vs code 前端如何以服务器模式打开?
|
15天前
|
设计模式 前端开发
前端设计模式
10月更文挑战第5天
14 3
|
7天前
|
前端开发 JavaScript API
前端的全栈之路Meteor篇(完):关于前后端分离及与各框架的对比,浅析分离之下的潜在耦合
本文探讨了Meteor.js这一全栈JavaScript框架的特点与优势,特别是在前后端分离架构中的应用。Meteor通过共享数据结构和简化全栈开发流程,实现了前后端的紧密协作。文章还对比了其他全栈框架,如Next.js、Nuxt.js等,分析了各自的优势与适用场景,最后讨论了通过定义文档归属者和用户专有数据集简化后端构建及端云数据同步的方法。
|
14天前
|
JavaScript 前端开发 应用服务中间件
Vue开发中,在实现单页面应用(SPA)前端路由时的hash模式和history模式的区别及详细介绍
Vue开发中,在实现单页面应用(SPA)前端路由时的hash模式和history模式的区别及详细介绍
19 0
|
2月前
|
前端开发
前端web入门第四天】03 显示模式+综合案例热词与banner效果
本文档介绍了HTML中标签的三种显示模式:块级元素、行内元素与行内块元素,并详细解释了各自的特性和应用场景。块级元素独占一行,宽度默认为父级100%,可设置宽高;行内元素在同一行显示,尺寸由内容决定,设置宽高无效;行内块元素在同一行显示,尺寸由内容决定,可设置宽高。此外,还提供了两个综合案例,包括热词展示和banner效果实现,帮助读者更好地理解和应用这些显示模式。
|
3月前
|
设计模式 JavaScript 前端开发
Vue.js 组件设计模式:在前端热潮中找到归属感,打造可复用组件库,开启高效开发之旅!
【8月更文挑战第22天】Vue.js 以其高效构建单页应用著称,更可通过精良的组件设计打造可复用组件库。组件应职责单一、边界清晰,如一个显示文本并触发事件的按钮组件,通过 props 传递标签文本,利用插槽增强灵活性,允许父组件注入动态内容。结合 CSS 预处理器管理和封装独立模块,配以详尽文档,有效提升开发效率及代码可维护性。合理设计模式下,组件库既灵活又强大,持续实践可优化项目工作流。
48 1
|
4月前
|
前端开发 JavaScript 开发者
条件判断的模式问题之为什么不建议在前端日常业务开发中使用OOP的责任链模式实践
条件判断的模式问题之为什么不建议在前端日常业务开发中使用OOP的责任链模式实践
|
5月前
|
缓存 前端开发 安全
探索现代Web开发中的前端架构模式
【6月更文挑战第23天】随着互联网技术的飞速发展,前端架构在Web开发中扮演着越来越重要的角色。本文将深入探讨现代Web开发中使用的几种主流前端架构模式,包括单页面应用(SPA)、微前端架构和JAMStack等,并分析它们的优势与应用场景。通过实例演示,我们将看到如何根据项目需求选择合适的前端架构,以及如何利用这些架构模式提升开发效率和应用性能。