el.innerHTML = "<div id='main'>"+hello+"world!</div>";
別の解決策がMozillaによって提案されました-マークアップ行からチェーンコールを構築してhtmlを生成するためのhtml2domライブラリ。 この解決策では十分ではありませんが、主な問題、つまりマークアップを簡単かつ明確に記述する必要性は解決しません。
最終的に、必要なすべてのタスクを解決する独自のライブラリを作成することにしました-ウォームチューブ構文を使用したテンプレートからの高速で安全なDOM生成。
ライブラリはSNC -Simple Node Creatorと呼ばれます。 マークアップ行（特にinnerHTML）を操作しませんが、独自の非常にシンプルで理解しやすい、おなじみの構文を持っています。 入力では、文字列を受け取ります-テンプレート、出力では、かなり完成したDocumentFragmentです。
このライブラリは、字句解析器に基づいています。 まず、テンプレート全体がトークンの配列に分割されます。 この場合、セパレータートークンのシンボルコードは保存されます。 これにより、配列の列挙中にタイプごとに一意に識別できます。 最後に、この一連のトークンを調べてドキュメントを収集します。
構文
ノードの説明はすべて名前で始まります。 名前はhtmlタグの名前にする必要があります。 次に、デコレータはさまざまなエンティティを要素に追加します。
.class
クラスを追加します。
#id
識別子を追加します。
[...]
-ネストされたノードを指定できます：
div.parent[ span.child ]
;
ul.menu[ li#home; li#abount ]
つのレベルのノード区切り記号：
ul.menu[ li#home; li#abount ]
ul.menu[ li#home; li#abount ]
:attr
は空の属性です。
:attr@value
または
:attr=value
属性値を渡すためのオプションの1つ。 この場合、値に制限が課されます-制御文字
#.[]:%@
含めることはできません。 属性名が「on」で始まる場合、イベントハンドラーが追加され、ハンドラーの名前が値valueになり、本文が2番目の引数になります。 ハンドラーは、標準的な方法で動的に追加されます。 また、名前が「jq」で始まる場合、jQueryイベントがハングします。 ハンドラーの名前は2つの方法で設定できます
:onclick@handler
と
:onclick@%handler
これらのメソッドは両方とも同じ意味を持ちます。
%variable
は、
%variable
を設定する普遍的な方法であり、テキストデータを転送する方法でもあります（htmlエンティティは正しく送信されます）。
#%id
を記述すると、2番目のパラメーターである値マップから属性名が取得されます。 これは単純なオブジェクトであり、各キーはテンプレートの名前に対応しています。 最近では、配列にすることもできます。この場合、テンプレートが処理されるときに値が順番に取得されます。 このような変数は、すべての基本要素（識別子、クラス、属性、およびそれらの値）でサポートされています。
また、3番目のパラメーターがあります。変数の値の指定を突然忘れた場合に例外がスローされないようにする責任があります。 使用はお勧めしません。 この場合、欠損値の代わりに「未定義」が使用されます。
使用する
必要なパラメーターを渡す
SNC
関数を呼び出します。
いくつかのサンプルテンプレートが上に示されています。 別の素晴らしい例を次に示します。
SNC("div #parent [" + "i.icon-open;" + "span.child%txt" + "] :data-status@%status" + ":onclick@handler" + ":jqcustomevent=jhandler", { txt:"lorem ipsum", status:1, handler:function(e){ console.log("Standart event"); }, jhandler:function(){ console.log("Custom event"); } });
計画
次の開発項目は、サイクルの追加です。 Emmetで構文を調べました。 次のようなものがあります。
SNC("table [ {tr [ { td } * 2 ]} * 8 ]");
readmeを英語に翻訳することも必要です。 しかし、ここで私はコミュニティの助けを期待しています。
担当者： github.com/ReklatsMasters/SNC