前后端分离
- web 1.0
页面相对比较简单,前端只负责写静态页面和一些简单的JS,大部分工作都由后端完成(JSP 前后端耦合的典型)
前端没有工程化、模块化、可复用化思维
代码难维护
web 1.0
- web 2.0
通过 Ajax 与后端进行数据交互,减少了服务端的负载和流量消耗,提升了用户体验
有了真正意义上的前端工程师,jQuery 也是在这个时候发展壮大的
这个期间,前端有了 MVC 设计模式思想
web 2.0
web 3.0
页面、需求复杂后,降低应用结构复杂度、需要提高开发效率,通过解耦(高内聚、低耦合)进行前后端分离。
前端使用 JS 技术,负责表现和用户交互。服务器端使用 Java、PHP 技术,负责核心业务逻辑和数据持久化。
因为 Node.js 有了npm Webpack、Less、Sass、Gulp、Bower 以及这些工具的插件,使得前端有了工程化思想优点
前后端职责分明
PC、APP、平板等多端适应
单页面模式(SPA)
开发效率提高
低耦合
前端项目独立可部署
相对于开发人员,维护成本降低
精准的单元测试
精准的 bug 定位和修复缺点
不利于 SEO(搜索引擎优化)
出现跨域问题总结
前后端分离不是技术问题,而是工程化考量
和项目管理
问题,Vue.js、React.js都是具体的实现方式
MV*
- MV* 的目的是把应用程序的数据、业务逻辑和界面这三块解耦,分离关注点,不仅利于团队协作和测试,更利于维护和管理。业务逻辑不再关心底层数据的读写,而这些数据又以对象的形式呈现给业务逻辑层
MVC 单向数据绑定
- 与后台数据交互(模型 Model)、视图展示(视图 View)、业务逻辑(控制器 Controller)。
- MVC 通信是单向的,View 传送指令到 Controller,Controller 完成业务逻辑后,要求 Model 改变状态, Model 将新的数据发送到 View,用户得到反馈。
- MVC 早期出现在服务端,如 Spring MVC,后来前端有了 Backbone.js,MVC 的出现为解决 Model 层和 View 层耦合问题。
- 优点:分层清晰。
- 缺点:数据流向混乱、较难维护(灵活性)。
MVVM 设计模式
- 数据模型(模型 Model)、用户界面(视图 View)、业务逻辑(视图模型 ViewMode)。
- MVVM 的 核心是 ViewModel 层,它就像是一个中转站(value converter),负责转换 Model 中的数据对象来让数据变得更容易管理和使用,该层向上与视图层进行双向数据绑定,向下与 Model 层通过接口请求进行数据交互,起呈上启下作用。
- 解决 Model 层和 View 层耦合问题,减少
DOM
操作,使程序员专注于业务逻辑,在保证性能的前提下提高开发效率和可读性,实现真正的前后端分离。 - MVVM 提供了数据双向绑定。
MVVM