Javascript 在前端解析HTML是一种糟糕的形式吗？

我正在使用node+electron构建一个桌面应用程序。我需要一种在DOM中容器化UI元素的方法

我提出了这个解决方案，可以通过其他Typescript DOM元素进行扩展

我的代码运行有效。这是Typescript的适当用法吗

我是在重写别人已经写过的库吗？ 我没有使用React，因为它不允许对象范围的全局变量

在前端解析HTML是一种糟糕的形式吗

class Glyph {
//field
uuid:string;

//constructor
constructor(parent:string, html:string) {
    this.uuid = this.guid();

    var regex = /(<([^>]+>))/ig
    var tags = html.match(regex);

    var position = tags[0].search(/>/ig);
    tags[0] = [tags[0].slice(0, position), ' id="'+ this.uuid +'"', tags[0].slice(position)].join('');
    html = tags.join('');

    //appends child to the provided parent id
    document.getElementById(parent).innerHTML += html;
}

guid():string {
    return this.s4() + this.s4() + '-' + this.s4() + '-' + this.s4() + '-' +
        this.s4() + '-' + this.s4() + this.s4() + this.s4();
}

s4():string {
return Math.floor((1 + Math.random()) * 0x10000)
    .toString(16)
    .substring(1);
}

replaceElement(html):void {
    var currentElement = document.getElementById(this.uuid);
    currentElement.outerHTML = html;
}

deleteElement():void {
    var child = document.getElementById(this.uuid);
    var parent = document.getElementById(this.uuid).parentElement;
    parent.removeChild(child);
}

类图示符{
//场
uuid：字符串；
//建造师
构造函数（父：字符串，html:字符串）{
this.uuid=this.guid（）；
var regex=/（]+>）/ig
var tags=html.match（regex）；
var position=tags[0]。搜索（/>/ig）；
标记[0]=[tags[0]。切片（0，位置），'id=“”+this.uuid+'”，标记[0]。切片（位置）]。连接（“”）；
html=tags.join（“”）；
//将子项附加到提供的父项id
document.getElementById（父）.innerHTML+=html；
}
guid（）：字符串{
返回this.s4（）+this.s4（）+'-'+this.s4（）+'-'+this.s4（）+'-'+
this.s4（）+'-'+this.s4（）+this.s4（）+this.s4（）；
}
s4（）：字符串{
返回Math.floor（（1+Math.random（））*0x10000）
.toString（16）
.子串（1）；
}
replaceElement（html）：无效{
var currentElement=document.getElementById（this.uuid）；
currentElement.outerHTML=html；
}
deletelement（）：void{
var child=document.getElementById（this.uuid）；
var parent=document.getElementById（this.uuid）.parentElement；
父母。removeChild（子女）；
}

---

}

除了用正则表达式解析HTML之外，这是一种奇怪的模式。随着应用程序规模的增长，添加和删除这样的元素将变得非常昂贵。React在概念上做了类似的事情，但在实践中，他们的虚拟DOM让他们通过批量更改更便宜地修改实际DOM。为什么不使用React？它已经完成了你在这里想要完成的事情，还有更多。

对象范围的全局变量是什么意思？
浏览器实际上是一个HTML解析器，不允许对象范围的全局变量？你这么说是什么意思？如果你不喜欢React，那么Vue.js与Electron的配合非常好。我认为你在性能方面是对的。所谓“对象范围的全局变量”，我指的是对象实例内部可用的变量，其作用域为实例。AFAIK在React中不可用。实例（作用域到类的实例）和静态（作用域到类）变量都可用于TypeScript。这里不起作用。