小さなライブラリを共有したい。 彼女についてのあなたの意見を聞くのは面白いです。
要点：htmlmakeは、DOMツリーにさらに挿入するために、内部にhtmlマークアップを含む行を作成できるjs関数です。
なぜこれを使用するのですか？
私は遠くから少し始めます。 条件付きで最新のWeb開発を2つのカテゴリに分割します。
- htmlがサーバーによって生成され、javascriptが主にアニメーションとajaxリクエストに使用されるサイト（以降、これらを「サイト」と呼びます）。
- jsがDOMレンダリング全体を処理する1ページのアプリケーション（以下「Webアプリケーション」と呼びます）。
Webアプリケーションについて話す場合、htmlを生成するためのjsテンプレートエンジン（たとえば、Jade）を配布するのは理にかなっています。 私のライブラリは1つのグループ向けに設計されており、jsを記述するためのコンポーネントアプローチが最も一般的です。 html要素の単純なセットを生成するためにjsテンプレートエンジンを導入すると、非常に高価になります。通常、htmlはjqueryコードによって生成されます。 次のhtmlを構築する必要があるとしましょう：
<div class='wrapper'><h1>, !</h1></div>
次に、通常、次のように記述します。
$(“<div>”).addClass(“wrapper”).append($(<h1>).html(“, !”))
またはこのように：
$(“<div class='wrapper'><h1>, !</h1></div>”)
そして、私の意見では、そのようなコードを読んで維持することは困難です。 これが私の関数の使用例です：
htmlString = htmlmake -> @div "wrapper", -> @h1 ", !"
すべての例がcoffeescriptにあるのはなぜですか？
ネストされた関数はネイティブjsでは長すぎるため、すぐにcoffeescriptを使用しない人にこの関数を使用することはお勧めしません。
もう少し複雑な例を次に示します。
html = htmlmake -> @div "hello-class", -> @ul -> @li "one" @li "two" @li "three" @a href: "http://google.com", "underworld!"
インターフェイスは可能な限り軽量に設計されています。 どのHTMLが生成されるかはすぐにわかります。 結果：
<div class='hello-class'> <ul> <li>one</li> <li>two</li> <li>three</li> </ul> <a href='http://google.com'>underworld</a> </div>
そして、これが欲しいなら？
コンテキストをハンドラーに転送する必要があることがよくあります。 幸いなことに、coffescriptではこれは最小限の労力で行われます。 ただし、この場合、dom要素を生成するメソッドが失われるため、すべてのコールバックで入力パラメーターが提供されました。 以下に例を示します。
@hello = "superman" html = htmlmake (hm)=> hm.span id: "super", @hello
結果：
<span id='super'>superman</span>
例はもっと複雑です：
@names = ["Katarina", "Diana", "Alistar"] html = htmlmake (m)=> m.div "names", (m)=> m.ul (m)=> for name in @names m.li name
結果：
<div class='names'> <ul> <li>Katarina</li> <li>Diana</li> <li>Alistar</li> </ul> </div>
ご清聴ありがとうございました！ 私はあなたの批判/アドバイス/提案を聞いてうれしいです。
リポジトリへのリンク 、まあ、bower install html-maker。