Anduin：一个简单的virtual-dom

#1

最近一直在研究virtual-dom。自己上手小试牛刀了一把，写了一个简单可用的virtual-dom。算法参考了snabbdom，也做了一些简化。希望能对大家的学习也有帮助。

Anduin

源码地址，欢迎拍砖~

安装

$ npm install -S anduin

示例

import { h, diff, patch } from 'anduin'

// 用h函数生成vdom
let vdom1 = h("div", {}, [
  h("h1", {}, 0),
  h("button", { }, "-"),
  h("button", { }, "+"),
  h("ul", {}, [
    h("li", { key: 'a' }, 'a'),
    h('li', { key: 'b' }, 'b'),
    h("li", { key: 'c' }, 'c'),
    h('li', { key: 'd' }, 'd'),
  ])
])

let vdom2 = h("div", {}, [
  h("h1", {}, 1),
  h("button", { props: 'hashKey' }, "-"),
  h("button", { }, "+"),
  h("ul", {}, [
    h('li', { key: 'f' }, 'f'),
    h("li", { key: 'a' }, 'a'),
    h('li', { key: 'b' }, 'b'),
    h('li', { key: 'd' }, 'd'),
    h("li", { key: 'c' }, 'c'),
    h('li', { key: 'e' }, 'e'),
  ])
])

// 生成real-dom.
let root = vdom1.render()

document.body.appendChild(root)

// diff两个vdom并得到patches
let patches = diff(vdom1, vdom2)

// 对real-dom进行patch
patch(root, patches)
2 Likes
#2

楼主，杭州阿里的前端工作机会看一下吗:grin: