MVVM、MVC框架的认识

推荐博客：
https://blog.csdn.net/jia12216/article/details/55520426

https://www.cnblogs.com/sunny_z/p/7093663.html

一、MVVM是Model-View-ViewModel的简写。它本质上就是MVC 的改进版。MVVM 就是将其中的View 的状态和行为抽象化，让我们将视图 UI 和业务逻辑分开。当然这些事 ViewModel 已经帮我们做了，它可以取出 Model 的数据同时帮忙处理 View 中由于需要展示内容而涉及的业务逻辑。微软的WPF带来了新的技术体验，如Silverlight、音频、视频、3D、动画……，这导致了软件UI层更加细节化、可定制化。同时，在技术层面，WPF也带来了 诸如Binding、Dependency Property、Routed Events、Command、DataTemplate、ControlTemplate等新特性。MVVM（Model-View-ViewModel）框架的由来便是MVP（Model-View-Presenter）模式与WPF结合的应用方式时发展演变过来的一种新型架构框架。它立足于原有MVP框架并且把WPF的新特性糅合进去，以应对客户日益复杂的需求变化。

MVVM优点编辑

MVVM模式和MVC模式一样，主要目的是分离视图（View）和模型（Model），有几大优点

1. 低耦合。视图（View）可以独立于Model变化和修改，一个ViewModel可以绑定到不同的"View"上，当View变化的时候Model可以不变，当Model变化的时候View也可以不变。

2. 可重用性。你可以把一些视图逻辑放在一个ViewModel里面，让很多view重用这段视图逻辑。

3. 独立开发。开发人员可以专注于业务逻辑和数据的开发（ViewModel），设计人员可以专注于页面设计，使用Expression Blending可以很容易设计界面并生成xaml代码。

4. 可测试。界面素来是比较难于测试的，而现在测试可以针对ViewModel来写。

MVVM设计模式的缺点 

第一点：数据绑定使得 Bug 很难被调试。你看到界面异常了，有可能是你 View 的代码有 Bug，也可能是 Model 的代码有问题。数据绑定使得一个位置的 Bug 被快速传递到别的位置，要定位原始出问题的地方就变得不那么容易了。 

第二点：一个大的模块中，model也会很大，虽然使用方便了也很容易保证了数据的一致性，当时长期持有，不释放内存，就造成了花费更多的内存。 

第三点：数据双向绑定不利于代码重用。客户端开发最常用的重用是View，但是数据双向绑定技术，让你在一个View都绑定了一个model，不同模块的model都不同。那就不能简单重用View了。

 

MVVM框架的主要应用场景

  1）针对具有复杂交互逻辑的前端应用

  2）提供基础的架构抽象

  3）通过Ajax数据持久化，保证前端用户体验

  好处就是当前后端进行一些数据交互的时候，前端可以通过Ajax请求对后端做数据持久化，不需要刷新整个页面，只需要改动DOM里需要改动的那部分数据和内容，特别是对于移动端应用场景，刷新页面的代价太昂贵，会重新加载很多资源，虽然有些资源会被缓存，但是页面的DOM、JS、CSS都会被浏览器重新解析一遍，因此，移动端页面经常会做成SPA单页应用，在这个基础上就诞生了很多MVVM框架，如Angular、React、Vue

二、MVC(Model View Controller)架构开发，它是苹果推荐的开发模式，它把页面分成三部分：数据模型，页面视图，页面控制器。一个页面被分成多个小视图，一个页面共享一个数据模型，只是这个数据模型只被控制器操作，不被各个子视图处理。这个架构看起来整洁多了，控制器的复杂度降低的很多，页面的显示单元被分配到各个视图去显示，控制器专注与数据的加工与处理，部分解放了控制器，使它的功能更集中，更紧凑，更小。数据模型，页面视图，页面控制器各个独立，各司其职。这就是重量级视图控制的特点。它看起来简单，更容易理解，所有的逻辑在视图控制器里处理。

一个页面一般分三个文件夹：页面文件夹（存放页面控制器和其子文件夹），页面文件夹下的model文件夹，页面文件夹下的view文件夹。想找页面间的逻辑就去页面控制器里找，想看页面显示元素就在view文件夹下寻找。你发现数据文件很小，只是数据存储和转换，这符合数据单一性原则；视图部分也很小，只是数据的显示，完全不自主；控制器部分仍然摆脱不了过于庞大的弊病。他们就像一个人一样头重而且庞大，脚轻，身子小。看到这些你就知道这种开发架构需要进化的方向：强化控制器的重要性，减轻它的体积，把不属于它的非核心部分迁移到类似视图的那一部分去，在保证数据的定义性上增加它的功能和作用。

取消使用单例组装http请求的做法（单例像类一样常驻内存，无形中增加类内存的开销。虽然它做到了统一管理http请求的作用，但是不符合那个页面的请求那个页面管理请求的原则）。让从控制器分化出来的这一部分功能给View,http请求封装为一个新操作类。

优点： 

1. 可定制性 

2. 代码清晰，便于维护 

3. 测试友好性 

4. 轻量级 

5. 开源 

主要缺点有两个： 

1. View对Model的依赖，会导致View也包含了业务逻辑； 

2. Controller会变得很厚很复杂。

前端mvc框架，如angularjs，backbone：

三、MVP：Model-View-Presenter，MVC的一个演变模式，将Controller换成了Presenter，主要为了解决上述第一个缺点，将View和Model解耦

四、了解一下Vue双数据绑定原理

vue.js 是采用数据劫持结合发布者-订阅者模式的方式，通过Object.defineProperty()来劫持各个属性的setter，getter，在数据变动时发布消息给订阅者，触发相应的监听回调。

具体步骤：

第一步：需要observe的数据对象进行递归遍历，包括子属性对象的属性，都加上 setter和getter

这样的话，给这个对象的某个值赋值，就会触发setter，那么就能监听到了数据变化

第二步：compile解析模板指令，将模板中的变量替换成数据，然后初始化渲染页面视图，并将每个指令对应的节点绑定更新函数，添加监听数据的订阅者，一旦数据有变动，收到通知，更新视图

第三步：Watcher订阅者是Observer和Compile之间通信的桥梁，主要做的事情是:

1、在自身实例化时往属性订阅器(dep)里面添加自己

2、自身必须有一个update()方法

3、待属性变动dep.notice()通知时，能调用自身的update()方法，并触发Compile中绑定的回调，则功成身退。

第四步：MVVM作为数据绑定的入口，整合Observer、Compile和Watcher三者，通过Observer来监听自己的model数据变化，通过Compile来解析编译模板指令，最终利用Watcher搭起Observer和Compile之间的通信桥梁，达到数据变化 -> 视图更新；视图交互变化(input) -> 数据model变更的双向绑定效果。

五、什么是数据劫持：

首先我们应该搞清楚什么是数据劫持，说白了就是通过Object.defineProperty()来劫持对象属性的setter和getter操作，在数据变动时做你想要做的事情，举个栗子：

var data = {

name:'lhl'

}

Object.keys(data).forEach(function(key){

Object.defineProperty(data,key,{

enumerable:true,

configurable:true,

get:function(){

console.log('get');

},

set:function(){

console.log('监听到数据发生了变化');

}

})

})；

data.name //控制台会打印出 “get”

data.name = 'hxx' //控制台会打印出 "监听到数据发生了变化"

上面的这个栗子可以看出，我们完全可以控制对象属性的设置和读取。在Vue中，作者在很多地方都非常巧妙的运用了defineProperty这个方法，具体用在哪里并且它又解决了哪些问题，下面做详细的介绍：

监听对象属性的变化

这个应该是Vue非常重要的一块，其主要思想是observer每个对象的属性，添加到订阅器dep中，当数据发生变化的时候发出notice通知。 相关源代码如下：（作者采用的是ES6+flow写的，代码在src/core/observer/index.js模块里面）

export function defineReactive (

obj: Object,

key: string,

val: any,

customSetter?: Function

) {

const dep = new Dep()//创建订阅对象

const property = Object.getOwnPropertyDescriptor(obj, key)

if (property && property.configurable === false) {

return

}

// cater for pre-defined getter/setters

const getter = property && property.get

const setter = property && property.set

let childOb = observe(val)//创建一个观察者对象

Object.defineProperty(obj, key, {

enumerable: true,

configurable: true,

get: function reactiveGetter () {

const value = getter ? getter.call(obj) : val

//这里也是作者一个巧妙设计，在创建watcher实例的时候，通过调用对象的get方法往订阅器 dep上添加这个创建的watcher实例

if (Dep.target) {

dep.depend()

if (childOb) {

childOb.dep.depend()

}

if (Array.isArray(value)) {

dependArray(value)

}

}

return value

},

set: function reactiveSetter (newVal) {

const value = getter ? getter.call(obj) : val

if (newVal === value) {

return

}

if (process.env.NODE_ENV !== 'production' && customSetter) {

customSetter()

}

if (setter) {

setter.call(obj, newVal)

} else {

val = newVal

}

childOb = observe(newVal)//继续监听新的属性值

dep.notify()//这个是真正劫持的目的，要对订阅者发通知了

}

})

}

以上是监听对象属性的变化，那么下面再看看如何监听数组的变化：

监听数组的变化 

)

break

}

if (inserted) ob.observeArray(inserted)

// notify change

ob.dep.notify()

return result

})

})

...

/**

* Define a property.

*/

function def (obj, key, val, enumerable) {

Object.defineProperty(obj, key, {

value: val,

enumerable: !!enumerable,

writable: true,

configurable: true

});

}

通过上面的代码可以看出Vue是通过修改了数组的几个操作的原型来实现的。

原文自： https://www.cnblogs.com/haohaoday/p/6375149.html

Vue框架很好的利用了Object.defineProperty()这个方法来实现了数据的监听和修改，同时也达到了很好的模块间解耦，在日常开发用好这个方法说不定会达到令人意想不到的结果。

发布订阅者模式：

https://www.sohu.com/a/207062452_464084