为了更好的研究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. [区块链] 加密算法——Hash算法（进阶）

    为了为保证存储于区块链中的信息的安全与完整,区块链中使用了包含密码哈希函数和椭圆曲线公钥密码技术在内的大量的现代密码学技术,同时,这些密码学技术也被用于设计基于工作量证明的共识算法并识别用户. 在前边 ...

  2. MyWebViewDemo【封装Webview常用配置和选择文件、打开相机、录音、打开本地相册的用法】

    版权声明:本文为HaiyuKing原创文章,转载请注明出处! 前言 封装webview的常用配置和选择文件.打开相机.录音.打开本地相册的用法.[如果想要使用简单的预览功能,可以参考<MyBri ...

  3. 机器学习——决策树，DecisionTreeClassifier参数详解，决策树可视化查看树结构

    0.决策树 决策树是一种树型结构,其中每个内部节结点表示在一个属性上的测试,每一个分支代表一个测试输出,每个叶结点代表一种类别. 决策树学习是以实例为基础的归纳学习 决策树学习采用的是自顶向下的递归方 ...

  4. KnockoutJS-模板绑定

    对于knockoutJS来讲,模板绑定和Mapping插件绑定是十分重要的功能,虽然模板绑定在我工作中用的及其少,但模板绑定的重要性不可忽视,在其他前端框架中,如Angular.Vue等等,模板存在的 ...

  5. Java——IO系统概览

    前言 对程序语言的设计者来说,创建一个好的输入/输出(IO)系统是一项艰难的任务.这艰难主要来自于要涵盖I/O的所有可能性.不仅存在各种I/O源端和想要与之通信的接收端(源端/接收端:文件.控制台和网 ...

  6. 使用 FFT 分析周期性数据

    可以使用傅里叶变换来分析数据中的变化,例如一个时间段内的自然事件. 天文学家使用苏黎世太阳黑子相对数将几乎 300 年的太阳黑子的数量和大小制成表格.对大约 1700 至 2000 年间的苏黎世数绘图 ...

  7. 进阶！基于CentOS7系统使用cobbler实现单台服务器批量自动化安装不同版本系统（week3_day5_part2）-技术流ken

    前言 在上一篇博文<cobbler批量安装系统使用详解-技术流ken>中已经详细讲解了cobbler的使用以及安装,本篇博文将会使用单台cobbler实现自动化批量安装不同版本的操作系统. ...

  8. ASP.NET Core 部署IIS及 OFFSET 附近有语法错误解决

    今天自己开发了一个订机票的微信公众号,功能基本已经完成,然后想部署到服务器实际测试下.结果部署上去出现各种问题.先安装asp.net core模块,然后发现数据库并不像在开发时一样,执行ef的命令行语 ...

  9. Centos7 二进制安装 Kubernetes 1.13

    目录 1.目录 1.1.什么是 Kubernetes? 1.2.Kubernetes 有哪些优势? 2.环境准备 2.1.网络配置 2.2.更改 HOSTNAME 2.3.配置ssh免密码登录登录 2 ...

  10. 【Objective-C学习笔记】变量和基本的数据类型

    OC是增强了C的特性,所以在变量和基本数据类型上基本与C一致. 在OC中变量命名有如下规则: 由字母.数字.下划线.$符号组成 必须以字母.下划线.$符号开头 大小写敏感 在OC中定义变量的时候不能使 ...