用原生 JS 实现 innerHTML 功能实例详解(3)

function vdomToDom(array) { var res = [] for(let item of array) { res.push(handleDom(item)) } return res } function handleDom(item) { if(item instanceof Element) { var element = document.createElement(item.tagName) for(let key in item.attr) { element.setAttribute(key, item.attr[key]) } if(item.childNodes.length) { for(let i = 0; i < item.childNodes.length; i++) { element.appendChild(handleDom(item.childNodes[i])) } } return element } else if(item instanceof Text) { return document.createTextNode(item.value) } }

实现函数

上面三步骤完成后，来到了最后一步，实现最开始提出的函数

function html(element, htmlString) { // parseHTML var syntacticalParser = new HTMLSyntacticalParser() var lexicalParser = new HTMLLexicalParser(htmlString, syntacticalParser.receiveInput.bind(syntacticalParser)) lexicalParser.parse() var dom = vdomToDom(syntacticalParser.getOutPut()) var fragment = document.createDocumentFragment() dom.forEach(item => { fragment.appendChild(item) }) element.appendChild(fragment) }

三个不同情况的测试用例简单测试下

html(document.getElementById('app'), '<p data="js">测试并列元素的</p><p data="js">测试并列元素的</p>') html(document.getElementById('app'), '测试<div>你好呀，我测试一下没有深层元素的</div>') html(document.getElementById('app'), '<div><p>测试一下嵌套很深的<span>p的子元素</span></p><span>p同级别</span></div>')

声明：简单测试下都没啥问题，本次实践的目的是对 DOM 这一块通过词法分析和语法分析生成 DOM Tree 有一个基本的认识，所以细节问题肯定还是存在很多的。

总结

其实在了解了原理之后，这一块代码写下来，并没有太大的难度，但却让我很兴奋，有两个成果吧

了解并初步实践了一下状态机

数据结构的魅力

代码已经基本都列出来了，想跑一下的童鞋也可以 clone 这个 repo： domtree

总结

以上所述是小编给大家介绍的用原生 JS 实现 innerHTML 功能实例详解，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！

您可能感兴趣的文章: