雑記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%}でサブページの塗りつぶし領域の例を指定します.
別の文字ページを新規作成します.html、マスターページを適用し、対応する領域を入力します.例は次のとおりです.
swigでchildをレンダリングする.html、結果は以下のように示されていますが、結果に基づいてマスターページの使い方を分析すると、直感的に分かるはずです.
注入データの使用
ページをレンダリングする前に注入されたデータは
ページ内で{name}}構文を使用して、データ・オブジェクトに入力されたnameプロパティをレンダリングします.
判断とループ
コメント
expressフロントエンドフレームワークを使用する場合は、swig公式のpackageを直接使用すればよい.Koaを使用すると、tjで書かれたco-viewsモジュールを借りて補助することができ、swigだけでなくjade、ejsなどのテンプレートエンジンもサポートされます.
jadeを使う過程でまだ柔軟なインデント文法に適応できず、htmlラベル文法との大きなずれに適応できなかった.私はjadeラベルのインデントを書くとき、よく間違いをして、それから何度も調べなければなりません.コードのインデントはもともと直感的なためですが、jadeの中では文法で、それを使ってビューを書くのは、個人的には不快です.
それから私は他のテンプレートを探して、aspを書くようにしたいと思っています.NetMVCのcshtmlビューファイルのようにhtmlタグをほぼ保持している様子は、データ注入時のみ、プログラム制御を加えてHTMLと混載する.
その後、ejsとswigを考えましたが、全体的にejsはswigより強く、ランキングも上位にランクインしました(ejsはTJがやっていて、ファングループを持っています).しかし、私はその後ずっと使っていた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などのテンプレートエンジンもサポートされます.