2017-09-21 前端 嵌套结构的处理与渲染 公司组件库项目,有个同事做菜单功能,处理迭代弄不好。我写了一个简单的 DEMO,同时放出来参考: 在这里查看效果 JSFiddle 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899<!DOCTYPE html><html><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Test</title> <style> .lv1 { margin: 10px 10px; border: 1px solid #ccc; } .lv2 { margin: 10px 20px; border: 1px solid #ccc; } .lv3 { margin: 10px 30px; border: 1px solid #ccc; } </style></head><body><div id="nav"> <div data-color="red">1</div> <div> <div data-color="blue">2 - 1</div> <div data-color="purple">2 - 2</div> <div data-color="black">2 - 3</div> </div> <div> <div data-color="magenta">3 - 1</div> <div> <div data-color="green">3 - 2 - 1</div> <div data-color="brown">3 - 2 - 2</div> </div> </div></div><script> const rootElement = el => { if (typeof el === 'string') { return document.querySelector(el) } return el } const AST = root => { const children = (el, lv = 0) => { let color = el.dataset.color || null let text = null let child = el.children if (child.length === 0) text = el.textContent return { color, text, lv: lv, children: Array.prototype.map.call(child, v => children(v, lv + 1)) } } return children(root).children } const render = list => { const htmlArr = children => { return children.map(child => { let color = child.color let text = child.text let ch = child.children let lv = child.lv if (ch.length > 0) { return `<div class="lv${lv}">${htmlArr(ch)}</div>` } else { return `<div class="lv${lv}" style="color:${color}">${text}</div>` } }).join('') } return htmlArr(list) } class Test { constructor (el) { let $el = rootElement(el) let list = AST($el) console.log(list) let html = render(list) console.log(html) $el.innerHTML = html } }</script><script> new Test('#nav')</script></body></html> 前一篇 Objective-C 学习(一)- 字符串 数字 数组 NSIndexSet 后一篇 webpack uglifyJS 在 IE8 下的兼容处理