Day259:按要求实现代码
Genzhen opened this issue · 1 comments
Genzhen commented
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 commented
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))