阿西河

所有教程

公众号
🌙
阿西河前端的公众号

我的收藏

    最近访问  (文章)

      教程列表

      抓包专区
      测试专区

      谈一谈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前端面试题 ,这里基本包涵了市场上的所有前端方面的面试题,也有一些大公司的面试图,可以让你面试更加顺利。

      面试题
      HTMLCSSJavaScript
      jQueryVue.jsReact
      算法HTTPBabel
      BootStrapElectronGulp
      Node.js前端经验相关前端综合
      Webpack微信小程序-

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

      目录
      目录