Question

我正在使用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);
}

}

Answer 1

除了使用Regex解析HTML的亵渎之外，这是一种奇怪的模式。随着应用程序的大小增加，添加和删除这样的元素将变得昂贵。 React在概念上做了类似的事情，但实际上他们的虚拟DOM允许他们通过批量更改来更便宜地修改实际的DOM。为什么不使用React？它已经完成了你在这里尝试完成的任务以及更多。你是什么意思object scoped global variable？

在前端解析HTML是不好的形式？

1 个答案: