为了更好的研究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. c#文件图片操作

    系统特殊目录路径 //取得特殊文件夹的绝对路径 //桌面 Environment.GetFolderPath(Environment.SpecialFolder.Desktop); //收藏夹 Env ...

  2. SpringBoot-MongoDB 索引冲突分析及解决

    一.背景 spring-data-mongo 实现了基于 MongoDB 的 ORM-Mapping 能力, 通过一些简单的注解.Query封装以及工具类,就可以通过对象操作来实现集合.文档的增删改查 ...

  3. SLAM+语音机器人DIY系列：（二）ROS入门——8.理解roslaunch在大型项目中的作用

    摘要 ROS机器人操作系统在机器人应用领域很流行,依托代码开源和模块间协作等特性,给机器人开发者带来了很大的方便.我们的机器人“miiboo”中的大部分程序也采用ROS进行开发,所以本文就重点对ROS ...

  4. Python generator和yield介绍

    Python生成器(generator)并不是一个晦涩难懂的概念.相比于MetaClass和Closure等概念,其较为容易理解和掌握.但相对于程序结构:顺序.循环和分支而言其又不是特别的直观.无论学 ...

  5. 【深度学习系列】PaddlePaddle垃圾邮件处理实战（二）

    PaddlePaddle垃圾邮件处理实战(二) 前文回顾   在上篇文章中我们讲了如何用支持向量机对垃圾邮件进行分类,auc为73.3%,本篇讲继续讲如何用PaddlePaddle实现邮件分类,将深度 ...

  6. git clone 指定分支

    使用Git下载指定分支命令为:git clone -b 分支名仓库地址 克隆asp.net core 2.1.6版本 git clone -b 2.1.6 https://github.com/asp ...

  7. mysql 设置自增主键id的起始值

    修改user表,主键自增从20000开始 alter table user AUTO_INCREMENT=20000;

  8. 适合精致女孩使用的APP软件 不容错过的精彩人生

    阳光下灿烂,风雨中奔跑,每个人都会遇见美丽的缘分,或深或浅,或浓或淡.所以人生不管遇到什么难题,都要勇往直前.今天分享的软件也是十分精彩的,非常适合精彩的你哦! 薄荷健康 薄荷健康APP是专为想要减肥 ...

  9. 属于自己的MES（二）必备的主数据

    MES在系统建设前,需要先进行一些必要的数据,这些主数据是支撑MES执行的关键. 1.BOM BOM通常称为“物料清单”,也就是产品结构,在化工.制药.食品.烟草领域也叫“配方”,它主要描述了物料的物 ...

  10. mac git从代码仓库克隆代码，修改并上传

    1:添加本地秘钥到代码仓库中 open ~/ .ssh 以github为例: mac 命令行输入open ~/ .ssh,打开id_rsa.pub文件中的内容,复制到github->settin ...