art-templateテンプレートエンジンを使用してデータをレンダリングする
4301 ワード
一:art-templateとは art-templateは、シンプルで超高速なテンプレートエンジンです.役割ドメイン事前宣言技術を使用してテンプレートのレンダリング速度を最適化し、JavaScriptの限界に近い動作性能を実現し、NodeJSとブラウザを同時にサポートします.art-templateを使用すると、コードのメンテナンスも容易になります.以前は、jsファイルにテンプレート文字列として書き込まれたhtmlコンテンツをレンダリングしていましたが、htmlコンテンツを変更する必要がある場合は、jsで変更する必要があります.テンプレートエンジンを使用すると、htmlファイルでhtml内容を変更するだけです.また、テンプレートエンジンを使用するとDOM操作の効率も向上します.
二:art-template特性 JavaScriptレンダーの限界に近いパフォーマンス デバッグは友好的です:文法、実行時のエラーログはテンプレートの行に正確です;テンプレートファイル上のブレークポイント をサポート Express、Koa、Webpack をサポートは、テンプレート継承とサブテンプレート をサポートする.ブラウザバージョン6 KBサイズ のみ
三:art-templateと他のテンプレートエンジンの運行速度の比較
テンプレートエンジン運転速度比較
四:art-templateに関するいくつかの学習サイト
https://github.com/aui/art-template(art-template完全ドキュメント)
https://aui.github.io/art-template/zh-cn/index.html(art-template中国語ドキュメント)
五:art-templateをインストールするには、以下の2つの方法があります.コマンドラインでは、次のコマンド が使用する.はブラウザでリアルタイムでコンパイルして、リンクctrl+sに入ってファイルをプロジェクトディレクトリに保存することもできます:lib/template-web.js(gzip:6 kbというソースコードは圧縮されています) 六:art-template構文 art-templateは、標準構文と元の構文をサポートします.標準構文はテンプレートを読みやすく書くことができますが、元の構文は強力な論理表現能力を持っています.(例えば、ループを再使用する場合、標準構文はeachループのみを使用することができ、元の構文はfor、whileなどのループも使用することができる) .標準構文は、基本テンプレート構文および基本JavaScript式をサポートします.元の構文は、EJSと同様に任意のJavaScript文をサポートします.
二:art-template特性
三:art-templateと他のテンプレートエンジンの運行速度の比較
テンプレートエンジン運転速度比較
四:art-templateに関するいくつかの学習サイト
https://github.com/aui/art-template(art-template完全ドキュメント)
https://aui.github.io/art-template/zh-cn/index.html(art-template中国語ドキュメント)
五:art-templateをインストールするには、以下の2つの方法があります.
npm install art-template --save
{{value}}
{{data.key}}
{{data['key']}}
{{a ? b : c}}
{{a || b}}
{{a + b}}
， ，
：
- ，
template(filename, data)は ファイルパスをサポートしていません. ではdocument.getElementById(filename).innerHTMLを してテンプレートを します. です.
{{if user}}
<h2>{{user.name}}</h2>
{{/if}}
：art-template ：
<% for (var i = 0, len = list.length; i < len; i++) { var curr=list[i]; %>
<div class="col_1_of_single1 span_1_of_single1">
<a href="/html/single.html">
<img src="<%= curr.img_url %>" class="img-responsive" alt=""/>
<h3><%= curr.title %></h3>
<p><%= curr.desc %></p>
<h4><%= curr.price %></h4>
</a>
</div>
<% } %>
<!-- list js ，curr list ，index ， curr【index】 list-->
{{ each list curr index }}
<div class="col_1_of_single1 span_1_of_single1">
<a href="/html/single.html">
<img src="{{ curr.img_url2 }}" class="img-responsive" alt=""/>
<h3>{{ curr.title }}</h3>
<p>{{ curr.desc }}</p>
<h4>{{ curr.price }}</h4>
</a>
</div>
{{ /each }}
require(["config"], function(){
require(["jquery", "template", "header", "footer"], function($, template, header){
$.getJSON("http://rap2api.taobao.org/app/mock/25320/api/list", function(data){
const html = template("list_temp2", {list : data.res_body.data});
$(".list_box").html(html);
})
});
});