mvvm與virtual dom算法的實(shí)踐——“hoz”

littleGrow 發(fā)布于2019-08-22 17:30 / 493人閱讀

摘要：借鑒，等的思想，引入狀態(tài)管理在狀態(tài)管理方面借鑒的思想，實(shí)現(xiàn)了單向數(shù)據(jù)流的管理。引入和算法總所周知，由于元素的龐大，以及操作容易引起頁面重排的原因，直接操作性能是非常非常差的。然后通過算法對(duì)比新舊虛擬樹，對(duì)真實(shí)進(jìn)行最小單位的修改。

最近筆者打算自己造一個(gè)輪子，寫一個(gè)mvvm的庫，鍛煉自己的能力，畢竟用庫誰都可以，但是開發(fā)庫的能力不是誰都有，不過筆者不是什么大神，所以更多的是希望在這個(gè)過程中學(xué)到東西，然后這個(gè)庫不只是實(shí)現(xiàn)一個(gè)響應(yīng)式數(shù)據(jù)綁定這么簡單，那么這個(gè)庫有什么特點(diǎn)呢？請(qǐng)往下看。
當(dāng)然這個(gè)庫還處在剛剛開始階段，功能實(shí)現(xiàn)的比較簡單，在此發(fā)表出來，歡迎大家借此為基礎(chǔ)一起去完善它。項(xiàng)目地址：Hoz.js，歡迎大家start，fork，以及提issues。

特點(diǎn)

借鑒redux，flux等的思想，引入狀態(tài)管理

引入virtual dom，diff 算法，提高性能

聲明式語法

  
      
          
          {{moveName}}

var hoz = new Hoz("app", state, changeStore)

var state = {
  moveName: "",
  moveImage: ""
}
function changeStore (state, action) {
  switch (action.type) {
    case "SET_NAME": {
      state.moveName = action.data
      break
    }
    case "SET_IMAGE": {
      state.moveImage = action.data
      break
    }
  }
}

hoz.store.dispatch({
  type: "SET_NAME",
  data: "后來的我們"
})

這就是一個(gè)hoz應(yīng)用，通過簡潔的模板語法聲明式的將數(shù)據(jù)渲染進(jìn)DOM系統(tǒng)。
且所有東西都是響應(yīng)式的。

借鑒redux，flux等的思想，引入狀態(tài)管理

在狀態(tài)管理方面借鑒redux的思想，實(shí)現(xiàn)了單向數(shù)據(jù)流的管理。
主要定義了state，action，changeStore，dispatch4個(gè)概念。

state

存放數(shù)據(jù)

var state = {
  moveName: "",
  moveImage: ""
}

changeStore

相當(dāng)于redux中的reducer，存放著對(duì)數(shù)據(jù)的所有操作

function changeStore (state, action) {
  switch (action.type) {
    case "SET_NAME": {
      state.moveName = action.data
      break
    }
    case "SET_IMAGE": {
      state.moveImage = action.data
      break
    }
  }
}

接收action，執(zhí)行對(duì)應(yīng)的方法，修改state中的數(shù)據(jù)。不同于redux的是，redux放回的是全新的state，而它是直接操作當(dāng)前的state，因?yàn)閟tate中的數(shù)據(jù)已經(jīng)通過Object.defineProperty方法進(jìn)行了跟蹤，這個(gè)后面再將。

action和dispatch

當(dāng)想要對(duì)數(shù)據(jù)進(jìn)行修改的時(shí)候，我們必須通過提交action的方式，在changeStore中去修改state

hoz.store.dispatch({
  type: "SET_NAME",
  data: "后來的我們"
})

這個(gè)就是hoz的狀態(tài)管理策略

 view -> dispatch -> action -> changeStore -> state -> view

好處

隨著應(yīng)用的日益復(fù)雜，數(shù)據(jù)量的增大，如果不對(duì)數(shù)據(jù)進(jìn)行相應(yīng)的管理，管理不斷變化的狀態(tài)，是非常困難的。狀態(tài)在什么時(shí)候，由于什么原因，發(fā)生了怎樣的變化都難以觀察。

這意味著應(yīng)用中所有的數(shù)據(jù)都遵循相同的生命周期，這樣可以讓應(yīng)用變得更加可預(yù)測(cè)且容易理解。

我們可以從 changeStore 中看到state能夠發(fā)生的所有變化

對(duì)state修改的唯一方式就是向changeStore提交action，所以數(shù)據(jù)的每一次變化都會(huì)從一個(gè)地方流過，方便我們的debug等操作。

引入virtual dom 和diff算法

總所周知，由于dom元素的龐大，以及dom操作容易引起頁面重排的原因，直接操作dom性能是非常非常差的。
所以hoz引入了virtual dom算法，用原生的JavaScript對(duì)象去映射dom對(duì)象，因?yàn)樵鶭avaScript對(duì)象的操作更快更簡單。
如何映射呢？比如

class VNode {
  constructor (sel, tagName, id, className, el, children, data, text, key) {
    this.tagName = tagName // DIV
    this.sel = sel // div#id.class
    this.id = id // id
    this.className = className // []
    this.children = children // []
    this.el = el // node
    this.data = data // {}
    this.key = key
    this.text = text
  }
}

export default VNode

只是一個(gè)JavaScript對(duì)象，代表一個(gè)dom元素。

我根據(jù)hoz構(gòu)造函數(shù)中傳進(jìn)來的 id 所指向的元素作為根元素建立一個(gè)虛擬dom樹，當(dāng)數(shù)據(jù)改變的時(shí)候，不直接操作dom，而是在虛擬dom樹上進(jìn)行操作修改。然后通過diff算法對(duì)比新舊虛擬dom樹，對(duì)真實(shí)dom進(jìn)行最小單位的修改。

數(shù)據(jù)響應(yīng)式原理

hoz式如何做到數(shù)據(jù)的響應(yīng)式的呢？這里主要通過借助Object.defineProperty方法實(shí)現(xiàn)了一個(gè)發(fā)布/訂閱模式，通過Object.defineProperty修改state中數(shù)據(jù)的getter和setter屬性，在首次渲染的時(shí)候，在getter中將對(duì)應(yīng)的訂閱者添加到一個(gè)主題對(duì)象中去，當(dāng)數(shù)據(jù)改變的時(shí)候在setter中調(diào)用對(duì)應(yīng)數(shù)據(jù)的主題對(duì)象的notify方法發(fā)布消息，通知每個(gè)訂閱者更新。

state ->   data ->   publisher      一對(duì)多的關(guān)系
                        |
                       Dep
                        |
view -> {{data}} -> subscribers

希望大家借此為基礎(chǔ)一起去完善它。項(xiàng)目地址：Hoz.js，歡迎大家start，fork，以及提issues。