成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

mvvm與virtual dom算法的實踐——“hoz”

littleGrow / 498人閱讀

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

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

特點

借鑒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: "后來的我們"
})

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

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

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

state

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

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

相當于redux中的reducer，存放著對數(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í)行對應的方法，修改state中的數(shù)據(jù)。不同于redux的是，redux放回的是全新的state，而它是直接操作當前的state，因為state中的數(shù)據(jù)已經(jīng)通過Object.defineProperty方法進行了跟蹤，這個后面再將。

action和dispatch

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

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

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

 view -> dispatch -> action -> changeStore -> state -> view
好處

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

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

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

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

引入virtual dom 和diff算法

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

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

只是一個JavaScript對象，代表一個dom元素。

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

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

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

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

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

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/95237.html

相關(guān)文章

  • virtual dom及diff算法

    摘要：原文地址此篇結(jié)合我最近造的小輪子進行分析，其中的算法主要參考庫。如果其中一方?jīng)]有子節(jié)點，那么進行刪除或添加。判斷是否一方已遍歷完，對真實進行相應的刪減或添加。 原文地址：https://github.com/HolyZheng/...此篇結(jié)合我最近造的小輪子hoz進行分析，其中的virtual dom算法主要參考snabbdom庫。 virtual dom 什么是virtual dom...

    xuexiangjys 評論0 收藏0

  • 了不起的Virtual DOM(一)：起源

    摘要：到此為止所承擔的操作與非常相近，但是為了讓與相互獨立，改變后的通知是分發(fā)給，收到改變的通知就會調(diào)用的接口來改變用戶界面。的優(yōu)點非常顯然，極大的提高了可維護性，與之間的相互手動維護更新被釋放，改為自動更新。 前言 　　首先歡迎大家關(guān)注我的掘金賬號和Github博客，也算是對我的一點鼓勵，畢竟寫東西沒法獲得變現(xiàn)，能堅持下去也是靠的是自己的熱情和大家的鼓勵。 　　之所以想寫本系列文章的主要原...

    caoym 評論0 收藏0

  • 深度剖析：如何實現(xiàn)一個 Virtual DOM 算法

    摘要：本文所實現(xiàn)的完整代碼存放在。這就是所謂的算法。兩個樹的完全的算法是一個時間復雜度為的問題。如果有差異的話就記錄到一個對象里面。如和的不同，會被所替代。這牽涉到兩個列表的對比算法，需要另外起一個小節(jié)來討論。 作者：戴嘉華 轉(zhuǎn)載請注明出處并保留原文鏈接（ https://github.com/livoras/blog/issues/13 ）和作者信息。 目錄： 1 前言 2 對前端應用狀...

    vvpvvp 評論0 收藏0

  • 從React渲染流程分析Diff算法

    摘要：什么是虛擬在中，執(zhí)行的結(jié)果得到的并不是真正的節(jié)點，結(jié)果僅僅是輕量級的對象，我們稱之為。后來產(chǎn)出的架構(gòu)模式，期望從代碼組織方式來降低維護難度。 1、什么是虛擬DOM 在React中，render執(zhí)行的結(jié)果得到的并不是真正的DOM節(jié)點，結(jié)果僅僅是輕量級的JavaScript對象，我們稱之為virtual DOM。 簡單的說，其實所謂的virtual DOM就是JavaScript對象到H...

    lykops 評論0 收藏0

  • 從React渲染流程分析Diff算法

    摘要：什么是虛擬在中，執(zhí)行的結(jié)果得到的并不是真正的節(jié)點，結(jié)果僅僅是輕量級的對象，我們稱之為。后來產(chǎn)出的架構(gòu)模式，期望從代碼組織方式來降低維護難度。 1、什么是虛擬DOM 在React中，render執(zhí)行的結(jié)果得到的并不是真正的DOM節(jié)點，結(jié)果僅僅是輕量級的JavaScript對象，我們稱之為virtual DOM。 簡單的說，其實所謂的virtual DOM就是JavaScript對象到H...

    sutaking 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<