回敬尾巴是阿里的某资深：手撸一个基于html字符串模板的Virtual DOM-唐霜

写完《转载请注明出处：www.tangshuang.netHTMLStringParser：自己撸【作者：唐霜】【本文受版权保护】一个Virtual DOM之前》之后，我第一时间整理代码，把文章转载到著作权归作者所有，禁止商业用途转载。【转载请注明来源】掘金上，满足作为宅逼程序猿的虚荣感。但写【访问 www.tangshuang.net 获取更多精彩内容】【未经授权禁止转载】完HTMLStringPareser之后本文作者：唐霜，转载请注明出处。【原创内容，转载请注明出处】，我并不满足，既然都已经实现了把html转载请注明出处：www.tangshuang.net【未经授权禁止转载】转换为对应的js对象结构了，而且连cre转载请注明出处：www.tangshuang.net本文版权归作者所有，未经授权不得转载。ateElement都写了，为何不更进一【原创内容，转载请注明出处】【访问 www.tangshuang.net 获取更多精彩内容】步，把整个Virtual DOM也给实现转载请注明出处：www.tangshuang.net未经授权，禁止复制转载。了呢？于是开始手撸。这一下，把自己给摔进本文作者：唐霜，转载请注明出处。著作权归作者所有，禁止商业用途转载。坑里，在实现diff的时候，几乎陷入了绝本文作者：唐霜，转载请注明出处。转载请注明出处：www.tangshuang.net境。最后，在无法实现的前提下，做了妥协，未经授权，禁止复制转载。【原创不易，请尊重版权】做了不严谨处理，最后才终于撸完了整个Vi【作者：唐霜】本文版权归作者所有，未经授权不得转载。rtual DOM，代码在这里著作权归作者所有，禁止商业用途转载。，你可以自己慢慢拍砖。本文作者：唐霜，转载请注明出处。

未经授权，禁止复制转载。本文作者：唐霜，转载请注明出处。【未经授权禁止转载】【未经授权禁止转载】转载请注明出处：www.tangshuang.net

在文章发表在掘金之后，我就开始去写代码了本文版权归作者所有，未经授权不得转载。【转载请注明来源】，但是过了两天回去看掘金的时候，有几条评著作权归作者所有，禁止商业用途转载。【访问 www.tangshuang.net 获取更多精彩内容】论，还挺兴奋，一看，一位带着“@阿里巴巴【原创内容，转载请注明出处】【原创不易，请尊重版权】”尾巴的资深x师竟然嘲讽到说“从HTML著作权归作者所有，禁止商业用途转载。本文作者：唐霜，转载请注明出处。转vdom这个实践不行，自己写写玩玩吧”【本文受版权保护】【本文首发于唐霜的博客】，我就怒了，这口气，太拽了吧，也不知道是原创内容，盗版必究。转载请注明出处：www.tangshuang.net不是随便说的。我写HTMLStringP【原创内容，转载请注明出处】【未经授权禁止转载】arser就是要解决自己抓取网页，获取某【版权所有】唐霜 www.tangshuang.net本文作者：唐霜，转载请注明出处。个节点数据的实际问题，写完了就解决了，怎著作权归作者所有，禁止商业用途转载。【版权所有】唐霜 www.tangshuang.net么是玩玩呢？再说了，vue用的不也是ht原创内容，盗版必究。著作权归作者所有，禁止商业用途转载。ml字符串模板么？所以，我打算写一篇文章【作者：唐霜】本文版权归作者所有，未经授权不得转载。，把自己完整撸完Virtual DOM的【未经授权禁止转载】【原创内容，转载请注明出处】这个过程写下来，实现的肯定不如React【本文受版权保护】【原创不易，请尊重版权】，但是从整个功能而已，是完整的，说明上面本文版权归作者所有，未经授权不得转载。未经授权，禁止复制转载。这位资深的说法不对，不仅可行，而且说不定【本文受版权保护】【关注微信公众号：wwwtangshuangnet】以后我还会用到自己的开发中，不是玩玩。

原创内容，盗版必究。原创内容，盗版必究。【原创内容，转载请注明出处】

整体思路【未经授权禁止转载】

【关注微信公众号：wwwtangshuangnet】【原创不易，请尊重版权】【未经授权禁止转载】未经授权，禁止复制转载。【关注微信公众号：wwwtangshuangnet】

我已经写关于Virtual DOM的文章未经授权，禁止复制转载。【版权所有】唐霜 www.tangshuang.net好几篇了，虽然不一定对所有细节都非常专业著作权归作者所有，禁止商业用途转载。【本文首发于唐霜的博客】，但是自认为整个逻辑是搞清楚了的。实现一著作权归作者所有，禁止商业用途转载。原创内容，盗版必究。个Virtual DOM不是把真实DOM转载请注明出处：www.tangshuang.net【访问 www.tangshuang.net 获取更多精彩内容】结构转换为一个js对象就完事了，一个Vi【访问 www.tangshuang.net 获取更多精彩内容】本文版权归作者所有，未经授权不得转载。rtual DOM还要包括把这个js对象【作者：唐霜】原创内容，盗版必究。渲染回真实DOM，接收数据变化，数据变化【关注微信公众号：wwwtangshuangnet】未经授权，禁止复制转载。时做diff，知道哪些节点会发生变化，做【关注微信公众号：wwwtangshuangnet】本文作者：唐霜，转载请注明出处。patch去更新真实DOM。所以，我的整【本文受版权保护】原创内容，盗版必究。体思路，就是写一个VirtualDOM的本文作者：唐霜，转载请注明出处。【关注微信公众号：wwwtangshuangnet】Class，这个Class包含：

createVritualDOM：从ht【原创内容，转载请注明出处】著作权归作者所有，禁止商业用途转载。ml字符串模板抽象出js对象即Virtu未经授权，禁止复制转载。本文作者：唐霜，转载请注明出处。al DOM

著作权归作者所有，禁止商业用途转载。

【转载请注明来源】

【原创不易，请尊重版权】

createDOM：用Virtual D【访问 www.tangshuang.net 获取更多精彩内容】【原创内容，转载请注明出处】OM渲染出真正的DOM

本文作者：唐霜，转载请注明出处。

原创内容，盗版必究。

转载请注明出处：www.tangshuang.net

【本文受版权保护】

render：将createDOMD得到本文作者：唐霜，转载请注明出处。转载请注明出处：www.tangshuang.net的节点挂载到真实的文档中，使文档发生变化

本文作者：唐霜，转载请注明出处。

【访问 www.tangshuang.net 获取更多精彩内容】

【本文受版权保护】

【本文首发于唐霜的博客】

【未经授权禁止转载】

update：传入新的数据，新数据会引起著作权归作者所有，禁止商业用途转载。原创内容，盗版必究。界面变化
- diff：传入数据之后使用createV【关注微信公众号：wwwtangshuangnet】【未经授权禁止转载】irtualDOM得到一个新的Virtu【原创不易，请尊重版权】【原创不易，请尊重版权】al DOM，和老的进行比较，得到哪些节未经授权，禁止复制转载。【原创不易，请尊重版权】点是变化了的
- patch：利用diff的结果，更新真实【关注微信公众号：wwwtangshuangnet】【作者：唐霜】的DOM，使界面发生变化

原创内容，盗版必究。

本文作者：唐霜，转载请注明出处。

转载请注明出处：www.tangshuang.net

destroy：销毁对应的DOM节点，界未经授权，禁止复制转载。【原创不易，请尊重版权】面发生变化

未经授权，禁止复制转载。

【访问 www.tangshuang.net 获取更多精彩内容】

本文版权归作者所有，未经授权不得转载。

【原创内容，转载请注明出处】

就这么几个方就够了，这就是一个Virtu【作者：唐霜】【版权所有】唐霜 www.tangshuang.netal DOM的全部内容了。我们又不是在写【作者：唐霜】转载请注明出处：www.tangshuang.netcomponent，所以React的那套原创内容，盗版必究。【版权所有】唐霜 www.tangshuang.net生命周期我没考虑进来。因此，我们要实现的【未经授权禁止转载】未经授权，禁止复制转载。，就是上面这些内容，一个一个实现就好了。

HTML字符串模板转Virtual DO【版权所有】唐霜 www.tangshuang.net【作者：唐霜】M

【访问 www.tangshuang.net 获取更多精彩内容】本文作者：唐霜，转载请注明出处。本文版权归作者所有，未经授权不得转载。【原创不易，请尊重版权】【作者：唐霜】

在写HTMLStringParser时，【作者：唐霜】本文作者：唐霜，转载请注明出处。利用htmlparser2去解析html本文作者：唐霜，转载请注明出处。【版权所有】唐霜 www.tangshuang.net的原理已经说过了，如果不懂，可以在文章开本文版权归作者所有，未经授权不得转载。【版权所有，侵权必究】头的链接中找到答案。但是，我们还要解决三本文作者：唐霜，转载请注明出处。【转载请注明来源】个问题：1. 插值；2. 事件绑定；3.未经授权，禁止复制转载。【原创内容，转载请注明出处】 for和if。

插值【本文受版权保护】

插值其实比较好解决，无非是字符串匹配替换【本文受版权保护】原创内容，盗版必究。。我采用了双大括号作为插值标记，在字符串本文作者：唐霜，转载请注明出处。本文版权归作者所有，未经授权不得转载。模板的任何位置都可以使用，但是应该注意几【本文首发于唐霜的博客】未经授权，禁止复制转载。个点：

【关注微信公众号：wwwtangshuangnet】原创内容，盗版必究。【原创不易，请尊重版权】【原创不易，请尊重版权】原创内容，盗版必究。

插值代表变量，因此最好只用在属性值（除i【原创不易，请尊重版权】原创内容，盗版必究。d和key两个属性外）和文本中

转载请注明出处：www.tangshuang.net

【转载请注明来源】

【本文受版权保护】

插值只能是字符串或数字，不能是array【本文首发于唐霜的博客】转载请注明出处：www.tangshuang.net或object

本文作者：唐霜，转载请注明出处。

【转载请注明来源】

本文作者：唐霜，转载请注明出处。

著作权归作者所有，禁止商业用途转载。

插值结果是在html字符串转换为VNod【本文首发于唐霜的博客】原创内容，盗版必究。e之前就已经完成了，VNode中不存在插转载请注明出处：www.tangshuang.net【未经授权禁止转载】值

著作权归作者所有，禁止商业用途转载。

【作者：唐霜】

本文版权归作者所有，未经授权不得转载。

我们来看一段实例：【关注微信公众号：wwwtangshuangnet】

<div id="my-test" class="{{myClass}}">{{myText}}</div>

插值从哪里来呢？所以，我们要在实例化Cl【作者：唐霜】【未经授权禁止转载】ass的时候，把插值对应的真实值都传进来转载请注明出处：www.tangshuang.net【本文受版权保护】，所以，我规定了一个data选项，实例化【本文受版权保护】【原创不易，请尊重版权】的时候应该：

本文作者：唐霜，转载请注明出处。原创内容，盗版必究。【访问 www.tangshuang.net 获取更多精彩内容】

new VirtualDOM({
  template: `<div id="my-test" class="{{myClass}}">{{myText}}</div>`,
  data: {
    myClass: 'class1 class2',
    myText: 'this is a text',
  },
})

这是初始化信息，传进来之后，后面还可以通转载请注明出处：www.tangshuang.net【转载请注明来源】过update方法去改数据来修改界面。而【未经授权禁止转载】【关注微信公众号：wwwtangshuangnet】这个效果，跟Vue的感觉有点像，但是Vu【转载请注明来源】【未经授权禁止转载】e是把整个component实现了，我这【本文受版权保护】【作者：唐霜】里只实现Virtual DOM。

那么从代码层面怎么实现插值呢？下面来看代转载请注明出处：www.tangshuang.net【转载请注明来源】码。

先定义一个函数，用来替换插值：【原创不易，请尊重版权】

本文版权归作者所有，未经授权不得转载。未经授权，禁止复制转载。本文版权归作者所有，未经授权不得转载。【作者：唐霜】

let interpose = (str, key, value) => {
  if (typeof str !== 'string') {
    return str
  }
  if (str.indexOf('{{') > -1 && str.indexOf('}}')) {
    let reg = new RegExp('\{\{' + key + '\}\}', 'g')
    str = str.replace(reg, value)
  }
  return str
}

这个函数的使用方法非常简单，str就是字【访问 www.tangshuang.net 获取更多精彩内容】原创内容，盗版必究。符串模板，key就是插值字符串，valu【未经授权禁止转载】本文版权归作者所有，未经授权不得转载。e就是插值字符串对应的值。有了这个函数之著作权归作者所有，禁止商业用途转载。【原创不易，请尊重版权】后，我们只需要遍历我们所有的插值预设项，【关注微信公众号：wwwtangshuangnet】【关注微信公众号：wwwtangshuangnet】也就是data，如果data中有对应的k【版权所有，侵权必究】未经授权，禁止复制转载。ey，那么key就会被替换为value。

转载请注明出处：www.tangshuang.net【关注微信公众号：wwwtangshuangnet】【原创不易，请尊重版权】著作权归作者所有，禁止商业用途转载。

// data是我们前面提到的，传入的data数据对象，template就是字符串模板
let dataKeys = Object.keys(data)
if (dataKeys.length) {
  dataKeys.forEach(key => {
    let value = data[key]
    template = interpose(template, key, value)
  })
}

这个处理在使用htmlparser2进行本文作者：唐霜，转载请注明出处。【原创不易，请尊重版权】解析前就可以先完成。

【转载请注明来源】未经授权，禁止复制转载。未经授权，禁止复制转载。原创内容，盗版必究。原创内容，盗版必究。

事件绑定本文作者：唐霜，转载请注明出处。

原创内容，盗版必究。【访问 www.tangshuang.net 获取更多精彩内容】原创内容，盗版必究。原创内容，盗版必究。【转载请注明来源】

首先是如何实现事件机制，请再翻看一下【原创内容，转载请注明出处】这里【原创不易，请尊重版权】，把事件绑定回dom元素的时候，我们从V【转载请注明来源】本文作者：唐霜，转载请注明出处。Node的events属性中取出事件的回本文版权归作者所有，未经授权不得转载。【版权所有】唐霜 www.tangshuang.net调函数。现在的问题是，我们希望在html未经授权，禁止复制转载。【版权所有，侵权必究】字符串模板中把事件记录进去，怎么办？我的本文作者：唐霜，转载请注明出处。【本文首发于唐霜的博客】解决方案是，使用特殊的{{:eventHandler}}插值表达式。用一个冒号区分和普通插值的不著作权归作者所有，禁止商业用途转载。【版权所有，侵权必究】同，有冒号的，表示事件插值，对应的是传入本文版权归作者所有，未经授权不得转载。【原创内容，转载请注明出处】的events的property名：

【本文受版权保护】未经授权，禁止复制转载。原创内容，盗版必究。

new VirtualDOM({
  template: `<a href="javascript:" onclick="{{:clickHandler}}">click</a>`,
  events: {
    clickHandler(e) {
      e.preventDefault()
    },
  },
})

当这样的规则建立之后，在createVi著作权归作者所有，禁止商业用途转载。【转载请注明来源】rtualDOM阶段，这个VNode的e【转载请注明来源】著作权归作者所有，禁止商业用途转载。vents中就会把click事件的值设置【转载请注明来源】本文版权归作者所有，未经授权不得转载。为clickHandler，而click未经授权，禁止复制转载。【版权所有】唐霜 www.tangshuang.netHandler是一个函数，可以在crea【本文首发于唐霜的博客】本文作者：唐霜，转载请注明出处。teElement中用来作为被绑定的回调著作权归作者所有，禁止商业用途转载。【本文受版权保护】函数。

本文版权归作者所有，未经授权不得转载。未经授权，禁止复制转载。【本文受版权保护】转载请注明出处：www.tangshuang.net本文作者：唐霜，转载请注明出处。

代码层面，怎么解决【原创不易，请尊重版权】{{:的识别呢？其实很简单，我不是通过未经授权，禁止复制转载。{{:进行识别的，而是通过属性名前缀是否为本文版权归作者所有，未经授权不得转载。on来识别。如果是on前缀的属性，说明这是一【未经授权禁止转载】【原创内容，转载请注明出处】个绑定，所以代码就如下操作：

let attrs = obj.attrs // obj实际上就是vnode
let attrKeys = Object.keys(attrs)
attrKeys.forEach(key => {
  let value = attrs[key]
  if (key.indexOf('on') === 0 && value.substring(0, 3) == '{{:' && value.substring(value.length - 2) == '}}') {
    let eventName = key.substring(2).toLowerCase()
    let eventCallbackName = value.substring(3, value.length - 2)
    obj.events[eventName] = this.events[eventCallbackName].bind(this)
    delete attrs[key]
  }
})
  
obj.attrs = attrs

这段代码是在创建VNode的函数crea【原创内容，转载请注明出处】【作者：唐霜】teVNode中的，这样的函数的结果，会著作权归作者所有，禁止商业用途转载。【本文首发于唐霜的博客】正好把事件相关的回调函数都保存起来，也就【访问 www.tangshuang.net 获取更多精彩内容】本文版权归作者所有，未经授权不得转载。是我们想象中的VNode结构。

本文版权归作者所有，未经授权不得转载。本文作者：唐霜，转载请注明出处。【关注微信公众号：wwwtangshuangnet】【关注微信公众号：wwwtangshuangnet】

@foreach循环【原创内容，转载请注明出处】

【本文首发于唐霜的博客】【作者：唐霜】【原创内容，转载请注明出处】【本文首发于唐霜的博客】

在很多模板引擎中，都有for循环，但是我【本文受版权保护】【版权所有】唐霜 www.tangshuang.net觉得，作为和DOM结合紧密的Virtua【版权所有】唐霜 www.tangshuang.net【本文受版权保护】l DOM，更多的是从数据中去循环，也就本文作者：唐霜，转载请注明出处。【关注微信公众号：wwwtangshuangnet】是根据数据不同，渲染不同结果。所以，我没【访问 www.tangshuang.net 获取更多精彩内容】【本文首发于唐霜的博客】有实现for，而是实现了foreach。本文作者：唐霜，转载请注明出处。【本文首发于唐霜的博客】foreach的目标是object，ar【未经授权禁止转载】著作权归作者所有，禁止商业用途转载。ray也是一种特殊的object，所以是【原创内容，转载请注明出处】转载请注明出处：www.tangshuang.net通用的。foreach的实现模型如下：

foreach(object, key, value) {
  // ...
}

传入一个object，它会把每一个key原创内容，盗版必究。【本文受版权保护】=>value在遍历中给出来。

原创内容，盗版必究。【原创内容，转载请注明出处】【本文受版权保护】

但是要在html模板中实现也有些让人苦恼【版权所有，侵权必究】【本文受版权保护】，vue的实现方式是在标签的属性里面加了【转载请注明来源】本文版权归作者所有，未经授权不得转载。一个for，但我是直接增加了一个<【版权所有】唐霜 www.tangshuang.net本文版权归作者所有，未经授权不得转载。@foreach>标签，标签内部的原创内容，盗版必究。本文版权归作者所有，未经授权不得转载。东西会被循环加载到结果中。

<@foreach target="items" key="i" value="v">
  <li>{{i}} {{v}}</li>
</@foreach>

target对应的是data的某个属性的【本文受版权保护】【本文首发于唐霜的博客】property name，用来获取数据本文作者：唐霜，转载请注明出处。本文作者：唐霜，转载请注明出处。，比如上面的items，实际上对应的是d本文版权归作者所有，未经授权不得转载。【本文受版权保护】ata.items。

【原创内容，转载请注明出处】【未经授权禁止转载】【转载请注明来源】转载请注明出处：www.tangshuang.net

代码层面怎么去实现呢？这个确实有点复杂，【原创不易，请尊重版权】【版权所有，侵权必究】它涉及到克隆的问题，也就是一个节点要反复本文作者：唐霜，转载请注明出处。转载请注明出处：www.tangshuang.net多次使用。而且，有一个难点，是htmlp本文版权归作者所有，未经授权不得转载。【访问 www.tangshuang.net 获取更多精彩内容】arser2解析的结果，会把<@f【版权所有，侵权必究】著作权归作者所有，禁止商业用途转载。oreach>作为一个正常的节点，【原创内容，转载请注明出处】【本文受版权保护】那么我们期望的父子关系就会被这个节点打乱【本文受版权保护】【作者：唐霜】，为了解决这个问题，我们还要处理还原为正【本文首发于唐霜的博客】【版权所有】唐霜 www.tangshuang.net常的节点关系，这个也比较难。

【本文受版权保护】【本文首发于唐霜的博客】【原创不易，请尊重版权】本文版权归作者所有，未经授权不得转载。

原创内容，盗版必究。原创内容，盗版必究。【原创内容，转载请注明出处】原创内容，盗版必究。

elements.forEach(vnode => {
  if (vnode.name === '@foreach') {
    let attrs = vnode.attrs
    let items = data[attrs.target]
    let key = attrs.key
    let value = attrs.value
    let children = vnode.children
    let childNodes = []
  
    if (items) {
      foreach(items, (i, item) => {
        children.forEach(child => {
          let node = {}
          foreach(child, (prop, value) => {
            node[prop] = value
          })
          node.text = interpose(node.text, key, i)
          node.text = interpose(node.text, value, item)
          foreach(node.attrs, (k, v) => {
            node.attrs[k] = interpose(v, key, i)
            node.attrs[k] = interpose(v, value, item)
          })
          node.id = node.attrs.id
          node.class = node.attrs.class ? node.attrs.class.split(' ') : []
          childNodes.push(node)
        })
      })
    }
  
    if (childNodes.length) {
      let parentChildren = vnode.parent ? vnode.parent.children : elements
      let i = parentChildren.indexOf(vnode)
      parentChildren.splice(i, 1, ...childNodes)
    }
  }
})

读过之前文章的同学知道，elements原创内容，盗版必究。原创内容，盗版必究。是包含所有html节点，扁平的数组，因此【版权所有】唐霜 www.tangshuang.net原创内容，盗版必究。遍历它，就可以实现全部节点的处理了。
本文作者：唐霜，转载请注明出处。【本文首发于唐霜的博客】通过修改parent属性，实现了节点提著作权归作者所有，禁止商业用途转载。【原创不易，请尊重版权】升，这样就不用担心@foreach打乱原【未经授权禁止转载】【版权所有，侵权必究】本设想的节点父子关系了。

本文版权归作者所有，未经授权不得转载。未经授权，禁止复制转载。【关注微信公众号：wwwtangshuangnet】

@if的实现本文作者：唐霜，转载请注明出处。

【关注微信公众号：wwwtangshuangnet】【关注微信公众号：wwwtangshuangnet】本文作者：唐霜，转载请注明出处。

和foreach一样，@if也是一个特殊【原创内容，转载请注明出处】【本文首发于唐霜的博客】标签，标签内部的内容根据标签condit【访问 www.tangshuang.net 获取更多精彩内容】本文作者：唐霜，转载请注明出处。ion属性值的运算结果来确定是否加入到V【版权所有，侵权必究】【原创不易，请尊重版权】Node中。当然，也存在节点父子关系的问本文作者：唐霜，转载请注明出处。【本文首发于唐霜的博客】题，但是实现起来就简单很多，因为不用考虑【访问 www.tangshuang.net 获取更多精彩内容】本文版权归作者所有，未经授权不得转载。循环克隆的问题。

else if (vnode.name === '@if') {
  let attrs = vnode.attrs
  let condition = attrs.condition
  let children = vnode.children
  let parentChildren = vnode.parent ? vnode.parent.children : elements
  let i = parentChildren.indexOf(vnode)
  if (eval(condition)) {
    parentChildren.splice(i, 1, ...children)
  }
  else {
    parentChildren.splice(i, 1)
  }
}

红色的eval是不太安全的一种操作，但是【本文首发于唐霜的博客】【本文首发于唐霜的博客】目前因为没有仔细思考如何自己实现一个运算原创内容，盗版必究。未经授权，禁止复制转载。器，所以暂且这样做，后期可以自己实现一个【本文首发于唐霜的博客】【原创内容，转载请注明出处】condition运算器来替代这里。

【转载请注明来源】【转载请注明来源】【转载请注明来源】

小结【作者：唐霜】

HTMLStringParser的实现帮【原创内容，转载请注明出处】原创内容，盗版必究。助我实现了基本的Virtual DOM的【版权所有】唐霜 www.tangshuang.net【作者：唐霜】创建问题，上面这四个小节则在前文的基础上未经授权，禁止复制转载。【未经授权禁止转载】，更加深入的实现了模板引擎的新功能。作为【未经授权禁止转载】本文版权归作者所有，未经授权不得转载。开发者，你想要完全搞定这块，读源码吧，所【关注微信公众号：wwwtangshuangnet】【本文受版权保护】有的源码都在createVirtualDOM转载请注明出处：www.tangshuang.net方法中。【作者：唐霜】

【转载请注明来源】原创内容，盗版必究。【本文受版权保护】

真实DOM元素的构建和渲染【本文受版权保护】

这个知识在【未经授权禁止转载】这里【关注微信公众号：wwwtangshuangnet】已经讲过了，也是非常容易实现的一个环节。转载请注明出处：www.tangshuang.net转载请注明出处：www.tangshuang.net无非是document.createEl【原创内容，转载请注明出处】本文版权归作者所有，未经授权不得转载。ement和appendChild之类的本文版权归作者所有，未经授权不得转载。转载请注明出处：www.tangshuang.net操作。最后得到一个真实的DOM元素，而且【版权所有】唐霜 www.tangshuang.net【关注微信公众号：wwwtangshuangnet】这个DOM元素还被绑定了事件（如果有的话未经授权，禁止复制转载。著作权归作者所有，禁止商业用途转载。）。

著作权归作者所有，禁止商业用途转载。【原创不易，请尊重版权】转载请注明出处：www.tangshuang.net【本文受版权保护】【本文首发于唐霜的博客】

除了我在createElement原来的【版权所有】唐霜 www.tangshuang.net【原创不易，请尊重版权】内容基础上，我还增加了一个工作，就是把一【版权所有，侵权必究】【关注微信公众号：wwwtangshuangnet】个VNode对应的element挂载到V本文作者：唐霜，转载请注明出处。【访问 www.tangshuang.net 获取更多精彩内容】Node的$element属性上，这样当【本文受版权保护】【关注微信公众号：wwwtangshuangnet】你想操作一个VNode对应的DOM元素时未经授权，禁止复制转载。【本文受版权保护】，就非常简单了，因为直接通过这个$ele原创内容，盗版必究。本文版权归作者所有，未经授权不得转载。ment属性，就可以找到它对应的真实DO本文版权归作者所有，未经授权不得转载。【原创不易，请尊重版权】M元素。当然，这也增加了风险，就是当你删【未经授权禁止转载】本文版权归作者所有，未经授权不得转载。除一个DOM元素时，应该把$elemen转载请注明出处：www.tangshuang.net本文版权归作者所有，未经授权不得转载。t的引用也删除，不然会造成内存泄露问题。

总之，还原真实DOM的这部分内容相对来说【作者：唐霜】【版权所有】唐霜 www.tangshuang.net还是比较简单的。具体的源码可以在这里本文作者：唐霜，转载请注明出处。阅读。而渲染到文档界面中就更简单，直接使【转载请注明来源】【本文受版权保护】用DOM元素的操作方法即可实现。但是在渲原创内容，盗版必究。【转载请注明来源】染之前，应该用innerHTML = ''将内部文档置空。【转载请注明来源】

【原创不易，请尊重版权】转载请注明出处：www.tangshuang.net【本文首发于唐霜的博客】

用数据更新界面【本文受版权保护】

这可是Virtual DOM的重头戏，在本文作者：唐霜，转载请注明出处。【版权所有】唐霜 www.tangshuang.net大部分文献中只会讲diff和patch，本文版权归作者所有，未经授权不得转载。著作权归作者所有，禁止商业用途转载。不会告诉你数据进入Virtual DOM原创内容，盗版必究。本文作者：唐霜，转载请注明出处。到界面输出的过程是怎么做到的。diff和原创内容，盗版必究。【未经授权禁止转载】patch我会单独拿出来讲，因此，这里主【本文首发于唐霜的博客】【作者：唐霜】要是梳理数据进入到界面输出的逻辑过程。

未经授权，禁止复制转载。【关注微信公众号：wwwtangshuangnet】未经授权，禁止复制转载。【访问 www.tangshuang.net 获取更多精彩内容】【本文受版权保护】

其实这个逻辑过程也超级简单：【作者：唐霜】

转载请注明出处：www.tangshuang.net原创内容，盗版必究。【本文首发于唐霜的博客】

传入新数据未经授权，禁止复制转载。

【访问 www.tangshuang.net 获取更多精彩内容】

重新获得一份新的Virtual DOM，原创内容，盗版必究。【版权所有，侵权必究】而新的Virtual DOM是根据传入的未经授权，禁止复制转载。著作权归作者所有，禁止商业用途转载。新数据和老数据merge之后，利用插值机未经授权，禁止复制转载。【版权所有】唐霜 www.tangshuang.net制得到的，因此插值不同，得到的Virtu【本文受版权保护】未经授权，禁止复制转载。al DOM可能就不同

【访问 www.tangshuang.net 获取更多精彩内容】

【原创内容，转载请注明出处】

本文作者：唐霜，转载请注明出处。

本文版权归作者所有，未经授权不得转载。

【关注微信公众号：wwwtangshuangnet】

既然可能不同，那么就要找出不同的地方，利【版权所有】唐霜 www.tangshuang.net本文版权归作者所有，未经授权不得转载。用一个diff算法，把所有不同的地方记录未经授权，禁止复制转载。本文版权归作者所有，未经授权不得转载。到一个patches的数组中

【原创内容，转载请注明出处】

【转载请注明来源】

转载请注明出处：www.tangshuang.net

本文版权归作者所有，未经授权不得转载。

遍历这个patches数组，每一个元素就【访问 www.tangshuang.net 获取更多精彩内容】著作权归作者所有，禁止商业用途转载。是我要进行的真实DOM的操作，操作完DO【版权所有】唐霜 www.tangshuang.net本文作者：唐霜，转载请注明出处。M之后，界面就发生了改变

著作权归作者所有，禁止商业用途转载。

【原创不易，请尊重版权】

在这整个逻辑过程中，一定要注意js这门语转载请注明出处：www.tangshuang.net【版权所有】唐霜 www.tangshuang.net言的一些特性，特别是object是引用型【访问 www.tangshuang.net 获取更多精彩内容】转载请注明出处：www.tangshuang.net数据类型的这一特性，如果不处理好，就会存【版权所有】唐霜 www.tangshuang.net【版权所有，侵权必究】在很多bug。

你可以看我写的原创内容，盗版必究。udpate方法【未经授权禁止转载】，超级简单的几行代码。【访问 www.tangshuang.net 获取更多精彩内容】

本文作者：唐霜，转载请注明出处。【转载请注明来源】【转载请注明来源】

diff算法【作者：唐霜】

重头戏中的重头戏，diff算法消耗了我整【作者：唐霜】本文版权归作者所有，未经授权不得转载。个写作最多的时间，我查阅了网上很多资料，转载请注明出处：www.tangshuang.net原创内容，盗版必究。还看了github上几个知名的Virtu转载请注明出处：www.tangshuang.net【访问 www.tangshuang.net 获取更多精彩内容】al DOM库的源代码，发现他们都是将d【原创不易，请尊重版权】【版权所有】唐霜 www.tangshuang.netiff和patch紧密的融合在一起，我希【本文受版权保护】【原创内容，转载请注明出处】望写一个独立的diff算法的函数，这个函本文版权归作者所有，未经授权不得转载。【本文受版权保护】数得到patches，但不执行patch【版权所有】唐霜 www.tangshuang.net【本文首发于唐霜的博客】的任何操作。最终的代码在这里【转载请注明来源】。未经授权，禁止复制转载。

关于React标准的diff算法，这里就转载请注明出处：www.tangshuang.net【关注微信公众号：wwwtangshuangnet】不去深究了，毕竟React的diff算法【版权所有，侵权必究】本文作者：唐霜，转载请注明出处。还要考虑component内嵌compo本文作者：唐霜，转载请注明出处。【版权所有】唐霜 www.tangshuang.netnent的情况，而我们现在不用考虑这种情【转载请注明来源】【作者：唐霜】况，因为我们是html字符串模板，所以，【版权所有】唐霜 www.tangshuang.net【版权所有】唐霜 www.tangshuang.net我们只需要考虑React标准diff中三转载请注明出处：www.tangshuang.net【原创不易，请尊重版权】种情况中的一种即可，Text组件和Com【访问 www.tangshuang.net 获取更多精彩内容】【关注微信公众号：wwwtangshuangnet】ponent组件我们都不考虑（虽然我们会【本文首发于唐霜的博客】转载请注明出处：www.tangshuang.net考虑如果一个元素只包含文本的情况）。

本文作者：唐霜，转载请注明出处。本文作者：唐霜，转载请注明出处。【原创不易，请尊重版权】

diff原则【访问 www.tangshuang.net 获取更多精彩内容】

本文版权归作者所有，未经授权不得转载。著作权归作者所有，禁止商业用途转载。本文版权归作者所有，未经授权不得转载。

我们只会涉及到React标准diff中有【本文受版权保护】本文作者：唐霜，转载请注明出处。关元素对比的部分。即主要遵循的规则如下：

【作者：唐霜】本文版权归作者所有，未经授权不得转载。著作权归作者所有，禁止商业用途转载。

逐层对比本文作者：唐霜，转载请注明出处。

本文版权归作者所有，未经授权不得转载。

【作者：唐霜】

【未经授权禁止转载】

【原创不易，请尊重版权】

同层的元素间对比【作者：唐霜】

【未经授权禁止转载】

本文版权归作者所有，未经授权不得转载。

【本文受版权保护】

【作者：唐霜】

什么意思呢？就是在老的VNode和新的V著作权归作者所有，禁止商业用途转载。【未经授权禁止转载】Node中，先比较顶层的元素，顶层的元素【访问 www.tangshuang.net 获取更多精彩内容】【原创内容，转载请注明出处】相同，再对比下层，如果顶层的不同，直接不本文作者：唐霜，转载请注明出处。【版权所有，侵权必究】用比下层了。而在同一层中，会存在多个元素【原创不易，请尊重版权】【原创内容，转载请注明出处】，怎么确定每一个位置的元素是否是相同的，【未经授权禁止转载】【作者：唐霜】或者位置发生了变化，这是一个极度困难的问原创内容，盗版必究。原创内容，盗版必究。题。

【原创内容，转载请注明出处】本文版权归作者所有，未经授权不得转载。未经授权，禁止复制转载。【本文受版权保护】【关注微信公众号：wwwtangshuangnet】

确定元素是否是同一个元素原创内容，盗版必究。

在老的VNode和新的VNode中，有这本文作者：唐霜，转载请注明出处。【作者：唐霜】么一层存在一些节点，如图：
【本文受版权保护】【关注微信公众号：wwwtangshuangnet】
原创内容，盗版必究。未经授权，禁止复制转载。现在我们假定要比较第二层的元素，那么我【关注微信公众号：wwwtangshuangnet】【本文受版权保护】们能否确定A1和B1代表的是同一个元素呢【版权所有】唐霜 www.tangshuang.net【作者：唐霜】？我们来举一个实际代码的例子：

【原创内容，转载请注明出处】本文作者：唐霜，转载请注明出处。【本文受版权保护】【原创不易，请尊重版权】著作权归作者所有，禁止商业用途转载。

A:<div class="class1">...</div><div class="class2">...</div><div class="class3">...</div>
B:<div class="class1">...</div><div class="class2">...</div><div class="class3">...</div>

我们能确定A1和B1是同一个元素吗？其实【访问 www.tangshuang.net 获取更多精彩内容】【关注微信公众号：wwwtangshuangnet】是不能的。但是下面这种情况我们就能确定：

【本文首发于唐霜的博客】【转载请注明来源】【原创内容，转载请注明出处】【访问 www.tangshuang.net 获取更多精彩内容】

A:<div id="my-test" class="class1">...</div><div class="class2">...</div><div class="class3">...</div>
B:<div id="my-test" class="class1">...</div><div class="class2">...</div><div class="class3">...</div>

因为在我们的文档中，我们一般会保证一个i原创内容，盗版必究。【原创内容，转载请注明出处】d只存在一个元素，所以两个VNode中，本文作者：唐霜，转载请注明出处。原创内容，盗版必究。如果存在id相等的情况，我们基本可以确定本文作者：唐霜，转载请注明出处。本文作者：唐霜，转载请注明出处。他们是同一个元素。当然，如果把id属性用【访问 www.tangshuang.net 获取更多精彩内容】【原创内容，转载请注明出处】插值来表示，那就坑了。

因此，我们根本无法做到完全判断节点是否是本文版权归作者所有，未经授权不得转载。【转载请注明来源】同一个，我们只能通过比较一些基本特征来确原创内容，盗版必究。【转载请注明来源】定。当然，我们学习React中的做法，声著作权归作者所有，禁止商业用途转载。【访问 www.tangshuang.net 获取更多精彩内容】明一个key属性，如果key属性相等，那【转载请注明来源】【本文首发于唐霜的博客】么这两个节点肯定是指同一个元素。

【原创不易，请尊重版权】【关注微信公众号：wwwtangshuangnet】本文作者：唐霜，转载请注明出处。本文作者：唐霜，转载请注明出处。

在这种模糊状态下，我们采用比较理想化的解【本文首发于唐霜的博客】【作者：唐霜】决方法：当一个VNode和另外一个VNo【关注微信公众号：wwwtangshuangnet】【作者：唐霜】de的name、attrs的属性名都相等【访问 www.tangshuang.net 获取更多精彩内容】【访问 www.tangshuang.net 获取更多精彩内容】时，我们认为它们是指同一个元素。

本文版权归作者所有，未经授权不得转载。未经授权，禁止复制转载。【作者：唐霜】【作者：唐霜】

虽然从理论上讲，这是非常不严谨的，但是从本文版权归作者所有，未经授权不得转载。【版权所有，侵权必究】实践的角度看，这样做把问题简单化。因为如【本文首发于唐霜的博客】【原创不易，请尊重版权】果一个html的属性列表比较复杂的话，这转载请注明出处：www.tangshuang.net本文作者：唐霜，转载请注明出处。种方法可以非常容易区分不同的元素。而如果著作权归作者所有，禁止商业用途转载。【作者：唐霜】最坏的情况出现，也就是标签没有任何属性，【原创不易，请尊重版权】【未经授权禁止转载】那么我也认为它们是同一个元素，只不过他们【原创不易，请尊重版权】【本文受版权保护】的children可能变了而已。

还要考虑到，如果一个元素直接包含文本，那【访问 www.tangshuang.net 获取更多精彩内容】著作权归作者所有，禁止商业用途转载。么它和另外一个包含子节点的元素肯定是不同【原创内容，转载请注明出处】【本文受版权保护】的元素。
本文作者：唐霜，转载请注明出处。本文版权归作者所有，未经授权不得转载。因此，我写了一个函数来决定这个元素的身【原创不易，请尊重版权】转载请注明出处：www.tangshuang.net份：

function identify(vnode) {
  if (vnode.attrs.key) {
    return vnode.name + ':' + vnode.attrs.key
  }
  return vnode.name + ':' + Object.keys(vnode.attrs).join(',') + '|' + !!vnode.text
}

当来自新老Virtual DOM的两个V【原创不易，请尊重版权】未经授权，禁止复制转载。Node经过计算得到相同的identit转载请注明出处：www.tangshuang.net未经授权，禁止复制转载。y之后，就认为他们是相同的元素。

本文作者：唐霜，转载请注明出处。未经授权，禁止复制转载。【原创内容，转载请注明出处】【作者：唐霜】

同级元素的diff【本文首发于唐霜的博客】

接下来，我们就要开始写同级元素的diff【作者：唐霜】著作权归作者所有，禁止商业用途转载。算法。在我们思考的过程中，应该由简入难，【本文首发于唐霜的博客】【本文首发于唐霜的博客】先把简单的情况处理掉，然后再处理复杂的情【关注微信公众号：wwwtangshuangnet】【本文受版权保护】况。因此，我的做法如下：

本文作者：唐霜，转载请注明出处。【本文首发于唐霜的博客】著作权归作者所有，禁止商业用途转载。

先把新老节点列表的identity算出来本文作者：唐霜，转载请注明出处。著作权归作者所有，禁止商业用途转载。：

let oldIdentifies = oldNodes.map(vnode => identify(vnode)) 
let newIdentifies = newNodes.map(vnode => identify(vnode))

这样可以知道，在新的DOM中，哪些老节点本文作者：唐霜，转载请注明出处。【访问 www.tangshuang.net 获取更多精彩内容】被删除了：

转载请注明出处：www.tangshuang.net【访问 www.tangshuang.net 获取更多精彩内容】原创内容，盗版必究。转载请注明出处：www.tangshuang.net

oldIdentifies.forEach((id, i) => {
  let oldNode = oldNodes[i]
  if (newIdentifies.indexOf(id) === -1) {
    patches.push(makePatch('remove', oldNode))
  }
  else {
    ...
  }
})

【本文首发于唐霜的博客】【本文首发于唐霜的博客】【未经授权禁止转载】

接下来，我们去遍历新节点列表，每遍历到一【本文首发于唐霜的博客】转载请注明出处：www.tangshuang.net个，就用它去和老节点中（被删除后剩余的节【版权所有】唐霜 www.tangshuang.net【关注微信公众号：wwwtangshuangnet】点列表）这个位置上的节点是不是同一个节点著作权归作者所有，禁止商业用途转载。著作权归作者所有，禁止商业用途转载。，如果是，那么就保持不动，进入child未经授权，禁止复制转载。【未经授权禁止转载】ren层级的比较：

本文版权归作者所有，未经授权不得转载。【未经授权禁止转载】本文版权归作者所有，未经授权不得转载。【原创内容，转载请注明出处】

if (id === targetIndentity) {
  patches = patches.concat(diffSameNodes(targetNode, newNode))
}

diffSameNodes函数就是去对比著作权归作者所有，禁止商业用途转载。【本文首发于唐霜的博客】相同节点，这个函数内会去对比文本、att著作权归作者所有，禁止商业用途转载。著作权归作者所有，禁止商业用途转载。ributes属性、以及children【原创不易，请尊重版权】著作权归作者所有，禁止商业用途转载。，当进入到children之后，其实又是本文作者：唐霜，转载请注明出处。【原创不易，请尊重版权】同一层的对比，所以是一个递归。后文会讲文【关注微信公众号：wwwtangshuangnet】【本文受版权保护】本和attrs的对比。

【未经授权禁止转载】【未经授权禁止转载】【本文受版权保护】

接下来，我们要考虑一种情况，那就是遍历到著作权归作者所有，禁止商业用途转载。未经授权，禁止复制转载。的新节点的identity在老节点列表里【访问 www.tangshuang.net 获取更多精彩内容】【关注微信公众号：wwwtangshuangnet】找到了，但是不在当前对比的这个位置上，那本文作者：唐霜，转载请注明出处。本文作者：唐霜，转载请注明出处。么说明这个节点位置发生了改变。

本文作者：唐霜，转载请注明出处。【关注微信公众号：wwwtangshuangnet】【本文受版权保护】转载请注明出处：www.tangshuang.net

let foundPosition = findIndentityIndex(id, finalIdentities, cursor)
...
else if (foundPosition !== -1) {
  let oldNode = finalNodes[foundPosition]
  let oldIndentity = finalIdentities[foundPosition]
  patches.push(makePatch('move', targetNode, oldNode))
  ...
}

findIndentityIndex是一【本文首发于唐霜的博客】转载请注明出处：www.tangshuang.net个用来找到老节点所在位置的函数，它内部要转载请注明出处：www.tangshuang.net【原创不易，请尊重版权】考虑一种情况，就是排除以前已经对比过的节【未经授权禁止转载】【访问 www.tangshuang.net 获取更多精彩内容】点，所以第三个参数cursor就是用来记【关注微信公众号：wwwtangshuangnet】著作权归作者所有，禁止商业用途转载。录要从哪个位置开始往后找。

【原创不易，请尊重版权】【访问 www.tangshuang.net 获取更多精彩内容】著作权归作者所有，禁止商业用途转载。【访问 www.tangshuang.net 获取更多精彩内容】【转载请注明来源】

【转载请注明来源】【原创不易，请尊重版权】未经授权，禁止复制转载。著作权归作者所有，禁止商业用途转载。

  // not exists, insert
  else if (i < finalIdentities.length) {
    patches.push(makePatch('insert', targetNode, newNode))
    ...
  }
  // not exists, append
  else {
    patches.push(makePatch('append', parentNode, newNode))
    ...
  }

这样就解决了几乎所有情况。剩下的就是实现本文版权归作者所有，未经授权不得转载。【原创内容，转载请注明出处】diffSameNodes。

【关注微信公众号：wwwtangshuangnet】未经授权，禁止复制转载。【本文受版权保护】本文版权归作者所有，未经授权不得转载。

if (oldNode.text !== newNode.text) {
  patches.push(makePatch('changeText', oldNode, newNode.text))
}

attrs变的话，要相对复杂一点，要做一【转载请注明来源】【本文首发于唐霜的博客】个遍历：

著作权归作者所有，禁止商业用途转载。【原创不易，请尊重版权】未经授权，禁止复制转载。

function diffAttributes(oldNode, newNode) {
  let patches = []
  let oldAttrs = oldNode.attrs
  let newAttrs = newNode.attrs
  let keys = Object.keys(newAttrs)
  if (keys.length) {
    keys.forEach(key => {
      let oldValue = oldAttrs[key]
      let newVaule = newAttrs[key]
      if (oldValue !== newVaule) {
        patches.push({
          key,
          value: newVaule,
        })
      }
    })
  }
  return patches
}
let attrsPatches = diffAttributes(oldNode, newNode)
if (attrsPatches.length) {
  patches = patches.push(makePatch('changeAttribute', oldNode, attrsPatches))
}

最后是children，实际上，就是进入著作权归作者所有，禁止商业用途转载。【未经授权禁止转载】到下一层的diff算法。直接使用diff【未经授权禁止转载】转载请注明出处：www.tangshuang.net函数去比较就可以了，就是一个递归罢了。

小结【原创内容，转载请注明出处】

原创内容，盗版必究。【作者：唐霜】【原创内容，转载请注明出处】著作权归作者所有，禁止商业用途转载。【关注微信公众号：wwwtangshuangnet】

整体的逻辑就这些，和React标准dif【作者：唐霜】【作者：唐霜】f存在差异，性能上存在不足，在一些特殊情【原创内容，转载请注明出处】【版权所有，侵权必究】况下，可能一次性更新大片的DOM。但是，【作者：唐霜】【原创不易，请尊重版权】自己手撸能够做出来，我已经很欣慰了。当然【本文受版权保护】【本文首发于唐霜的博客】，这里的只是思路，具体的全部代码，还是要【版权所有】唐霜 www.tangshuang.net转载请注明出处：www.tangshuang.net去看GitHub，看着点列出来的代码完全【作者：唐霜】【版权所有】唐霜 www.tangshuang.net没意义。

【原创不易，请尊重版权】【访问 www.tangshuang.net 获取更多精彩内容】转载请注明出处：www.tangshuang.net

patch算法【访问 www.tangshuang.net 获取更多精彩内容】

【转载请注明来源】本文版权归作者所有，未经授权不得转载。【本文受版权保护】【本文首发于唐霜的博客】原创内容，盗版必究。

说算法根本谈不上，patch操作其实就是【作者：唐霜】【转载请注明来源】从diff中拿到patches变量，然后转载请注明出处：www.tangshuang.net【访问 www.tangshuang.net 获取更多精彩内容】根据变量中的元素进行遍历，对dom进行操转载请注明出处：www.tangshuang.net【未经授权禁止转载】作，仅此而已。代码在这里【作者：唐霜】，你可以自己看下，真的很少，就是一个sw【未经授权禁止转载】转载请注明出处：www.tangshuang.netitch。

【关注微信公众号：wwwtangshuangnet】转载请注明出处：www.tangshuang.net本文版权归作者所有，未经授权不得转载。本文作者：唐霜，转载请注明出处。

但是有一个点需要注意，就是在remove转载请注明出处：www.tangshuang.net未经授权，禁止复制转载。的时候，一定要将$element和$vn未经授权，禁止复制转载。【原创内容，转载请注明出处】ode的引用清除，否则会造成内存问题。

总结本文作者：唐霜，转载请注明出处。

【未经授权禁止转载】【关注微信公众号：wwwtangshuangnet】本文作者：唐霜，转载请注明出处。

整个Virtual DOM的手撸过程大致著作权归作者所有，禁止商业用途转载。【原创不易，请尊重版权】就是这样，可能有很多细节你还是不懂，你可【版权所有】唐霜 www.tangshuang.net【未经授权禁止转载】以在本文下方留言，或者在GitHub上提【本文受版权保护】转载请注明出处：www.tangshuang.netissue。实际上，讲这么多，重要的还是原创内容，盗版必究。【未经授权禁止转载】在html字符串转VNode和diff这未经授权，禁止复制转载。本文版权归作者所有，未经授权不得转载。两部分，而且目前来看，都有可以改进，真的著作权归作者所有，禁止商业用途转载。【本文首发于唐霜的博客】是短板在哪里哪里被谈的最多。

著作权归作者所有，禁止商业用途转载。本文版权归作者所有，未经授权不得转载。未经授权，禁止复制转载。未经授权，禁止复制转载。

另外需要强调的是，这真的是一个Virtu著作权归作者所有，禁止商业用途转载。著作权归作者所有，禁止商业用途转载。al DOM的独立库，它不包含生命周期函【原创内容，转载请注明出处】【版权所有，侵权必究】数，但是已经具备了应有的功能。作为开发者转载请注明出处：www.tangshuang.net【原创不易，请尊重版权】，可以用它去进行封装，实现类似React原创内容，盗版必究。【本文首发于唐霜的博客】 Component的部分功能，但是如何【原创内容，转载请注明出处】【作者：唐霜】实现在template中加入compon著作权归作者所有，禁止商业用途转载。转载请注明出处：www.tangshuang.netent，还需要再深入思考。无论如何，自己本文作者：唐霜，转载请注明出处。【版权所有，侵权必究】手撸一个总能学到东西，我是实践派，不轻易【关注微信公众号：wwwtangshuangnet】【作者：唐霜】在没有自己撸过的情况下说“这个实践不行”未经授权，禁止复制转载。【关注微信公众号：wwwtangshuangnet】这样的话。

原创内容，盗版必究。【本文受版权保护】本文作者：唐霜，转载请注明出处。转载请注明出处：www.tangshuang.net

著作权归作者所有，禁止商业用途转载。著作权归作者所有，禁止商业用途转载。本文版权归作者所有，未经授权不得转载。【作者：唐霜】【版权所有，侵权必究】【本文受版权保护】原创内容，盗版必究。【版权所有，侵权必究】原创内容，盗版必究。【作者：唐霜】原创内容，盗版必究。【本文首发于唐霜的博客】【本文受版权保护】本文作者：唐霜，转载请注明出处。原创内容，盗版必究。原创内容，盗版必究。【作者：唐霜】【版权所有，侵权必究】原创内容，盗版必究。【未经授权禁止转载】【访问 www.tangshuang.net 获取更多精彩内容】转载请注明出处：www.tangshuang.net【转载请注明来源】未经授权，禁止复制转载。【原创内容，转载请注明出处】【本文受版权保护】【版权所有，侵权必究】未经授权，禁止复制转载。著作权归作者所有，禁止商业用途转载。本文版权归作者所有，未经授权不得转载。【未经授权禁止转载】原创内容，盗版必究。【访问 www.tangshuang.net 获取更多精彩内容】【转载请注明来源】著作权归作者所有，禁止商业用途转载。【原创不易，请尊重版权】【版权所有】唐霜 www.tangshuang.net【转载请注明来源】转载请注明出处：www.tangshuang.net【未经授权禁止转载】【作者：唐霜】原创内容，盗版必究。【关注微信公众号：wwwtangshuangnet】【原创不易，请尊重版权】本文版权归作者所有，未经授权不得转载。本文版权归作者所有，未经授权不得转载。【访问 www.tangshuang.net 获取更多精彩内容】【原创不易，请尊重版权】【本文首发于唐霜的博客】【版权所有，侵权必究】【本文首发于唐霜的博客】未经授权，禁止复制转载。【作者：唐霜】本文版权归作者所有，未经授权不得转载。【原创不易，请尊重版权】【未经授权禁止转载】

2017-09-17 6616 React, Virtual DOM

唐霜

回敬尾巴是阿里的某资深：手撸一个基于html字符串模板的Virtual DOM

整体思路【未经授权禁止转载】

HTML字符串模板转Virtual DO【版权所有】唐霜 www.tangshuang.net【作者：唐霜】M

插值【本文受版权保护】

事件绑定本文作者：唐霜，转载请注明出处。

@foreach循环【原创内容，转载请注明出处】

@if的实现本文作者：唐霜，转载请注明出处。

小结【作者：唐霜】

真实DOM元素的构建和渲染【本文受版权保护】

用数据更新界面【本文受版权保护】

diff算法【作者：唐霜】

diff原则【访问 www.tangshuang.net 获取更多精彩内容】

确定元素是否是同一个元素原创内容，盗版必究。

同级元素的diff【本文首发于唐霜的博客】

小结【原创内容，转载请注明出处】

patch算法【访问 www.tangshuang.net 获取更多精彩内容】

总结本文作者：唐霜，转载请注明出处。

为价值买单，打赏一杯咖啡

声明

关于

生态