雑記nodeビューテンプレートエンジンの選択


Node開発は,フロントエンドテンプレートエンジンを用いた歴史の中でejsを試み,1年間jadeを陸続的に用い,その後swigを用いた.
jadeを使う過程でまだ柔軟なインデント文法に適応できず、htmlラベル文法との大きなずれに適応できなかった.私はjadeラベルのインデントを書くとき、よく間違いをして、それから何度も調べなければなりません.コードのインデントはもともと直感的なためですが、jadeの中では文法で、それを使ってビューを書くのは、個人的には不快です.
それから私は他のテンプレートを探して、aspを書くようにしたいと思っています.NetMVCのcshtmlビューファイルのようにhtmlタグをほぼ保持している様子は、データ注入時のみ、プログラム制御を加えてHTMLと混載する.
その後、ejsとswigを考えましたが、全体的にejsはswigより強く、ランキングも上位にランクインしました(ejsはTJがやっていて、ファングループを持っています).しかし、私はその後ずっと使っていたswigは、勝手に選んで、それが私の簡単な需要を満たすことができればいいです.
  • 基本的なhtmlタグ構文を保持し、直感的に
  • はマスターページlayoutをサポートし、コード領域
  • を区分する.
  • は、簡単な条件判定、ループ
  • をサポートする.
  • 軽量
  • swigについては、大規模なプロジェクトで実践したことがなく、自分でいくつかの小さなプロジェクトを書いたことがあり、穴に遭遇したことはありません.
    以下にswigでよく使われる機能点をいくつか簡単に記録します.
    マスターページの使用
    マスターページは、トップバー、サイドバーなど、ページ全体の領域を計画するのが一般的です.
    新しいlayout.htmlは、マスターページの棚を簡単に作り、{%block[set a name there]%}{%endblock%}でサブページの塗りつぶし領域の例を指定します.
    
    
    
        
        {% block title %}          title     ,     title ,      {% endblock %}
    
    
    

    {% block content %}{% endblock %}

    {% block footer %}{% endblock %} {% block scripts %}{% endblock %}

    別の文字ページを新規作成します.html、マスターページを適用し、対応する領域を入力します.例は次のとおりです.
    {% extends './layout.html' %}
    {% block title %}   title,         title block {% endblock %}
    {% block content %}
        

    content block

    {% endblock %} {% block footer %}

    footer block

    {% endblock %} {% block scripts %} console.log(' , '); console.log(' '); {% endblock %}

    swigでchildをレンダリングする.html、結果は以下のように示されていますが、結果に基づいてマスターページの使い方を分析すると、直感的に分かるはずです.
    注入データの使用
    ページをレンダリングする前に注入されたデータは
    {
         name: ’ni.ke’,
         age: 18
    }

    ページ内で{name}}構文を使用して、データ・オブジェクトに入力されたnameプロパティをレンダリングします.
    判断とループ
    {% if value %}
         

    value

    {%endif%} {%for item in list%}

    {{ item.value }}

    {%endfor%}

    コメント
    expressフロントエンドフレームワークを使用する場合は、swig公式のpackageを直接使用すればよい.Koaを使用すると、tjで書かれたco-viewsモジュールを借りて補助することができ、swigだけでなくjade、ejsなどのテンプレートエンジンもサポートされます.