MVC设计模式缺点

MVC模式用户可以去单独操作View层和Model层以及Contrller层或者分开进行操作，我们不仅可以去操作这三个东西，这三个东西之间也会有交互操作

stateDiagram-v2
View(视图) --> Model(数据)
Model(数据)-->Controller(控制器)
Controller(控制器)-->View(视图)

View层可以去获取model里面的数据，model可以去触发view层里面的更新视图方法，Contrller层可以控制View层渲染以及Model层的数据变动，虽然这种模式十分灵活，但是在一些复杂功能面前就会显得特别的混乱，比如这个视图突然发生了改变，但是我们并不知道视图是从哪里触发的改变，有可能是Model层也有可能是Controller层，也有可能是用户的操作直接触发的，我们如果想知道视图从哪里触发的，根本没有头绪去寻找，这也是MVC设计模式的缺点

MVP模式

为了解决这个问题出现了MVP设计模式，这种设计模式是不允许View层和Model层直接进行交互的，必须通过Presenter层才可以

stateDiagram-v2
View(视图) --> Presenter(控制器)
Presenter(控制器)--> View(视图) 
Presenter(控制器)--> Model(数据)
Model(数据)-->Presenter(控制器)

这样就解决了MVC设计模式各个层级之间的交互混乱问题

MVVM模式

MVVM设计模式基本上和MVP设计模式是一致的，只不过在MVVM设计模式中，更注重于数据驱动视图渲染，在MVVM模式中新增了数据双向绑定的功能

stateDiagram-v2
View(视图) --> ViewModel(控制器)
Model(视图) --> ViewModel(控制器)
 ViewModel(控制器) -->Model(视图)

数据绑定分为单向数据绑定和双向数据绑定

单向数据绑定是指数据发生变化视图层也会发生相应的变化

双向数据绑定一般是用在表单中，其实就是监听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)
                })
            }
        };

坚持努力，无惧未来！

JavaScript设计模式-MVVM模式（7）

MVC设计模式缺点

MVP模式

MVVM模式

MVVM设计模式案例

页面结构

实现

观察者

订阅者

MVVM