为了更好的研究Virtual DOM，我选择了snabbdom来学习。相比Vue来说，snabbdom对于研究虚拟DOM更好，因为它里面没有其他干扰的东西，而且源码也比较少，因此研究起来更方便。

1. 初次体验虚拟DOM的魅力

首先我们先用snabbdom重写之前的例子：

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <meta http-equiv="X-UA-Compatible" content="ie=edge">

  <title>Document</title>

</head>

<body>

  <div id="container"></div>

  <button id="btn-change">change</button>

  <script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.4.0/jquery.min.js"></script>

  <!-- 引入snabbdom相关库 -->

  <script src="https://cdn.bootcss.com/snabbdom/0.7.3/snabbdom.js"></script>

  <script src="https://cdn.bootcss.com/snabbdom/0.7.3/snabbdom-class.js"></script>

  <script src="https://cdn.bootcss.com/snabbdom/0.7.3/snabbdom-props.js"></script>

  <script src="https://cdn.bootcss.com/snabbdom/0.7.3/snabbdom-style.js"></script>

  <script src="https://cdn.bootcss.com/snabbdom/0.7.3/snabbdom-eventlisteners.js"></script>

  <script src="https://cdn.bootcss.com/snabbdom/0.7.3/h.js"></script>

  <script type="text/javascript">

    var snabbdom = window.snabbdom;

    //init patch function

    var patch = snabbdom.init([

      snabbdom_class,

      snabbdom_props,

      snabbdom_style,

      snabbdom_eventlisteners

    ]);

    // 定义h函数

    var h = snabbdom.h;

    var container = document.getElementById('container');

    var data = [{

      name: "张三",

      age: 24,

      address: "深圳"

      }, {

      name: "张三",

      age: 24,

      address: "深圳"

      }, {

      name: "张三",

      age: 24,

      address: "深圳"

    }];

    var oldVnode;

    function render(data) {

      var vnode = h('ul#list', {}, data.map(function (item) {

        return h('li', {}, item.name+' '+item.age+' '+item.address)

      }))

      if (!oldVnode) {

        //初始化页面渲染

        patch(container, vnode);

      } else {

        //对比原来的vnode和新生成的vnewnode,找出差异,只渲染修改的部分

        patch(oldVnode, vnode);

      }

      oldVnode = vnode;

    }

    $('#btn-change').click(function () {

      data[1].name = '李四';

      data[2].name = '王五';

      //修改后重新渲染

      render(data);

    })

    render(data); //初始化页面渲染

  </script>

</body>

</html>

　　

点击change,发现只修改了有差异的地方。对比之前jquery清空整个div,性能上有很大提升，特别是在复杂应用上。

2. 实现原理

通过上面snabbdom的例子，我们发现有两个核心的API:

1. h函数（将真实dom映射成虚拟节点）；

h('<html 标签名>'，{属性}，[children])//含有子节点的

h('<html 标签名>'，{属性}，'text'])//没有子节点，只有文本，如<p>this is VN</p>

2. patch函数（通过对比新旧虚拟节点，找出差异（diff算法），再把这些变化更新到真实dom中）

patch(container, vnode)//初次渲染

patch(oldVnode, newVnode); //re-render

Virtual DOM 系列二：核心API的更多相关文章

  1. 一步一步带你实现virtual dom（二) -- Props和事件

    很高兴我们可以继续分享编写虚拟DOM的知识.这次我们要讲解的是产品级的内容,其中包括:设置和DOM一致性.以及事件的处理. 使用Babel 在继续之前,我们需要弥补前一篇文章中没有详细讲解的内容.假设 ...

  2. Virtual DOM 系列三：Diff算法

    DOM操作是昂贵的,为了减少DOM操作,才有了Virtual DOM.而Virtual DOM的关键就是通过对比新旧vnode,找出差异部分来更新节点.对比的关键算法就是Diff算法. 历史由来: d ...

  3. Virtual DOM 系列一：认识虚拟DOM

    1. 什么是Virtual DOM? Virtual DOM(虚拟DOM)是指用JS模拟DOM结构.本质上来讲VD是一个JS对象,并且至少包含三个属性:tag(html标签),props(标签的属性, ...

  4. 分布式消息队列kafka系列介绍 — 核心API介绍及实例

    原文地址:http://www.inter12.org/archives/834 一 PRODUCER的API 1.Producer的创建,依赖于ProducerConfig public Produ ...

  5. 深度剖析：如何实现一个 Virtual DOM 算法

    本文转载自:https://github.com/livoras/blog/issues/13 目录: 1 前言 2 对前端应用状态管理思考 3 Virtual DOM 算法 4 算法实现 4.1 步 ...

  6. Virtual DOM 算法

    前端 virtual-dom react.js javascript 目录: 1 前言 2 对前端应用状态管理思考 3 Virtual DOM 算法 4 算法实现 4.1 步骤一:用JS对象模拟DOM ...

  7. 深度理解 Virtual DOM

    目录: 1 前言 2 技术发展史 3 Virtual DOM 算法 4 Virtual DOM 实现 5 Virtual DOM 树的差异(Diff算法) 6 结语 7 参考链接 1 前言 我会尽量把 ...

  8. 实现一个 Virtual DOM 算法

    1 前言 本文会在教你怎么用 300~400 行代码实现一个基本的 Virtual DOM 算法,并且尝试尽量把 Virtual DOM 的算法思路阐述清楚.希望在阅读本文后,能让你深入理解 Virt ...

  9. Virtual DOM 虚拟DOM的理解(转)

    作者:戴嘉华 转载请注明出处并保留原文链接( #13 )和作者信息. 目录: 1 前言 2 对前端应用状态管理思考 3 Virtual DOM 算法 4 算法实现 4.1 步骤一:用JS对象模拟DOM ...

随机推荐

  1. 搞懂Redis RDB和AOF持久化及工作原理

    前言 因为Redis的数据都储存在内存中,当进程退出时,所有数据都将丢失.为了保证数据安全,Redis支持RDB和AOF两种持久化机制有效避免数据丢失问题.RDB可以看作在某一时刻Redis的快照(s ...

  2. 【转载】Sqlserver数据库中无自增Id的情况下使用ROW_NUMBER()函数进行数据分页

    在Sqlserver数据库中,如果查询表中含有自增长Id列,一般会采用select Top的方式来数据的分页操作.而实际上很多数据表设计的时候,不一定含有自增长Id列,那么数据库没有Id自增列的时候要 ...

  3. MySQL 笔记整理（16） --“order by”是怎么工作的？

    笔记记录自林晓斌(丁奇)老师的<MySQL实战45讲> (本篇内图片均来自丁奇老师的讲解,如有侵权,请联系我删除) 16) --“order by”是怎么工作的? 在林老师的课程中,第15 ...

  4. [TCP/IP] 数据链路层-ethereal 抓包分析数据帧

    1.下载 http://dx1.pc0359.cn/soft/e/ethereal.rar 2.打开软件,指定抓取的网卡,下面是我抓取自己的主要网卡数据 3.开启个ping命令 , 不停的ping一台 ...

  5. 【转】Redis一般会遇到的问题以及解析

    单线程的 Redis 为什么这么快 这个问题是对 Redis 内部机制的一个考察.根据我的面试经验,很多人都不知道Redis 是单线程工作模型.所以,这个问题还是应该要复习一下的. 回答主要是以下三点 ...

  6. Yii2设计模式——Yii2中用到哪些设计模式？

    "Yii2设计模式"包含了两个方面的内容:1.设计模式,2.Yii2框架. <设计模式>一书虽然以JAVA语言来表达设计模式的思想,但是设计模式远不限制于某一种特定的语 ...

  7. DataTable增加行

  8. 阅读笔记：基础知识（Java篇）

    1. GC机制(垃圾回收机制) 找到垃圾的方法:引用计数法.可达性分析法 回收垃圾的方法:标记清除算法.复制算法.标记整理法.分代算法 2. JVM内存划分 线程私有:程序计数器.JVM虚拟机栈.本地 ...

  9. Java日期的一些基本处理

    今天工作中用到一些日期的处理.这里做一点浅显的整理. 1.日期的加减: 日期加减一般用到Calendar这个类比较好.这样不用处理12月加一个月和28.30.31.加一天等问题 String last ...

  10. 教你一招 | 用Python实现简易可拓展的规则引擎

    做这个规则引擎的初衷是用来实现一个可序列号为json,容易拓展的条件执行引擎,用在类似工作流的场景中,最终实现的效果希望是这样的: 简单整理下需求 执行结果最终返回=true= or false 支持 ...