MVCMVVM模式及其实践

Posted 2021-05-01 CC前端手记

       MVC和MVVM已经被谈论了好久，不过还有一些开发者并不清楚二者的区别，那我们来梳理一下。

一、MVC——Model-View- Controller

M——model模型，获取数据，处理数据逻辑。
V——view视图，处理数据显示。
C——Controller控制器，从视图读取数据，控制用户输入，并向模型发送数据。

       简单来说，MVC就是用Controller将Model的数据用View显示出来。使用MVC的目的就是将M和V的代码分离。MVC是单向通信，View跟Model必须通过Controller来连接。

二、MVVM——Model-View-ViewModel

       随着前端项目越来越大，项目的可维护性、可扩展性和安全性等成了主要问题，之前的浏览器兼容性问题已经退居其次。当年典型的类库如jquery，只能解决浏览器兼容性问题，但没有实现对业务逻辑的分成，所以维护性和扩展性较差，这才有了MVVM模式一类框架的出现。MVVM又是什么呢？

M——model模型，后端传递的数据。
V——View视图。
VM——ViewModel视图模型，是连接view和model的桥梁。

       M和V不能直接通信，只能通过VM。VM要实现一个observer观察者，VM监听到数据变化时，通知视图做自动更新；VM监听到用户操作的视图的变化，会通知数据做改动，从而实现数据的双向绑定。

三、MVC和MVVM的区别：

       不难发现，二者的区别在于C和VM。是VM取代了C吗？不是，而是弱化了C的概念，增加了一层VM，用来抽离C中的业务逻辑，其它视图操作业务等还是放在C中实现。也就是说，MVVM实现的是业务逻辑组件的重用，使开发更高效，结构更清晰，增加代码的复用性。

• 四、基于MVVM实现的框架Vue.js

       在vue中，Model是js中的数据，View是页面视图，VM是vue实例化对象。

1、初步了解四个东西：

• Observer监听器——监听data选项中属性是被访问或被改变，决定调用getter/setter。

• Compile指令解析器——解析元素节点的指令，初始化视图，订阅watcher来更新视图。

• Watcher订阅者——是Observer和Compile的桥梁，订阅并收到属性变动通知，执行指令绑定的相应回调函数。

• Dep消息订阅器——它的内部有一个用来收集订阅者的数组，数据变动触发notify函数，再调用订阅者的update方法。

2、如何实现双向绑定

（1）初始化阶段：

• 监听：Observer把js对象传给vue实例的data选项，vue遍历data选项中的属性，并用Object.defineProperty()方法将这些属性转成setter/getter方法，实现监听功能；

• Compile指令编译器，解析元素节点的指令，初始化视图，并订阅Watcher来更新视图；

• watcher将自己添加到消息订阅器Dep，初始化完毕。

（2）数据变化时：

• Observer 中的 setter 方法被触发，setter调用Dep.notify()；

• Dep开始遍历所有订阅者，并调用订阅者的 update 方法；

• 订阅者收到通知后，更新视图。

如果你更喜欢看图：

       在传统的MVC模式中，前端人员只负责View（视图）部分。随着MVVM模式的出现，前端可以自己写业务逻辑以及渲染模板，后端只负责提供数据即可；前端能做的事情越来越多，在开发项目当中工作所占比重更大，这样一想是不是很开心了呢？