フロントエンドでHTMLを解析するのは悪いフォームですか？

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

脇正規表現でHTMLを解析の冒涜、これは奇妙なパターンです。このような要素の追加や削除は、アプリケーションのサイズが大きくなるにつれて高価になります。 Reactも同様のことをコンセプトにしていますが、実際にはそれらの仮想DOMは実際のDOMを一括して変更することでより安価に修正します。なぜ反応を使わないのですか？それはすでにあなたがここで成し遂げようとしていることを実践しています。 object scoped global variableはどういう意味ですか？