mvvm与virtual dom算法的实践——“hoz”

littleGrow 发布于2019-08-22 17:30 / 486人阅读

摘要：借鉴，等的思想，引入状态管理在状态管理方面借鉴的思想，实现了单向数据流的管理。引入和算法总所周知，由于元素的庞大，以及操作容易引起页面重排的原因，直接操作性能是非常非常差的。然后通过算法对比新旧虚拟树，对真实进行最小单位的修改。

最近笔者打算自己造一个轮子，写一个mvvm的库，锻炼自己的能力，毕竟用库谁都可以，但是开发库的能力不是谁都有，不过笔者不是什么大神，所以更多的是希望在这个过程中学到东西，然后这个库不只是实现一个响应式数据绑定这么简单，那么这个库有什么特点呢？请往下看。
当然这个库还处在刚刚开始阶段，功能实现的比较简单，在此发表出来，欢迎大家借此为基础一起去完善它。项目地址：Hoz.js，欢迎大家start，fork，以及提issues。

特点

借鉴redux，flux等的思想，引入状态管理

引入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应用，通过简洁的模板语法声明式的将数据渲染进DOM系统。
且所有东西都是响应式的。

借鉴redux，flux等的思想，引入状态管理

在状态管理方面借鉴redux的思想，实现了单向数据流的管理。
主要定义了state，action，changeStore，dispatch4个概念。

state

存放数据

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

changeStore

相当于redux中的reducer，存放着对数据的所有操作

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

接收action，执行对应的方法，修改state中的数据。不同于redux的是，redux放回的是全新的state，而它是直接操作当前的state，因为state中的数据已经通过Object.defineProperty方法进行了跟踪，这个后面再将。

action和dispatch

当想要对数据进行修改的时候，我们必须通过提交action的方式，在changeStore中去修改state

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

这个就是hoz的状态管理策略

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

好处

随着应用的日益复杂，数据量的增大，如果不对数据进行相应的管理，管理不断变化的状态，是非常困难的。状态在什么时候，由于什么原因，发生了怎样的变化都难以观察。

这意味着应用中所有的数据都遵循相同的生命周期，这样可以让应用变得更加可预测且容易理解。

我们可以从 changeStore 中看到state能够发生的所有变化

对state修改的唯一方式就是向changeStore提交action，所以数据的每一次变化都会从一个地方流过，方便我们的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元素。

我根据hoz构造函数中传进来的 id 所指向的元素作为根元素建立一个虚拟dom树，当数据改变的时候，不直接操作dom，而是在虚拟dom树上进行操作修改。然后通过diff算法对比新旧虚拟dom树，对真实dom进行最小单位的修改。

数据响应式原理

hoz式如何做到数据的响应式的呢？这里主要通过借助Object.defineProperty方法实现了一个发布/订阅模式，通过Object.defineProperty修改state中数据的getter和setter属性，在首次渲染的时候，在getter中将对应的订阅者添加到一个主题对象中去，当数据改变的时候在setter中调用对应数据的主题对象的notify方法发布消息，通知每个订阅者更新。

state ->   data ->   publisher      一对多的关系
                        |
                       Dep
                        |
view -> {{data}} -> subscribers

希望大家借此为基础一起去完善它。项目地址：Hoz.js，欢迎大家start，fork，以及提issues。

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/95237.html

virtual dom及diff算法

摘要：原文地址此篇结合我最近造的小轮子进行分析，其中的算法主要参考库。如果其中一方没有子节点，那么进行删除或添加。判断是否一方已遍历完，对真实进行相应的删减或添加。原文地址：https://github.com/HolyZheng/...此篇结合我最近造的小轮子hoz进行分析，其中的virtual dom算法主要参考snabbdom库。 virtual dom 什么是virtual dom...

xuexiangjys 2019-08-22 18:24 评论0 收藏0
了不起的Virtual DOM(一)：起源

摘要：到此为止所承担的操作与非常相近，但是为了让与相互独立，改变后的通知是分发给，收到改变的通知就会调用的接口来改变用户界面。的优点非常显然，极大的提高了可维护性，与之间的相互手动维护更新被释放，改为自动更新。前言　　首先欢迎大家关注我的掘金账号和Github博客，也算是对我的一点鼓励，毕竟写东西没法获得变现，能坚持下去也是靠的是自己的热情和大家的鼓励。　　之所以想写本系列文章的主要原...

caoym 2019-08-22 11:23 评论0 收藏0
深度剖析：如何实现一个 Virtual DOM 算法

摘要：本文所实现的完整代码存放在。这就是所谓的算法。两个树的完全的算法是一个时间复杂度为的问题。如果有差异的话就记录到一个对象里面。如和的不同，会被所替代。这牵涉到两个列表的对比算法，需要另外起一个小节来讨论。作者：戴嘉华转载请注明出处并保留原文链接（ https://github.com/livoras/blog/issues/13 ）和作者信息。目录： 1 前言 2 对前端应用状...

vvpvvp 2019-08-21 10:49 评论0 收藏0
从React渲染流程分析Diff算法

摘要：什么是虚拟在中，执行的结果得到的并不是真正的节点，结果仅仅是轻量级的对象，我们称之为。后来产出的架构模式，期望从代码组织方式来降低维护难度。 1、什么是虚拟DOM 在React中，render执行的结果得到的并不是真正的DOM节点，结果仅仅是轻量级的JavaScript对象，我们称之为virtual DOM。简单的说，其实所谓的virtual DOM就是JavaScript对象到H...

lykops 2019-08-02 16:04 评论0 收藏0
从React渲染流程分析Diff算法

摘要：什么是虚拟在中，执行的结果得到的并不是真正的节点，结果仅仅是轻量级的对象，我们称之为。后来产出的架构模式，期望从代码组织方式来降低维护难度。 1、什么是虚拟DOM 在React中，render执行的结果得到的并不是真正的DOM节点，结果仅仅是轻量级的JavaScript对象，我们称之为virtual DOM。简单的说，其实所谓的virtual DOM就是JavaScript对象到H...

sutaking 2019-08-23 11:50 评论0 收藏0