рекурсии в функции создания дерева DOM

Question

Хорошие люди, объясните мне, пожалуйста, работу этой функции:

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

Как вот эти функции очень хорошо понимал:

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

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

только createTreeDom(obj) рекурсивных функций я не очень понимаю ее работы, пожалуйста, помоги мне объяснить свою работу.

Я все еще не понимаю, что назначено переменной childrenUl? Почему он всегда в отладчике не определен?

Answer 1

Создает вложенные списки, используя вложенные объекты. На одном уровне вложенности он создает один простой список ul li, li .... Но если какое-то значение не пустой объект, как этот

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

то субобъект присоединяемый как подсписок в рекурсии

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

Если значение не является пустым объектом, не Подсписок не создаются, так как есть условие останова в качестве первой команды:

if (isObjectEmpty(obj)) return; 

шаг за шагом для вышеупомянутого массива: для первого элемента, функция создает ul элемент и добавляет li в него, с key="one" и obj[key]={}:

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

Но это еще не сделано, теперь рекурсия называется: createTreeDom({}). Поскольку isObjectEmpty({}) (очевидно) возвращает true, концы рекурсии и childrenUl не определены. Поэтому, не содержание не добавляется в li и цикл переходит на второй узел, который также является только простой строковый литерал, поэтому он добавляет еще один li узел:

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

Теперь пункт: третий аргумент. Перед тем, выполнение переходит к рекурсии, это выглядит следующим образом:

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

Но значение третьего элемента не является пустым объектом, поэтому команда

if (childrenUl) li.appendChild(childrenUl); 

создает ul узел, наполненный его содержание шаг за шагом, как и выше, и добавляет его к li элемента:

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

Если какой-либо из вложенных элементов содержит другой непустой объект, он будет добавлен в качестве вспомогательного списка к некоторому под-списку li и так далее.

Там может быть лучше читать эквивалент:

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; 
}