Virtual DOM 的原理与实现

不才 等级 682 0 0
标签: Javascript

只贴代码 不解释过程 勿喷

博客 文章地址; github地址

环境搭建

1.克隆

$ git clone https://github.com/cvgellhorn/webpack-boilerplate.git
$ npm install 
$ npm install @babel/plugin-transform-react-jsx --save-dev

2.配置babel

"plugins": [
    ...其他配置
    [
        "@babel/plugin-transform-react-jsx",
        {
            "pragma": "dom" // 这里表示生成的jsx 函数
        }
    ]
    ...其他配置
]

代码 index.js


/*
 * @Author: bucai
 * @Date: 2019-10-16 20:54:45
 * @LastEditors: bucai
 * @LastEditTime: 2019-10-17 10:11:38
 * @Description: vdom
 */

// 生成的虚拟dom的节点 
function dom(type, props, ...children) {
  return {
    type,
    props,
    children
  }
}

/**
 * 生成真实的dom树
 * @param {object} domObj node节点
 */
function generateDom(domObj) {
  let $el;
  if (domObj.type) {
    $el = document.createElement(domObj.type);
  } else {
    $el = document.createTextNode(domObj);
  }

  if (domObj.props) {
    Object.keys(domObj.props).forEach(key => {
      $el.setAttribute(key, domObj.props[key]);
    });
  }

  if (domObj.children) {
    domObj.children.forEach(child => {
      $el.appendChild(generateDom(child));
    });
  }

  return $el;
}
/**
 * 对比节点是否改变
 * @param {object} nodea 节点A
 * @param {object} nodeb 节点B
 */
// node 发生改变
function isNodeChange(nodea, nodeb) {
  // 如果nodea.type 都不为空表示是 元素节点
  if (nodea.type !== undefined && nodeb.type !== undefined) {
    return nodea.type !== nodeb.type;
  }
  // 如果是其中又一个是文本节点就判断字符串 
  return nodea !== nodeb;
}
/**
 * 是否参数改变
 * @param {object} propa attrlist
 * @param {*} propb attrlist
 */
// props change
function isPropsChange(propa, propb) {
  // 统一化
  const oldProps = propa || {};
  const newProps = propb || {};
  // 获取参数的key
  const oldKeys = Object.keys(oldProps);
  const newKeys = Object.keys(newProps);
  // 长度不同就说明改变了
  if (oldKeys.length !== newKeys.length) {
    return true;
  }
  // 当长度一致的时候
  if (oldKeys.length === 0) {
    return false;
  }
  // 遍历key 来对比是否改变
  for (let i = 0; i < oldKeys.length; i++) {
    const oldkey = oldKeys[i];
    const newkey = newKeys[i];
    // 对key进行遍历
    // if (oldkey !== newkey) { // // 这里没有意义
    //   return true;
    // }
    if (oldProps[oldkey] !== newProps[newkey]) {
      return true;
    }
  }
  // 如果上面都不符合就说是没有更改的
  return false;
}

/**
 *  虚拟DOM对比函数
 * @param {HTMLElement} $parent 父节点
 * @param {object} oldNode 旧的节点对象
 * @param {object} newNode 新的节点对象
 * @param {number} index 子节点的下标
 */
function vDom($parent, oldNode, newNode, index = 0) {
  const $currlenEl = $parent.childNodes[index];
  // 旧的不存在就直接添加到dom中
  if (!oldNode) {
    // append
    return $parent.appendChild(generateDom(newNode));
  }
  // 新的不存在就直接移除旧的节点
  if (!newNode) {
    // REMOVE
    return $parent.removeChild($currlenEl);
  }
  // 判断节点是否改变
  // node change
  if (isNodeChange(oldNode, newNode)) {
    return $parent.replaceChild(generateDom(newNode), $currlenEl);
  }
  // 节点相同就没问题
  // no change textNode
  if (oldNode === newNode) {
    return;
  }

  // change props
  const oldProps = oldNode.props || {};
  const newProps = newNode.props || {};

  if (isPropsChange(oldProps, newProps)) {
    const oldPropsKey = Object.keys(oldProps);
    const newPropsKey = Object.keys(newProps);

    // 如果新的props 为空就将old全部移除
    if (newPropsKey.length === 0) {
      oldPropsKey.forEach(key => {
        $currlenEl.removeAttribute(key);
      });
    } else {

      const propsKeySet = new Set([...oldPropsKey, ...newPropsKey]);

      propsKeySet.forEach(key => {

        if (oldProps[key] === undefined) {
          $currlenEl.setAttribute(key, newProps[key]);
        } else if (newProps[key] === undefined) {
          $currlenEl.removeAttribute(key);
        } else if (newProps[key] !== oldProps[key]) {
          $currlenEl.setAttribute(key, newProps[key]);
        }

      });
    }
  }
  // 子节点
  // children change
  const oldChildren = oldNode.children || [];
  const newChildren = newNode.children || [];

  if (oldChildren.length || newChildren.length) {
    const maxLen = Math.max(oldChildren.length, newChildren.length);
    for (let i = 0; i < maxLen; i++) {
      vDom($currlenEl, oldChildren[i], newChildren[i], i);
    }
  }

}

// 原来的dom树
const profile = (
  <div>
    <h3 class="aaaa">123</h3>
    <p>123</p>
  </div>
);
// 新的dom树
const profileChange = (
  <div class="b">
    <h3 class="bucai" data-user-id="{a:1}">222</h3>
    <span>xxxxx</span>
  </div>
);
// 先生成一个真实的dom树 并将他添加到html中
const $el = generateDom(profile);
const $app = document.querySelector('#app');
$app.appendChild($el);

// 延时,方便查看
setTimeout(() => {
  // 调用虚拟dom 对比两棵树
  vDom($app, profile, profileChange);
}, 3000);

收藏
评论区

相关推荐

对 JavaScript 中事件循环的理解​
一、是什么 JavaScript 在设计之初便是单线程,即指程序运行时,只有一个线程存在,同一时间只能做一件事 为什么要这么设计,跟JavaScript的应用场景有关 JavaScript 初期作为一门浏览器脚本语言,通常用于操作 DOM ,如果是多线程,一个线程进行了删除 DOM ,另一个添加 DOM,此时浏览器该如何处理? 为了解决单
Virtual DOM 的原理与实现
只贴代码 不解释过程 勿喷 ; 环境搭建1.克隆$ git clone https://github.com/cvgellhorn/webpackboilerplate.git$ npm install $ npm install @babel/plugintransformreactjsx savedev2.配
React 之Virtual DOM 及内核
什么是 Virtual DOM?Virtual DOM 是一种编程概念。在这个概念里, UI 以一种理想化的,或者说“虚拟的”表现形式被保存于内存中,并通过如 ReactDOM 等类库使之与“真实的” DOM 同步。这一过程叫做。这种方式赋予了 React 声明式的 API:您告诉 React 希望让 UI 是什么状态,React 就确保 DOM 匹
javaScript. Dom 基本操作
DOM节点查找jsdocument.getElementById() //通过id查找document.getElementsByTagName() //通过标签名document.getElementsByName() //通过name名查找 document.getElementsByClassName("类名")//通过类名获取元素对象 documen
03. react 初次见面
    与浏览器的 DOM 元素不同,React 当中的元素事实上是普通的对象,React DOM 可以确保 浏览器 DOM 的数据内容与 React 元素保持一致。 1、将元素渲染到 DOM 中 --------------     首先我们在一个 HTML 页面中添加一个 id="root" 的 <div>: <div id="root">
ECMAScript——JavaScript的核心
      JavaScript(简称:JS)是一种动态类型、弱类型的直译式脚本语言。也就是说它的数据类型不需要声明,不同类型之间会隐式转换为被赋值的类型。它不需要编译,直接由浏览器解释执行。JavaScript由ECMAScript(简称:ES)、DOM、BOM三大部分组成:ECMAScript规定了语言的语法和基本对象;DOM(文本对象模型)处理网页的节
JavaScript DOM初学笔记
1\. DOM简介 ========= 1\. 1 什么是DOM ------------ **文档对象模型**(**Document Object Model**,简称 DOM),是 W3C组织推荐的处理可扩展标记语言(HTML 或者标准编程接口。 1.2 DOM树 -------- ![HTML DOM Node Tree](https://st
JavaScript 异步编程
> ❝ > > 掌握JavaScript主流的异步任务处理 ( 本篇文章内容输出来源:《拉钩教育大前端训练营》参阅《你不知道的JavaScript中卷》异步章节) > > ❞ JavaScrip 采用单线程模式工作的原因,需要进行DOM操作,如果多个线程同时修改DOM浏览器无法知道以哪个线程为主。 JavaScirpt分为:同步模式、异步模式 同步
JavaScript的BOM和DOM
1,window对象,所有浏览器都支持window对象,它表示浏览器窗口 BOM(browser Object Model)是指浏览器对象模型,它使JavaScript有能力与浏览器进行"对话". DOM(Document Object Model)是指文档对象类型,通过它,可以访问HTML文档的所有元素 window对象客户端JavaScript最高
Jquery元素追加和删除
**介绍**    DOM是Document Object Modeule的缩写,一般来说,DOM操作分成3个方面。 **1、DOM Core**     DOM Core并不专属于javascript,任何一种支持DOM的程序设计语言都可以使用它,用途也远不止仅限于网页,也可以用来处理任何一种使用标记语言编写出来的文档,如XML。     例如:
Nerv
![](https://oscimg.oschina.net/oscnet/1adc9f3b5b42317562590c398e4f3cce7d7.jpg) Nerv 是一款由京东凹凸实验室打造的高性能类 React 前端框架。目前已广泛运用在京东商城(JD.COM)核心业务及TOPLIFE全站。Nerv 基于React标准,使用 Virtual Dom
React与Vue的相同与不同点
我们知道JavaScript是世界上最流行的语言之一,React和Vue是JS最流行的两个框架。所以要想前端的开发那么必须掌握好这两个框架。 那么这两个框架有什么不同呢? **React 和 Vue 相同之处,它们都有:** * 使用 Virtual DOM * 提供了响应式 (Reactive) 和组件化 (Composable) 的视图组件
React的虚拟DOM
上一篇文章中,DOM树的信息可以用JavaScript对象来表示,反过来,可以根据这个用JavaScript对象表示的树结构来真正构建一颗DOM树。 用JavaScript对象表示DOM信息和结构,当状态变更的时候,重新渲染这个JavaScript的对象结构,当然这样做,其实并没有更新到真正的页面上。 但是可以用新渲染的对象树和旧的树进行对比,记录这两棵树
React篇(005)
答案: 1、**React 速度很快**:它并不直接对 DOM 进行操作,引入了一个叫做虚拟 DOM 的概念,安插在 javascript 逻辑和实际的 DOM 之间,性能好。 2、**跨浏览器兼容**:虚拟DOM帮助我们解决了跨浏览器问题,它为我们提供了标准化的 API,甚至在 IE8 中都是没问题的。 3、**一切都是 co
Vue diff 算法
一、虚拟 DOM (virtual dom) ----------------------   diff 算法首先要明确一个概念就是 diff 的对象是虚拟DOM(virtual dom),更新真实 DOM 是 diff 算法的结果。   注:virtual dom 可以看作是一个使用 JavaScript 模拟了 DOM结构 的树形结构,这个树结构包含