摘要：嘗試使用新特性，自己來實(shí)現(xiàn)一個(gè)及的各種特性。我們可以利用這個(gè)特性來實(shí)現(xiàn)對數(shù)據(jù)的監(jiān)聽結(jié)果簡單的操作我們已經(jīng)可以對簡單的數(shù)據(jù)操作進(jìn)行監(jiān)聽雖然還有各種問題，接下來，我們只要在監(jiān)聽到后進(jìn)行數(shù)據(jù)操作即可。

嘗試使用es6新特性，自己來實(shí)現(xiàn)一個(gè)mvvm及vue的各種特性。
相關(guān)代碼放在github，會持續(xù)更新，歡迎賞個(gè)star。
本篇文章為系列文章的第一篇，會比較容易理解，后續(xù)會持續(xù)更新后面的記錄。
文章首發(fā)于本人博客

從開始接觸Vue開始，我們便對它的“數(shù)據(jù)響應(yīng)”贊嘆不絕，那么我們首先，來實(shí)現(xiàn)一個(gè)最簡單的watcher，來監(jiān)聽數(shù)據(jù)，以進(jìn)行對應(yīng)的操作，類似后續(xù)會涉及的dom操作等。

我們都知道，Vue使用Object.defineProperty來進(jìn)行數(shù)據(jù)監(jiān)聽，監(jiān)聽obj的get和set方法。在ES6中，Proxy可以攔截某些操作的默認(rèn)行為，也就是對目標(biāo)對象的訪問進(jìn)行攔截，過濾和改寫。我們可以利用這個(gè)特性來實(shí)現(xiàn)對數(shù)據(jù)的監(jiān)聽：

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
    }
  })
}

結(jié)果：

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

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

我們已經(jīng)可以對簡單的數(shù)據(jù)操作進(jìn)行監(jiān)聽（雖然還有各種問題），接下來，我們只要在監(jiān)聽到dom后進(jìn)行數(shù)據(jù)操作即可。解析模板什么的我們就先不做了，我們可以繼續(xù)利用Proxy實(shí)現(xiàn)一個(gè)dom輔助函數(shù)：

const dom = new Proxy({}, {
  get (target, tagName) {
    return (attrs = {}, ...childrens) => {
      // 創(chuàng)建節(jié)點(diǎn)
      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
    }
  }
})

也就是說，我們?yōu)閐om的各屬性進(jìn)行監(jiān)聽，當(dāng)訪問對應(yīng)的節(jié)點(diǎn)時(shí)，我們創(chuàng)建并且為他添加各種屬性等：

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

// 輸出

  helloworld
  welcome to 360

我們在這里給我們的這個(gè)小架子起名為"W"，讓它可以真正的運(yùn)行起來。類似Vue的語法，我們需要在進(jìn)行實(shí)例化的時(shí)候，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)
    )
  }
})

因此，我們需要實(shí)現(xiàn)這樣一個(gè)類，來處理我們的參數(shù)，并進(jìn)行實(shí)例的初始化，監(jiān)聽，以及渲染控制等。

export default class W {
  constructor (config) {}

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

  /**
   * 渲染節(jié)點(diǎn)
   */
  _renderDom () {}
}

首先，我們進(jìn)行數(shù)據(jù)初始化，將數(shù)據(jù)置為observable,在對其修改的時(shí)候進(jìn)行監(jiān)聽：

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))
}

在這里我們需要注意兩點(diǎn)：

我們的data參數(shù)為一個(gè)function
這個(gè)原因在vue官方文檔已經(jīng)說過，當(dāng)我們直接使用對象的時(shí)候，不同的實(shí)例間會共享同一個(gè)對象，導(dǎo)致出現(xiàn)對一個(gè)組件進(jìn)行修改，另一個(gè)組件也進(jìn)行修改的問題。具體可以查看data-必須是函數(shù)

我們返回的是this._vm而不是this
我們這里做了兩步操作，首先將this與data進(jìn)行合并，再將整個(gè)對象進(jìn)行監(jiān)聽,并賦值到_vm屬性上。

這樣，我們通過new W()初始化的實(shí)例，則可以訪問到我們的data屬性及方法，并且具有數(shù)據(jù)驅(qū)動(dòng)的特性了。

我們已經(jīng)為watcher的回調(diào)添加了dom更新的事件，我們只要在這里執(zhí)行render函數(shù)，并掛載到對應(yīng)的el上即可：

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

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

我們會發(fā)現(xiàn)，我們在config的render函數(shù)中，使用了this.msg來訪問data的msg屬性，因此我們需要實(shí)現(xiàn)在各組件中，通過this可以訪問到本實(shí)例的特性。我猜你已經(jīng)想到了，我們可以使用bind,call和apply來實(shí)現(xiàn)它：

/**
 * 為所有的函數(shù)綁定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)
    }
  }
}

簡單的架子拼接完成，我們來進(jìn)行測試下我們的成果，我們需要實(shí)現(xiàn)兩點(diǎn)功能：

可以按照我們的render函數(shù)正常掛載，并可訪問到data上的數(shù)據(jù)

通過對實(shí)例進(jìn)行修改，修改會自動(dòng)更新到節(jié)點(diǎn)上

代碼：

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)

結(jié)果:

最基本的功能已經(jīng)實(shí)現(xiàn)啦！

本次我們只實(shí)現(xiàn)了最最最簡單的數(shù)據(jù)驅(qū)動(dòng)功能，后續(xù)還有很多需要進(jìn)行處理，我們也會對其一一進(jìn)行梳理和實(shí)現(xiàn)，大家可以持續(xù)關(guān)注下，例如：

數(shù)組變動(dòng)監(jiān)聽

object深度監(jiān)聽

更新隊(duì)列

render過程中記錄僅相關(guān)的屬性

模板渲染

v-model

...等等

相關(guān)代碼放在github，會持續(xù)更新，歡迎賞個(gè)star。

敬請期待！