virtual DOM构建

2021-09-14 21:02:38 阅读：109 来源： 互联网

标签：node DOM value 构建 virtual key props children

1. 构建虚拟DOM，参考资料：https://juejin.cn/post/6844903806132568072#heading-2【仅做为个人学习笔记，如有侵权，请联系本人】

　　 type: 指定元素的标签类型，如'li', 'div', 'a'等
　　 props: 表示指定元素身上的属性，如class, style, 自定义属性等
　　 children: 表示指定元素是否有子节点，参数以数组的形式传入

element.js 文件代码：

/* virtualDOM 基本结构 */
class element {
  constructor(type, props, children) {
    this.type = type;
    this.props = props;
    this.children = children;
  }
}

/* 创建虚拟DOM元素 */
function createElement(type, props, children) {
  return new element(type, props, children);
}

/* 将虚拟DOM渲染为真实DOM，并返回元素 */
function render(dom_object) {
  let el = document.createElement(dom_object.type);
  for (let key in dom_object.props) {
    setAttr(el, key, dom_object.props[key]);
  }
  dom_object.children.forEach(child => {
    child = (child instanceof element) ? render(child) : document.createTextNode(child);
    /* createTextNode 创建文本节点 */
    el.appendChild(child);
  });
  return el;
}

/* 为el设置属性，可不可以直接node.setAttribute(key, value)？ */
function setAttr(node, key, value) {
  if (key === 'value') {
    if (node.tagName.toLocaleLowerCase() === 'input'
        || node.tagName.toLocaleLowerCase() === 'textarea') {
      node.value = value;
    } else {
      node.setAttribute(key, value);
    }
  } else if (key === 'style') {
    node.style.cssText = value;
  } else {
    node.setAttribute(key, value);
  }
}

function renderDOM(el, target) {
  target.appendChild(el);
}

index.js 文件代码：

/**
 * index.js 程序入口
 */

let box = document.querySelector('.box');

let virtualdom = createElement('ul', {class: 'list'}, [
   createElement('li', {class: 'item'}, ['周杰伦']),
   createElement('li', {class: 'item'}, ['林俊杰']),
   createElement('li', {class: 'item'}, ['王力宏'])
]);

console.log(virtualdom); // 打印查看虚拟DOM结构
renderDOM(render(virtualdom), box); // 将虚拟DOM转化为真实DOM

index.html 代码：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>index</title>
</head>
<body>
  <div class="box"></div>
  <script src="element.js"></script>
  <script src="index.js"></script>
</body>
</html>

标签：node,DOM,value,构建,virtual,key,props,children
来源： https://www.cnblogs.com/twinkleG/p/15269538.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

virtual DOM构建