MVVM设计模式可以看做是MVC设计模式的升级版本，它是基于MVC设计模式进行改造的的，实现了使用数据驱动视图的一种模式
MVC设计模式缺点
MVC模式用户可以去单独操作View层和Model层以及Contrller层或者分开进行操作，我们不仅可以去操作这三个东西，这三个东西之间也会有交互操作
View层可以去获取model里面的数据，model可以去触发view层里面的更新视图方法，Contrller层可以控制View层渲染以及Model层的数据变动，虽然这种模式十分灵活，但是在一些复杂功能面前就会显得特别的混乱，比如这个视图突然发生了改变，但是我们并不知道视图是从哪里触发的改变，有可能是Model层也有可能是Controller层，也有可能是用户的操作直接触发的，我们如果想知道视图从哪里触发的，根本没有头绪去寻找，这也是MVC设计模式的缺点
MVP模式
为了解决这个问题出现了MVP设计模式，这种设计模式是不允许View层和Model层直接进行交互的，必须通过Presenter层才可以
这样就解决了MVC设计模式各个层级之间的交互混乱问题
MVVM模式
MVVM设计模式基本上和MVP设计模式是一致的，只不过在MVVM设计模式中，更注重于数据驱动视图渲染，在MVVM模式中新增了数据双向绑定的功能
数据绑定分为单向数据绑定和双向数据绑定
单向数据绑定是指数据发生变化视图层也会发生相应的变化
双向数据绑定一般是用在表单中，其实就是监听input改变的事件，通过事件监听视图发生改变的时候也可以去更新数据层数据
这几种设计模式其实就是比较注重数据层和视图层的分离，去做数据层和视图层的分离主要是为了增加代码的可维护性，可复用性，可移植性等等，无论怎么样的设计模式都不能降低开发效率，并且数据和视图层分离后还需要结合起来
Vue在市面上特别火热，他其中就用到了MVVM设计模式，我们来实现一下
MVVM设计模式案例
我们通过MVVM设计模式来实现Vue中的v-model操作，其中还用到了订阅者设计模式和观察者设计模式
页面结构
<div id="app"> <input type="text" v-model="name"> </div>
实现
观察者
创建一个观察者类用于监听用户数据改变，改变时去执行我们传的callbak，需要传递三个参数，实例，data中的key值以及回调函数
// 创建观察者 class Watcher { constructor(vm, key, callback) { this.callback = callback; this.vm = vm; this.key = key; Subscribe.target = this; // 读取实例key的时候就会去执行get方法了 this.value = this.vm[this.key]; Subscribe.target = null; } update() { this.callback(); } }
订阅者
把需要订阅的数组传递进去，通过订阅的方式执行观察者的方法
// 创建订阅者 class Subscribe { constructor() { // 添加订阅数据 this.watchers = [] } // 添加观察者 addWatcher(val) { this.watchers.push(val); } //通知 notice(val) { this.watchers.map(V => { V.update(val) }) } }
MVVM
结合观察和订阅者模式实现MVVM的操作,其实也就是通过Object.defineProperty定义data的所有属性，在get方法中收集观察者，在set方法中触发观察者更新视图
class Vue { // el是元素 data是数据 constructor({ el, data }) { // 获取元素 this.container = document.querySelector(el); console.log( this.container,el); // 当前页面的数据 this.data = data; // 初始化data this.init() // 初始化model this.initModel() } // 初始化data init() { // 把data里面key和value转化成二维数组 Object.entries(this.data).forEach(([key, value]) => { // 获取value let creatdVal = value; const subscribe = new Subscribe(); // 把当前的key定义到当前this上面并进行监听 Object.defineProperty(this, key, { // 获取this的key值会触发get方法 get() { subscribe.addWatcher(subscribe.target) return creatdVal; }, // 修改this的key值会触发get方法 set(newVal) { // 判断是否为旧值，旧值则不更新 if (creatdVal == newVal) return; creatdVal = newVal // 触发订阅者通知 subscribe.notice() } }) }) } // 初始化v-model表单 initModel() { // 获取所有的v-model属性 const models = this.container.querySelectorAll('[v-model]'); // 循环 Array.from(models).map(M => { // 获取当前元素上的v-model const key = M.getAttribute('v-model'); // 创建观察者，进行观察data中的数据 new Watcher(this, key, () => { M.value = this[key] }) // 初始化赋值 M.value = this[key]; // 监听输入事件 M.addEventListener('input', e => { // 当前的key值为input输入的值 this[key] = e.target.value; }, false) }) } };
坚持努力，无惧未来！
