使用ES6新特性实现简单的MVVM(1)--数据驱动

尝试使用es6新特性,自己来实现一个mvvm及vue的各种特性。
相关代码放在github,会持续更新,欢迎赏个star。
本篇文章为系列文章的第一篇,会比较容易理解,后续会持续更新后面的记录。
文章首发于本人博客

最简单的watcher

从开始接触Vue开始,我们便对它的“数据响应”赞叹不绝,那么我们首先,来实现一个最简单的watcher,来监听数据,以进行对应的操作,类似后续会涉及的dom操作等。

Proxy

我们都知道,Vue使用Object.defineProperty来进行数据监听,监听obj的get和set方法。在ES6中,Proxy可以拦截某些操作的默认行为,也就是对目标对象的访问进行拦截,过滤和改写。我们可以利用这个特性来实现对数据的监听:

const watcher = (obj, fn) => {
  return new Proxy(obj, {
    get (target, prop, receiver) {
      return Reflect.get(target, prop, receiver)
    },

    set (target, prop, value) {
      const oldValue = Reflect.get(target, prop, receiver)
      const result = Reflect.set(target, prop, value)

      fn(value, oldValue)

      return result
    }
  })
}

结果:

let obj = watcher({ a: 1 }, (val, oldVal) => {
  console.log('old =>> ', oldVal)
  console.log('new =>> ', val)
})

obj.a = 2
// old =>> , 1
// new =>> , 2

简单的Dom操作

我们已经可以对简单的数据操作进行监听(虽然还有各种问题),接下来,我们只要在监听到dom后进行数据操作即可。解析模板什么的我们就先不做了,我们可以继续利用Proxy实现一个dom辅助函数:

const dom = new Proxy({}, {
  get (target, tagName) {
    return (attrs = {}, ...childrens) => {
      // 创建节点
      const elem = document.createElement(tagName)

      // 添加attribute
      attrs.forEach(attr => elem.addAttribute(attr, attrs[attr])

      // 添加子元素
      childrens.forEach(child => {
        const child = typeof child === 'string'
          ? document.createTextNode(child) 
          : child

        elem.appendChild(child)
      })

      return elem
    }
  }
})

也就是说,我们为dom的各属性进行监听,当访问对应的节点时,我们创建并且为他添加各种属性等:

dom.div(
  {class: 'wrap'}, 
  'helloworld',
  dom.a({
    href: 'https://www.360.cn'
  }, 'welcome to 360')
)

// 输出
<div class="wrap">
  helloworld
  <a href="https://www.360.cn">welcome to 360</a>
</div>

拼接基础框架

我们在这里给我们的这个小架子起名为'W',让它可以真正的运行起来。类似Vue的语法,我们需要在进行实例化的时候,watch我们的data,并且更新dom。类似这样:

const vm = new W({
  el: 'body',
  data () {
    return {
      msg: 'hello world'
    }
  },
  render () {
    return dom.div({
      class: 'wrap'
    },
      dom.a({
        href: 'http://www.360.cn'
      }, this.msg)
    )
  }
})

因此,我们需要实现这样一个类,来处理我们的参数,并进行实例的初始化,监听,以及渲染控制等。

export default class W {
  constructor (config) {}

  /**
   * observe data
   */
  _initData () {}

  /**
   * 渲染节点
   */
  _renderDom () {}
}

初始化数据

首先,我们进行数据初始化,将数据置为observable,在对其修改的时候进行监听:

import watcher from './data.js'

class W {
  constructor (config) {
    const { data = () => {} } = config

    this._config = config
    this._initData(data)

    return this._vm
  }
}

_initData (data) {
  this._vm = watcher(Object.assign({}, this, data()), this._renderDom.bind(this))
}

在这里我们需要注意两点:

  1. 我们的data参数为一个function
    这个原因在vue官方文档已经说过,当我们直接使用对象的时候,不同的实例间会共享同一个对象,导致出现对一个组件进行修改,另一个组件也进行修改的问题。具体可以查看data-必须是函数

  2. 我们返回的是this._vm而不是this
    我们这里做了两步操作,首先将this与data进行合并,再将整个对象进行监听,并赋值到_vm属性上。

这样,我们通过new W()初始化的实例,则可以访问到我们的data属性及方法,并且具有数据驱动的特性了。

更新DOM

我们已经为watcher的回调添加了dom更新的事件,我们只要在这里执行render函数,并挂载到对应的el上即可:

const { render, el } = this._config
const targetEl = document.querySelector(el)
const renderDom = render()

targetEl.innerHTML = ''
targetEl.appendChild(renderDom)

绑定this

我们会发现,我们在config的render函数中,使用了this.msg来访问data的msg属性,因此我们需要实现在各组件中,通过this可以访问到本实例的特性。我猜你已经想到了,我们可以使用bind,call和apply来实现它:

/**
 * 为所有的函数绑定this
 */
bindVM () {
  const { _config } = this

  for(let key of Object.keys(_config)) {
    const val = _config[key]
    if (typeof(val) === 'function') {
      _config[key] = val.bind(this._vm)
    }
  }
}

测试

简单的架子拼接完成,我们来进行测试下我们的成果,我们需要实现两点功能:

  1. 可以按照我们的render函数正常挂载,并可访问到data上的数据

  2. 通过对实例进行修改,修改会自动更新到节点上

代码:

const vm = new W({
  el: 'body',
  data () {
    return {
      msg: 'hello world'
    }
  },
  render () {
    return dom.div({
      class: 'wrap'
    },
      dom.a({
        href: 'http://www.360.cn'
      }, this.msg)
    )
  }
})

// 测试修改vm
setInterval(_ => {
  vm.msg = 'hello world =>>>' + new Date()
}, 1000)

结果:

使用ES6新特性实现简单的MVVM(1)--数据驱动

最基本的功能已经实现啦!

结语

本次我们只实现了最最最简单的数据驱动功能,后续还有很多需要进行处理,我们也会对其一一进行梳理和实现,大家可以持续关注下,例如:

  • 数组变动监听

  • object深度监听

  • 更新队列

  • render过程中记录仅相关的属性

  • 模板渲染

  • v-model

  • ...等等

相关代码放在github,会持续更新,欢迎赏个star。

敬请期待!

相关推荐