前后端分离 和 MVC / MVVM

前后端分离

• 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