Html-maker-coffeescriptを使用した便利でシンプルなHTML生成

小さなライブラリを共有したい。 彼女についてのあなたの意見を聞くのは面白いです。



要点：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。