Day259:按要求实现代码

[Genzhen]

var items = [{ name: "item1" }, { name: "item2" }];
var str = '<div ali-for="item in items">{{item.name}}<div>';

ParseDom(str);
// <div>item1</div><div>item2</div>

function ParseDom(str) {
  // your code
}

---

每日一题会在下午四点在交流群集中讨论，五点小程序中更新答案 欢迎大家在下方发表自己的优质见解

二维码加载失败可点击 小程序二维码

扫描下方二维码，收藏关注，及时获取答案以及详细解析，同时可解锁800+道前端面试题。

[luuman]

var items = [
  { name: 'item1' },
  { name: 'item2' }
]
const s = {}
s.items = items
function ParseDom(str) {
  const mid = document.createElement('div')
  mid.innerHTML = str
  const { children } = mid
  let res = ''
  const Child = [...children]
  console.log('mid', mid, Child)
  Child.forEach(c => {
    const attrs = [...c.attributes]
    const targetAttr = attrs.find(x => x.name === 'ali-for')
    const nodename = c.nodeName.toLocaleLowerCase()
    // 属性全部写进去
    const attrsStr = attrs.reduce((r, c) => {
      if (c.name !== 'ali-for') {
        r += ` ${c.name}="${c.value}"`
      }
      return r
    }, '')
    if (!targetAttr) {
      // 没有循环渲染标记
      res += `<${nodename}${attrsStr}>${c.innerHTML}</${nodename}>`
      return
    }
    // 循环渲染
    const vfor = targetAttr.nodeValue
    const o = vfor.split(' in ')[1]
    const k = c.innerText.match(/\{\{(.*)\}\}/)[1].split('.')[1]
    ;s[o].forEach(x => {
      res += `<${nodename}${attrsStr}>${x[k]}</${nodename}>`
    })
  })
  return res
}
var str = '<div ali-for="item in items">{{item.name}}</div>'
// 对应生成的dom
console.log(ParseDom(str))