详解MVC和MVVM

响应式网页设计

响应式网页设计(Responsive Web design)1简称 RWD，是一种网页设计的技术做法，该设计可使网站在多种浏览 设备(从台式机显示器到移动电话或其他移动产品设备)上获得体验类似的阅读与导航功能，同 时减少用户缩放、平移与滚动等操作。

这就要求网页设计为SPA(Single-Page Application，单页应用)。

尽管说响应式网页设 计的核心理念是从交互以及样式上体现的，但对于整个跨平台的兼容性，拥有良好的分层解耦及 响应速度已经成为应用架构的必要条件。

MVC/MVVM 简称 MC* 模式，其中 MVVM 是从 MVC 演进而来的。

MVC

1. MVC介绍

MVC是一种架构模式，它通过关注数据界面分离，来鼓励改进应用程序结构

MVC 强制将业务数据(Model)与用户界面(View)隔离，用控制器(Controller)管理逻 辑和用户输入

2. MVC结构

（1）Model

• Model 负责保存数据或校验数据，和后端交互同步数据
• 不涉及用户界面，代表应用程序需要的数据，当Model改变时，会通知它的观察者作出反应
• Model主要和业务数据有关，与应用内交互状态无关

（2）View

• View是Model的可视化表示，表示当前状态的视图
• 前端View负责构建和维护Dom元素
• 用户可以与 View 交互，包括读取和编辑 Model，在 Model 中获取或设置属性值。
• 在前端 MVC 体系中，View 对应的是 JavaScript 模板语言，它用于将 View 定义为包含模板 变量的标记，使用变量语法，接受 JSON 数据格式的数据

（3）Controller

• 负责连接 View 和 Model，Model 的任何改变会应用到 View 中，View 的操作会通过 Controller应用到 Model 中。
• Controller 管理了应用程序中 Model 和 View 之间的逻辑和协调。

MVVM

MVVM的变化在于 VM(ViewModel)代替了 C(Controller)。其关键“改 进”是数据绑定(DataBinding)，也就是说，View 的数据状态发生变化可以直接影响 VM，反之 亦然。这也可以说是 AngularJS 的核心特色之一。

1. MVVM结构

MVC存在的问题

1. 项目庞大，数据流动混乱

以 Backbone 为例，由于 Model 对外直接暴露了 set 和 on 方法，导致 View 层可以随意改变 Model 中的值，也可以随意监听 Model 中值的变化。这样的设定最终会导致一个庞大的 Model 中 某个字段变化后，可能触发无数个 change 事件。在这些 change 事件的回调中，可能还有新的 set方法调用，导致更多的 change 事件触发。

2. Model可以改变另一个Model的值

一个 Model 还能改变另一个 Model 的值，整个数据流动的方式变得更加混乱， 不可捉摸。

3.业务逻辑复杂导致定位困难

对于增、删、改来说，MVC 都需要编写 View 渲染处理函数。当业务逻辑变复杂后，可能会 有很多 Model 需要做增、删、改。与之对应的是，我们需要精心构建 View 渲染处理函数。尽管 局部更新模式是高性能的关键所在，但这点会导致更新逻辑复杂，并需要编写大量的局部渲染函 数，也会导致问题定位困难。页面的当前状态是由数据和局部更新函数来确定的

4. 解决方案

如果渲染函数只有一个，统一放在 Controller 中，每次更新重渲染页面，这样的话，任何数 据的更新都只用调用重渲染就行，并且数据和当前页面的状态是唯一确定的。这样又要保证数据 的流动清晰，不能出现交叉分路的情况。

但是重渲染又会导致性能问题和造成不好的用户体验，且重渲染和局部渲染各有好坏，所以后续诞生了Flux，redux