JSON2DOM = react的render函数 about js-challenges HOT 14 OPEN

// 真正的渲染函数
function _render(vnode) {
  // 如果是数字类型转化为字符串
  if (typeof vnode === "number") {
    vnode = String(vnode);
  }
  // 字符串类型直接就是文本节点
  if (typeof vnode === "string") {
    return document.createTextNode(vnode);
  }
  // 普通DOM
  const dom = document.createElement(vnode.tag);
  if (vnode.attrs) {
    // 遍历属性
    Object.keys(vnode.attrs).forEach((key) => {
      const value = vnode.attrs[key];
      dom.setAttribute(key, value);
    });
  }
  // 子数组进行递归操作
  vnode.children.forEach((child) => dom.appendChild(_render(child)));
  return dom;
}

function render(vnode) {
  if (typeof vnode === 'number') {
    vnode = String(vnode)
  }

  if (typeof vnode === 'string') {
    return document.createTextNode(vnode)
  }

  let dom = document.createElement(vnode.tag)
  if (vnode.attrs) {
    Object.keys(vnode.attrs).map(key => {
      let value = vnode.attrs[key]
      dom.setAttribute(key, value)
    })
  }
  vnode.children && vnode.children.map(item => {
    dom.appendChild(render(item))
  })
  return dom
}

   function renderer(vnode) {
      const el = document.createElement(vnode.tag.toLocaleLowerCase());

      // 处理attrs
      for (const k in vnode.attrs) {
        el.setAttribute(k, vnode.attrs[k]);
      }
      //  如果children是字符串
      if (typeof vnode.children === "string") {
        const textNode = document.createTextNode(vnode.children);
        el.appendChild(textNode);
      }
      // 如果chidlren是数组，并且不是空数组时,就递归转化
      if (Array.isArray(vnode.children) && vnode.children.length > 0) {
        vnode.children.forEach((child) => {
          el.appendChild(renderer(child, el));
        });
      }
      return el;
    }

function _render(vnode) {
  // 考虑非一般性, 临界值
	if (typeof vnode === "number") {
		vnode = String(vnode);
	}
	if (typeof vnode === "string") {
		return document.createTextNode(vnode);
	}
  // 不失一般性
	const dom = document.createElement(vnode.tag);
	if (vnode.attrs) {
		for (const key in vnode.attrs) {
			dom.setAttribute(key, vnode.attrs[key]);
		}
	}
	if (vnode.children) {
		vnode.children.forEach((newVnode) => {
			dom.appendChild(_render(newVnode));
		});
	}
	return dom;
}

/**
 * {
  tag: 'DIV',
  attrs:{
  id:'app'
  },
  children: [
    {
      tag: 'SPAN',
      children: [
        { tag: 'A', children: [] }
      ]
    },
    {
      tag: 'SPAN',
      children: [
        { tag: 'A', children: [] },
        { tag: 'A', children: [] }
      ]
    }
  ]
}
把上诉虚拟Dom转化成下方真实Dom
<div id="app">
  <span>
    <a></a>
  </span>
  <span>
    <a></a>
    <a></a>
  </span>
</div>
 */

function render(vnode) {
  if (typeof vnode === "string") {
    return document.createTextNode(vnode);
  }
  if (typeof vnode === "number") {
    vnode = String(vnode);
  }
  let dom = document.createElement(vnode.tag);
  if (vnode.attrs) {
    for (const key in vnode.attrs) {
      dom.setAttribute(key, vnode.attrs[key]);
    }
  }

  if (vnode.children) {
    if (typeof vnode.children === "object") {
      vnode.children.forEach((child) => {
        dom.appendChild(render(child));
      });
    } else if (
      typeof vnode.children === "string" ||
      typeof vnode.children === "number"
    ) {
      if (typeof vnode.children === "number") {
        vnode.children = String(vnode.children);
      }
      dom.appendChild(document.createTextNode(vnode.children));
    }
  }

  return dom;
}

function test() {
  const vnode = {
    tag: "DIV",
    attrs: {
      id: "app",
    },
    children: [
      {
        tag: "SPAN",
        children: [
          {
            tag: "A",
            children: [{ tag: "P", attrs: { text: "p" }, children: 123213 }],
          },
        ],
      },
      {
        tag: "SPAN",
        children: [
          { tag: "A", children: [] },
          { tag: "A", children: [] },
        ],
      },
    ],
  };

  const dom = render(vnode);
  console.log(dom);
}

test();

const vDom = {
    tag: 'DIV',
    attrs: {
        id: 'app'
    },
    children: [
        {
            tag: 'SPAN',
            children: [{tag: 'A', children: []}]
        },
        {
            tag: 'SPAN',
            children: [
                {tag: 'A', children: [123]},
                {tag: 'A', children: [456]},
                789
            ]
        }
    ]
};

function render(vNode) {
    // 递归终止条件
    if (typeof vNode === 'number')
        return document.createTextNode(String(vNode));
    if (typeof vNode === 'string') return document.createTextNode(vNode);

    const {tag, attrs = {}, children = []} = vNode;
    const dom = document.createElement(tag);

    Object.keys(attrs).forEach((attr) => {
        dom.setAttribute(attr, attrs[attr]);
    });

    children.forEach((child) => {
        dom.append(render(child));
    });

    return dom;
}

const dom = render(vDom);

function render(data) {
        const curNode = document.createElement(data.tag);
        for (let key in curNode.attrs) {
            curNode.setAttribute(key, curNode.attrs[key]);
        }
        for (let child of data.children) {
            curNode.append(render(child));
        }
        return curNode;
    }

const renderDom = function (jsonDom) {
  const mainEl = document.createElement(jsonDom?.tag?.toLowerCase());

  if (jsonDom.attrs) {
    Object.keys(jsonDom.attrs).forEach((attr) => {
      mainEl.setAttribute(attr, jsonDom.attrs[attr]);
    });
  }
  jsonDom.children.forEach((child) => {
    mainEl.appendChild(renderDom(child));
  });
  return mainEl;
};

const render = (root) => {
  const dfs = (vdom) => {
    const { tag, attrs, children } = vdom
    if (!vdom) {
      return
    }
    const dom = document.createElement(tag)
    if (attrs) {
      Object.keys(attrs).forEach(key => {
        dom.setAttribute(key, attrs[key])
      })
    }
    if (Array.isArray(children) && children.length) {
      children.forEach(item => {
        dom.appendChild(dfs(item))
      })
    }
    return dom
  }
  const res = dfs(root)
  return res
}