为了更好的研究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. ConfirmCancelUtilDialog【确认取消对话框封装类】

    版权声明:本文为HaiyuKing原创文章,转载请注明出处! 前言 对确认取消对话框的封装. 前提:调用对话框的Activity必须继承FragmentActivity及其子类(比如AppCompat ...

  2. Android序列化

    1.序列化的目的 (1)永久的保存对象数据(将对象数据保存在文件当中,或者是磁盘中 (2)通过序列化对象在网络中传递对象 (3)通过序列化对象在进程间传递 (4)在Intent之间,基本的数据类型直接 ...

  3. 浅谈基于Linux的Redis环境搭建

    本篇文章主要讲解基于Linux环境的Redis服务搭建,Redis服务配置.客户端访问和防火强配置等技术,适合具有一定Linux基础和Redis基础的读者阅读. 一  Redis服务搭建 1.在根路径 ...

  4. Zuul之Filter详解

    Zuul详解 官方文档:https://github.com/Netflix/zuul/wiki/How-it-Works Zuul的中心是一系列过滤器,能够在HTTP请求和响应的路由过程中执行一系列 ...

  5. MVC开发模式简述

    了解MVC开发模式,首先我们要了解一下发展趋势 一.什么是软件设计 Jack W.Reeves 于14年前(1992年),就在其撰写的论文——<What is Software Design&g ...

  6. Redis分布式队列和缓存更新

    原文链接:https://www.cnblogs.com/hua66/p/9600085.html 在使用Redis中,我们可能会遇到以下场景: 例如: 某用户向服务器中发送一个请求,服务器将用户请求 ...

  7. HTTP中GET和POST的区别主要是那些，面试中可以加分的该说那些？

    面试回答: GET请求在URL中传送的参数是有长度限制的,而POST没有. GET比POST更不安全,因为参数直接暴露在URL上,所以不能用来传递敏感信息. GET参数通过URL传递,POST放在Re ...

  8. Java中字符串相加和字符串常量相加区别

    有一道这样的程序: public class TestStringDemo { public static void main(String[] args) { String s1 = "P ...

  9. 测者的测试技术手册：测试应该关注java.util.List.subList的坑

    java中有一个返回子列表的方法: public list<E> subList(int fromIndex, int toIndex){       subListRangeCheck( ...

  10. 【RL-TCPnet网络教程】第2章 嵌入式网络协议栈基础知识

    第2章        嵌入式网络协议栈基础知识 本章教程为大家介绍嵌入式网络协议栈基础知识,本章先让大家有一个全面的认识,后面章节中会为大家逐一讲解用到的协议. 基础知识整理自百度百科,wiki百科等 ...