问如何让这个javascript动态dom创建函数成为无状态的？
EN

Stack Overflow用户

提问于 2018-08-13 00:52:28

回答 1查看 50关注 0票数 1

我一直在努力解决这个问题，并找到了一个解决方案。

const TREE_DATA = {
       "widgetData":[
          {
             "label":"node1",
             "color":"red",
             "children":[
                {
                   "label":"vip1",
                   "color":"red",
                   "children":[
                      {
                         "label":"obj1",
                         "color":"gray",
                         "id":"539803eae4b0ffad82491508"
                      },
                      {
                         "label":"obj2",
                         "color":"green",
                         "id":"5395635ee4b071f136e4b691"
                      },
                      {
                         "label":"obj3",
                         "color":"green",
                         "id":"539803e4e4b0ffad82491507"
                      }
                   ],
                   "id":"53956358e4b071f136e4b690"
                },
                {
                   "label":"vip2",
                   "color":"blue",
                   "id":"539803f2e4b0ffad82491509"
                }
             ],
             "id":"5395634ee4b071f136e4b68e"
          },
          {
             "label":"node2",
             "children":[
                {
                   "label":"vip1",
                   "color":"green",
                   "id":"539803eae4b0ffad82491501"
                },
                {
                   "label":"vip2",
                   "color":"green",
                   "id":"5395635ee4b071f136e4b694"
                }
             ],
             "id":"5395637fe4b071f136e4b692"
          },
          {
             "label":"node3",
             "color":"red",
             "children":[

             ],
             "id":"53956371f136e4b692"
          },
          {
             "label":"node4",
             "color":"red",
             "children":[

             ],
             "id":"5656"
          },
          {
             "label":"node5",
             "color":"red",
             "children":[
             ],
             "id":"5395637fe4b071f13b692"
          }
       ]
    }

const createDOM = (arr) => {
  
  function updateDOM(arr, html, el) {
  if (typeof (html) === 'undefined') {
        var html = '';
    }
    if (typeof (el) === 'undefined') {
        var el = {li: '<li>', liEnd: '</li>', ul: '<ul>', ulEnd: '</ul>'};
    }
    if (typeof (arr) === 'string') {
        return el.li + arr + el.liEnd;
    } else if (typeof (arr) === 'object') {
        for (var item in arr) {

            if (typeof (arr[item]) === 'string') {
                html += el.ul 
                          + el.li + arr[item] + el.liEnd 
                        + el.ulEnd;
            } else if(typeof (item) === 'string' && (isNaN(item))){
              html += el.ul 
                        + updateDOM(arr[item],'',el) 
                      + el.ulEnd;
              
            } else if (typeof (arr[item]) === 'object') {
               html = updateDOM(arr[item], html,el);
            }
        }
    }
    return html;
  }
  document.getElementById('tree').innerHTML =  updateDOM(arr);
  
}


createDOM(TREE_DATA);

<div id="tree"></div>

但是，我想知道如何让它成为无状态的？比如，如果我只想把TREE_DATA传入内部的updateDOM函数并返回dom树，我该怎么做呢？我希望能够以这样的方式编写这个函数，这样我就不必在每个递归函数call.How中传递HTML来处理中间的HTML？

例如，下面的fibonacci函数是这样组成的：

function factorial(n) {
  if (n === 0) {
   return 1;
  } else {
   return n * factorial(n-1);
  }
 }

javascript

html

dom

recursion

回答 1

Stack Overflow用户

回答已采纳

发布于 2018-08-13 01:35:31

我假设您不希望在输出中出现额外的<ul>。如果你这样做了，它很容易改变。

您不需要在函数中定义el。因为它是常量，更像是实用程序查找，所以您可以在函数外部定义它。您也可以只内联HMTML标记。

要通过只传入树来实现这一点，您需要在每次调用时返回一些内容，并将其附加到以前调用的结果中。您可以在for循环中附加到单个html字符串，并递归地在中传递找到的元素。通过使用Array.isArray()测试数组，我对内部调用进行了一些简化，但如果需要，您应该能够保留自己的逻辑：

const TREE_DATA = {"widgetData":[{"label":"node1","color":"red","children":[{"label":"vip1","color":"red","children":[{"label":"obj1","color":"gray","id":"539803eae4b0ffad82491508"},{"label":"obj2","color":"green","id":"5395635ee4b071f136e4b691"},{"label":"obj3","color":"green","id":"539803e4e4b0ffad82491507"}],"id":"53956358e4b071f136e4b690"},{"label":"vip2","color":"blue","id":"539803f2e4b0ffad82491509"}],"id":"5395634ee4b071f136e4b68e"},{"label":"node2","children":[{"label":"vip1","color":"green","id":"539803eae4b0ffad82491501"},{"label":"vip2","color":"green","id":"5395635ee4b071f136e4b694"}],"id":"5395637fe4b071f136e4b692"},{"label":"node3","color":"red","children":[],"id":"53956371f136e4b692"},{"label":"node4","color":"red","children":[],"id":"5656"},{"label":"node5","color":"red","children":[],"id":"5395637fe4b071f13b692"}]}

var el = { li: '<li>', liEnd: '</li>', ul: '<ul>', ulEnd: '</ul>'};

const createDOM = (arr) => {
  if (typeof(arr) === 'string') {
    return el.li + arr + el.liEnd;
  } else if (typeof(arr) === 'object') {
    let html = ''
    for (var item in arr) {
      if (Array.isArray(arr[item])) {
        html += el.ul + createDOM(arr[item]) + el.ulEnd
      } else {
        html += createDOM(arr[item]);
      }
    }
    return html
  }
  
}

document.getElementById('tree').innerHTML = createDOM(TREE_DATA)

<div id="tree"></div>

如果您愿意使用reduce()和Object.values，那么您可以将其简化为可读性更好的内容：

const TREE_DATA = {"widgetData":[{"label":"node1","color":"red","children":[{"label":"vip1","color":"red","children":[{"label":"obj1","color":"gray","id":"539803eae4b0ffad82491508"},{"label":"obj2","color":"green","id":"5395635ee4b071f136e4b691"},{"label":"obj3","color":"green","id":"539803e4e4b0ffad82491507"}],"id":"53956358e4b071f136e4b690"},{"label":"vip2","color":"blue","id":"539803f2e4b0ffad82491509"}],"id":"5395634ee4b071f136e4b68e"},{"label":"node2","children":[{"label":"vip1","color":"green","id":"539803eae4b0ffad82491501"},{"label":"vip2","color":"green","id":"5395635ee4b071f136e4b694"}],"id":"5395637fe4b071f136e4b692"},{"label":"node3","color":"red","children":[],"id":"53956371f136e4b692"},{"label":"node4","color":"red","children":[],"id":"5656"},{"label":"node5","color":"red","children":[],"id":"5395637fe4b071f13b692"}]}


const createDOM = (arr) => {
  if (Array.isArray(arr)) {
    return arr.reduce((html_string, item) => html_string + "<ul>" + createDOM(item) +  "</ul>", '')
  }
  else if (typeof (arr) === 'object') {
    return Object.values(arr).reduce((html_string, val) => html_string + createDOM(val), '')  
  } 
  else return "<li>" + arr + "</li>";
}


document.getElementById('tree').innerHTML = createDOM(TREE_DATA)

<div id="tree"></div>

编辑

要使用DOM而不是字符串，基本上是相同的事情，但花费在dom元素上而不是字符串上。

const TREE_DATA = {"widgetData":[{"label":"node1","color":"red","children":[{"label":"vip1","color":"red","children":[{"label":"obj1","color":"gray","id":"539803eae4b0ffad82491508"},{"label":"obj2","color":"green","id":"5395635ee4b071f136e4b691"},{"label":"obj3","color":"green","id":"539803e4e4b0ffad82491507"}],"id":"53956358e4b071f136e4b690"},{"label":"vip2","color":"blue","id":"539803f2e4b0ffad82491509"}],"id":"5395634ee4b071f136e4b68e"},{"label":"node2","children":[{"label":"vip1","color":"green","id":"539803eae4b0ffad82491501"},{"label":"vip2","color":"green","id":"5395635ee4b071f136e4b694"}],"id":"5395637fe4b071f136e4b692"},{"label":"node3","color":"red","children":[],"id":"53956371f136e4b692"},{"label":"node4","color":"red","children":[],"id":"5656"},{"label":"node5","color":"red","children":[],"id":"5395637fe4b071f13b692"}]}


const createDOM = (arr) => {
  if (Array.isArray(arr)) {
    return arr.reduce((ul, item) => {
        ul.appendChild(createDOM(item))
        return ul
    }, document.createElement('ul'))
  }
  else if (typeof (arr) === 'object') {
    return Object.values(arr).reduce((dom, val) => {
        dom.appendChild(createDOM(val))
        return dom
    }, document.createDocumentFragment())  
  } 
  else {
      let li = document.createElement('li')
      li.appendChild(document.createTextNode(arr))
      return li
  }
}


document.getElementById('tree').appendChild(createDOM(TREE_DATA))

 <div id="tree"></div>

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/51810900

复制

相似问题

问如何让这个javascript动态dom创建函数成为无状态的？
EN

回答 1

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何让这个javascript动态dom创建函数成为无状态的？EN

回答 1

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何让这个javascript动态dom创建函数成为无状态的？
EN