12、前端知识点--MVVM模式

1、MVVM与MVC的区别是什么？

在MVC里，View是可以直接访问Model的！从而，View里会包含Model信息，不可避免的还要包括一些业务逻辑。 MVC模型关注的是Model的不变，所以，在MVC模型里，Model不依赖于View，但是 View是依赖于Model的。不仅如此，因为有一些业务逻辑在View里实现了，导致要更改View也是比较困难的，至少那些业务逻辑是无法重用的，mvc的所有通信都是单向的。而MVVM在概念上是真正将页面与数据逻辑分离的模式并且可以实现数据双向绑定。

2、什么是VM？

vm就是由View抽象出来的数据模型，需要注意的是在开发中不在在vm在写与数据不相关的其他东西，比如一些方法等。

3、MVVM和代码怎么对应的？

MVVM就是由Model、View、VM三部分组成。Model对应了将获取数据，处理数据成能够供VM使用的逻辑部分，而View对应的是数据展示，数据绑定部分，VM则是抽象的数据模型对象。

4、有哪些框架使用了MVVM模型？

使用MVVM模式的前端框架有很多，比如AngularJS、avalon、emberjs、knockoutjs、winjs、react、riverts、way、vue、regular、drop等框架

5、MVC、MVP、MVVM使用场景？

要想了解它们的使用场景，首先应该了解它们的优缺点。

MVC的优缺点：

  优点：

1、把业务逻辑全部分离到Controller中，模块化程度高。当业务逻辑变更的时候，不需要变更View和Model，只需要Controller换成另外一个Controller就行了（Swappable Controller）。

2、观察者模式可以做到多视图同时更新。

缺点：

1、Controller测试困难。因为视图同步操作是由View自己执行，而View只能在有UI的环境下运行。在没有UI环境下对Controller进行单元测试的时候，Controller业务逻辑的正确性是无法验证的：Controller更新Model的时候，无法对View的更新操作进行断言。

2、View无法组件化。View是强依赖特定的Model的，如果需要把这个View抽出来作为一个另外一个应用程序可复用的组件就困难了。因为不同程序的的Domain Model是不一样的

MVP的优缺点：

优点：

1、便于测试。Presenter对View是通过接口进行，在对Presenter进行不依赖UI环境的单元测试的时候。可以通过Mock一个View对象，这个对象只需要实现了View的接口即可。然后依赖注入到Presenter中，单元测试的时候就可以完整的测试Presenter业务逻辑的正确性。

2、View可以进行组件化。在MVP当中，View不依赖Model。这样就可以让View从特定的业务场景中脱离出来，可以说View可以做到对业务逻辑完全无知。它只需要提供一系列接口提供给上层操作。这样就可以做高度可复用的View组件。

    缺点：

1、Presenter中除了业务逻辑以外，还有大量的View->Model，Model->View的手动同步逻辑，造成Presenter比较笨重，维护起来会比较困难。

MVVM的优缺点：

  优点：

1、提高可维护性。解决了MVP大量的手动View和Model同步的问题，提供双向绑定机制。提高了代码的可维护性。

2、简化测试。因为同步逻辑是交由Binder做的，View跟着Model同时变更，所以只需要保证Model的正确性，View就正确。大大减少了对View同步更新的测试。

缺点：

1、过于简单的图形界面不适用，或说牛刀杀鸡。

2、对于大型的图形应用程序，视图状态较多，ViewModel的构建和维护的成本都会比较高。

3、数据绑定的声明是指令式地写在View的模版当中的，这些内容是没办法去打断点debug的。

从上面的优缺点可以看出，从MVC->MVP->MVVM，就像一个打怪升级的过程。后者解决了前者遗留的问题，把前者的缺点优化成了优点，根据实际的项目选择实合适的框架。

6、Angular、avalon、Vue怎么选择使用？

Angular包含MV*中的所有部分，有自己的一套规则，所以适合PC，但是出来的代码结构会比较清晰；avalon属于轻量级的，并且对老的浏览器支持程度较高，最低支持到IE6，所以适合兼容老刘浏览器的项目；Vue主打轻量级，仅作为MV*中的视图部分使用，优点轻量级，易学易用，缺点是大项目的时候还要配合其他框架或者库来使用，比较麻烦。

7、发展由来。

MVVM（Model-View-ViewModel）框架的由来便是MVP（Model-View-Presenter）模式与WPF结合的应用方式时发展演变过来的一种新型架构框架。它立足于原有MVP框架并且把WPF的新特性糅合进去，以应对客户日益复杂的需求变化。

8、如何实现双向数据绑定。

目前实现数据双向绑定主要有一下三种方式：

1、手动绑定

比较老的实现方式，使用观察者编程模式，主要思路是通过在数据对象上定义get和set方法等，调用时手动调用get或set数据，改变数据后触发UI层的渲染操作；以视图驱动数据变化的场景主要应用与input、select、textarea等元素，当UI层变化时，通过监听dom的change，keypress，keyup等事件来触发事件改变数据层的数据。整个过程均通过函数调用完成。

2、脏检测机制

以典型的mvvm框架angularjs为代表，angular通过检查脏数据来进行UI层的操作更新。关于angular的脏检测，有几点需要了解些：

脏检测机制并不是使用定时检测。
脏检测的时机是在数据发生变化时进行。
angular对常用的dom事件，xhr事件等做了封装， 在里面触发进入angular的digest流程。
在digest流程里面， 会从rootscope开始遍历， 检查所有的watcher。 （关于angular的具体设计可以看其他文档，这里只讨论数据绑定），那我们看下脏检测该如何去做：主要是通过设置的数据来需找与该数据相关的所有元素，然后再比较数据变化，如果变化则进行指令操作。

3、前端数据劫持（Hijacking）

基本思路是使用Object.defineProperty对数据对象做属性get和set的监听，当有数据读取和赋值操作时则调用节点的指令，这样使用最通用的=等号赋值就可以了。

9、MVC-MVVM的转变。

软件中最核心的是数据，围绕着数据的产生、修改等变化，出现了业务逻辑。围绕着数据的显示，出现了不同的界面技术。没有很好设计的代码，常常就会出现数据层(持久层)和业务逻辑层还有界面代码耦合的情况。

因为mvc没有做到view和model的完全分离，而mvvm做到了，这就驱使从mvc向mvvm转变。

10、MVVM采用了哪些设计模式。

观察者模式。