谈一谈MVVM这种框架

本文目录结构

问题

谈一谈MVVM这种框架

MVVM 由以下三个内容组成

• View ：界⾯
• Model ：数据模型
• ViewModel ：作为桥梁负责沟通 View 和 Model

在 JQuery 时期，如果需要刷新 UI 时，需要先取到对应的 DOM 再更新 UI ，这样数据和业务的逻辑就和⻚⾯有强耦合。

MVVM

在 MVVM 中， UI 是通过数据驱动的，数据⼀旦改变就会相应的刷新对应的 UI ， UI 如果改变，也会改变对应的数据。这种⽅式就可以在业务处理中只关⼼数 据的流转，⽽⽆需直接和⻚⾯打交道。 ViewModel 只关⼼数据和业务的处理，不关 ⼼ View 如何处理数据，在这种情况下， View 和 Model 都可以独⽴出来，任何 ⼀⽅改变了也不⼀定需要改变另⼀⽅，并且可以将⼀些可复⽤的逻辑放在⼀个 ViewModel 中，让多个 View 复⽤这个 ViewModel 。

在 MVVM 中，最核⼼的也就是数据双向绑定，例如 Angluar 的脏数据检测， Vue 中的 数据劫持。

脏数据检测

当触发了指定事件后会进⼊脏数据检测，这时会调⽤ $digest 循环遍历所有 的数据观察者，判断当前值是否和先前的值有区别，如果检测到变化的话，会 调⽤ $watch 函数，然后再次调⽤ $digest 循环直到发现没有变化。循环 ⾄少为⼆次 ，⾄多为⼗次。

脏数据检测虽然存在低效的问题，但是不关⼼数据是通过什么⽅式改变的，都 可以完成任务，但是这在 Vue 中的双向绑定是存在问题的。并且脏数据检测 可以实现批量检测出更新的值，再去统⼀更新 UI ，⼤⼤减少了操作 DOM 的次数。所以低效也是相对的，这就仁者⻅仁智者⻅智了。

数据劫持

Vue 内部使⽤了 Object.defineProperty() 来实现双向绑定，通过这个 函数可以监听到 set 和 get 的事件。

var data = { name: 'yck' }
observe(data)
let name = data.name // -> get value
data.name = 'yyy' // -> change value
function observe(obj) {
    // 判断类型
    if (!obj || typeof obj !== 'object') {
        return
    }
    Object.keys(obj).forEach(key => {
        defineReactive(obj, key, obj[key])
    })
}

function defineReactive(obj, key, val) {
    // 递归⼦属性
    observe(val)
    Object.defineProperty(obj, key, {
        enumerable: true,
        configurable: true,
        get: function reactiveGetter() {
            console.log('get value')
            return val
        },
        set: function reactiveSetter(newVal) {
            console.log('change value')
            val = newVal
        }
    })
}

以上代码简单的实现了如何监听数据的 set 和 get 的事件，但是仅仅如此 是不够的，还需要在适当的时候给属性添加发布订阅

<div>
{{name}}
</div>

在解析如上模板代码时，遇到 就会给属性 name 添加发布订阅。

// 通过 Dep 解耦
class Dep {
    constructor() {
        this.subs = []
    }
    addSub(sub) {
        // sub 是 Watcher 实例
        this.subs.push(sub)
    }
    notify() {
        this.subs.forEach(sub => {
            sub.update()
        })
    }
}
// 全局属性，通过该属性配置 Watcher
Dep.target = null
function update(value) {
    document.querySelector('div').innerText = value
}
class Watcher {
    constructor(obj, key, cb) {
        // 将 Dep.target 指向⾃⼰
        // 然后触发属性的 getter 添加监听
        // 最后将 Dep.target 置空
        Dep.target = this
        this.cb = cb
        this.obj = obj
        this.key = key
        this.value = obj[key]
        Dep.target = null
    }
    update() {
        // 获得新值
        this.value = this.obj[this.key]
        // 调⽤ update ⽅法更新 Dom
        this.cb(this.value)
    }
}
var data = { name: 'yck' }
observe(data)
// 模拟解析到 `{{name}}` 触发的操作
new Watcher(data, 'name', update)
// update Dom innerText
data.name = 'yyy'

接下来,对 defineReactive 函数进⾏改造

function defineReactive(obj, key, val) {
    // 递归⼦属性
    observe(val)
    let dp = new Dep()
    Object.defineProperty(obj, key, {
        enumerable: true,
        configurable: true,
        get: function reactiveGetter() {
            console.log('get value')
            // 将 Watcher 添加到订阅
            if (Dep.target) {
                dp.addSub(Dep.target)
            }
            return val
        },
        set: function reactiveSetter(newVal) {
            console.log('change value')
            val = newVal
            // 执⾏ watcher 的 update ⽅法
            dp.notify()
        }
    })
}

以上实现了⼀个简易的双向绑定，核⼼思路就是⼿动触发⼀次属性的getter 来实现发布订阅的添加

Proxy 与 Object.defineProperty 对⽐

Object.defineProperty 虽然已经能够实现双向绑定了，但是他还是有缺陷的。

• 只能对属性进⾏数据劫持，所以需要深度遍历整个对象 对于数组不能监听到数据的变化
• 虽然 Vue 中确实能检测到数组数据的变化，但是其实是使⽤了 hack 的办法，并且也是有缺陷的。

const arrayProto = Array.prototype
export const arrayMethods = Object.create(arrayProto)
// hack 以下⼏个函数
const methodsToPatch = [
    'push',
    'pop',
    'shift',
    'unshift',
    'splice',
    'sort',
    'reverse'
]
methodsToPatch.forEach(function (method) {
    // 获得原⽣函数
    const original = arrayProto[method]
    def(arrayMethods, method, function mutator (...args) {
        // 调⽤原⽣函数
        const result = original.apply(this, args)
        const ob = this.__ob__
        let inserted
        switch (method) {
            case 'push':
            case 'unshift':
                inserted = args
                break
            case 'splice':
                inserted = args.slice(2)
                break
        }
        if (inserted) ob.observeArray(inserted)
        // 触发更新
        ob.dep.notify()
        return result
    })
})

反观 Proxy 就没以上的问题，原⽣⽀持监听数组变化，并且可以直接对整个对象进⾏拦截，所以 Vue 也将在下个⼤版本中使⽤ Proxy 替换Object.defineProperty

let onWatch = (obj, setBind, getLogger) => {
    let handler = {
        get(target, property, receiver) {
            getLogger(target, property)
            return Reflect.get(target, property, receiver);
        },
        set(target, property, value, receiver) {
            setBind(value);
            return Reflect.set(target, property, value);
        }
    };
    return new Proxy(obj, handler);
};
let obj = { a: 1 }
let value
let p = onWatch(obj, (v) => {
    value = v
}, (target, property) => {
    console.log(`Get '${property}' = ${target[property]}`);
})
p.a = 2 // bind `value` to `2`
p.a // -> Get 'a' = 2

更多面试题

如果你想了解更多的前端面试题，可以查看本站的WEB前端面试题 ,这里基本包涵了市场上的所有前端方面的面试题，也有一些大公司的面试图，可以让你面试更加顺利。

面试题
HTML	CSS	JavaScript
jQuery	Vue.js	React
算法	HTTP	Babel
BootStrap	Electron	Gulp
Node.js	前端经验相关	前端综合
Webpack	微信小程序	-

这些题库还在更新中，如果你有不错的面试题库欢迎分享给我，我整理后放上来；人人为我，我为人人，互帮互助，共同提高，祝大家都拿到心仪的Offer！