为了更好的研究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. ProgressWheelDialogUtil【ProgressWheel Material样式进度条对话框】

    版权声明:本文为HaiyuKing原创文章,转载请注明出处! 前言 简单封装网络请求时的加载对话框以及上传.下载文件的进度加载对话框. 效果图 代码分析 ProgressWheel : 自定义view ...

  2. 尴尬的事情又发生Newtonsoft.Json vs Protobuf.net

    写程序做下性能测试都是例行的事情了,一般在普通电脑上测试一下如果比较理想那基本不出什么意外!但世事难料,代码写得不好经常担心CPU不够用,其实写得好但不能完全发挥出CPU资源的优势更是一件悲剧的事情! ...

  3. 爸爸又给Spring MVC生了个弟弟叫Spring WebFlux

    情景引入 很早之前,Java就火起来了,是因为它善于开发和处理网络方面的应用. Java有一个爱好,就是喜欢制定规范标准,但自己又不善于去实现. 反倒是一些服务提供商使用它的规范标准来制造应用服务器而 ...

  4. Asp.Net Web APi 路由的特点

    在ASP.NET Web API中,路由是基于HTTP协议 GET请求路由到以GET开头的控制器方法,POST请求路由到以POST开头的控制器方法中,GET方法和GetProducts,都能与GET请 ...

  5. ASP.NET Core 基于JWT的认证(一)

    ASP.NET Core 基于JWT的认证(一) Json web token (JWT), 是为了在网络应用环境间传递声明而执行的一种基于JSON的开放标准((RFC 7519).该token被设计 ...

  6. .net接收post请求，并转为字符串

    Stream s = Request.InputStream; int count = 0; byte[] buffer = new byte[1024]; StringBuilder reqXml ...

  7. GraphQL基础篇

    最近参与了一个大型项目,大型项目随着系统业务量的增大,不同的应用和系统共同使用着许多的服务接口API,而随着业务的变化和发展,不同的应用对相同资源的不同使用方法最终会导致需要维护的服务API数量呈现爆 ...

  8. Git配置用户信息和SSH

    安装完成后,在开始菜单里找到“Git”->“Git Bash”,蹦出一个类似命令行窗口的东西,就说明Git安装成功! 1.配置用户信息 在命令行输入: $ git config --global ...

  9. vue-router 通过路由来实现切换头部标题

    在做单页面应用程序时,一般页面布局头尾两块都是固定在布局页面,中间为是路由入口.这时访问页面时头部标题不会变,该问题的解决方案如下: 通过采用组件内路由卫士(beforeRouterEnter.bef ...

  10. 山西大同大学教务处学生端--送给学弟，学妹的礼物，可在PC端，手机端操作

    解决问题:大同大学教务处官网学生端口一进去就卡住了,点上面一行的菜单无响应 转眼已是四年,想想自己大学即将结束,不由得让人感慨啊.这才刚开学几天,我就听到有同学在因为补考,选课的事情发愁.学校官方的教 ...