函数创建DOM树的递归 [英] Recursion in function creating DOM tree

问题描述

好人，向我解释，请使用此功能：

Good people, explain to me, please work this function:

function createTreeDom(obj) {
  if (isObjectEmpty(obj)) return;

  var ul = document.createElement('ul');

  for (var key in obj) {
    var li = document.createElement('li');
    li.innerHTML = key;

    var childrenUl = createTreeDom(obj[key]);
    if (childrenUl) li.appendChild(childrenUl);

    ul.appendChild(li);
  }

  return ul;
}

这是沙箱的链接，完整代码为： http://jsbin.com/zonoxereqa/1/edit

Here's a link to the sandbox, it's full code: http://jsbin.com/zonoxereqa/1/edit

我如何看待这些功能非常好理解：

How do I behold these functions very well understood:

function isObjectEmpty(obj) {
  for (var key in obj) {
    return false;
  }
  return true;
}

function createTree(container, obj) {
  container.appendChild( createTreeDom(obj) );
}

仅 createTreeDom（obj）递归函数我不太了解她的工作，请帮我解释一下她的工作。

Only createTreeDom(obj) of recursive functions I do not really understand her work, please, help me to explain her work.

我仍然不明白为变量childrenUl分配了什么？为什么它总是在调试器中未定义？

I still do not understand what is assigned to the variable childrenUl? Why is it always in the debugger undefined?

推荐答案

它使用嵌套对象创建嵌套列表。在一级嵌套中，它创建一个简单的 ul li，li ... 列表。但是，如果某些值是这样的非空对象

It creates nested lists using nested objects. In one level nesting, it creates a single level simple ul li, li ... list. But if some value is non-empty object like this

var arg = { "one":{}, "two":{}, "three":{"subone":{}, "subtwo":{}}, "four":{}};

然后将子对象作为子列表附加到递归中

then the subobject is appended as the sublist in the recursion

var childrenUl = createTreeDom(obj[key]);
if (childrenUl) li.appendChild(childrenUl);

如果该值不是空对象，则不会创建子列表，因为存在停止条件第一条命令：

If the value is not empty object, no sublist is created, since there is a stop condition as the first command:

if (isObjectEmpty(obj)) return;

逐步处理上述数组：对于第一个项目，该函数创建 ul 元素，并在其中添加 li ，并使用 key = one 和 obj [key] = {} ：

Step by step for the array above: for the first item, the function creates ul element and adds li into it, with the key="one" and obj[key]={}:

<ul>
  <li>one</li>
</ul>

但尚未完成，现在递归称为： createTreeDom（ {}）。由于 isObjectEmpty（{}）（显然）返回true，因此递归结束，并且 childrenUl 未定义。因此，没有内容添加到 li ，并且循环跳到第二个节点，这也是一个简单的字符串文字，因此它添加了另一个 li 节点：

But it is not done yet, now the recursion is called: createTreeDom({}). Since isObjectEmpty({}) (obviously) returns true, the recursion ends and childrenUl is undefined. Therefore, no contents is added to li and the cycle jumps to the second node, which is also just a simple string literal, so it adds another li node:

<ul>
  <li>one</li>
  <li>two</li>
</ul>

现在是重点：第三个参数。在执行递归之前，它看起来像这样：

Now the point: the third argument. Before the execution goes to the recursion, it looks like this:

<ul>
  <li>one</li>
  <li>two</li>
  <li>three</li>
</ul>

但是第三个成员的值不是空对象，因此命令

But the value of the third member is not an empty object, so the command

if (childrenUl) li.appendChild(childrenUl);

创建一个 ul 节点，其中填充了其内容像上面一样逐步并附加到 li 元素：

creates an ul node filled with its contents step by step like above and appends it to the li element:

<ul>
  <li>one</li>
  <li>two</li>
  <li>three
    <ul>
      <li>subone</li>
      <li>subtwo</li>
    </ul>
  </li>
</ul>

如果某些嵌套项目包含另一个非空对象，则将其作为sub-sub附加列出某些子列表 li ，依此类推。

If some of the nested item contained another non-empty object, it would be appended as sub-sub list to some sub-list li and so on.

最好读懂等效项：

function createTreeDom(obj) {
  var ul = document.createElement('ul');

  for (var key in obj) {
    var li = document.createElement('li');
    li.innerHTML = key;

    if (!isObjectEmpty(obj[key])) {
      var childrenUl = createTreeDom(obj[key]);
      li.appendChild(childrenUl);
    }

    ul.appendChild(li);
  }

  return ul;
}

这篇关于函数创建DOM树的递归的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！