LAYTPLは、破壊的なJavaScriptテンプレートエンジンです。巧妙な実装方法を使用して、独自のサイズを小さくて絶妙にします。究極のパフォーマンスを備えているだけでなく、従来のフロントエンドエンジンのほとんどすべての機能も備えています。すべての変換魔法は1kb未満のコードによって作成されますが、これは革命のように思えますが、Laytplが実際に最も軽い方法でそれを世界に提示していることは間違いありません。このアプリケーションにさらされたことがない場合は、それは問題ではありません。次のストーリーにより、LayTPLを選択するのを待つことができなくなり、それ以降、ページのデータレンダリングをよりよく把握し、人生のピークに到達できます!
LayTPLのアドバンテージ
•優れたパフォーマンスは、ArtTemplateとDOTのほぼ1倍速いパフォーマンスの王として知られており、Baidutemplate、Kissytemplateなどよりも20〜40倍高速です。データスケールとレンダリング頻度が大きいほど、それはより明白です。
•ボリュームは単に極端から極端なもので、1kb未満であり、将来的には小さくなります。
•脱出などのセキュリティメカニズムがあり、比較的科学的なエラー報告機能があります。
•ネイティブJavaScriptは、テンプレートの柔軟性を完全に確保するために、テンプレートで任意に記述できます
•node.jsプラットフォームでアプリケーションをサポートします
•すべての古代または現代の主流ブラウザをサポートします
使い方
コードコピーは次のとおりです。
//ステップ1:テンプレートを書きます。スクリプトタグを使用して、次のようなテンプレートを保存できます。
<script id = "demo" type = "text/html">
<h1> {{d.title}} </h1>
<ul>
{{#for(var i = 0、len = d.list.length; i <len; i ++){}}
<li>
<span> name:{{d.list [i] .name}} </span>
<span> city:{{d.list [i] .city}} </span>
</li>
{{#}}}
</ul>
</script>
//ステップ2:ビューを作成します。レンダリング結果をレンダリングするために使用されます。
<div id = "view"> </div>
//ステップ3:テンプレートをレンダリングします
var data = {
タイトル:「フロントエンド包囲」、
リスト:[{name: 'xianxin'、city: 'hangzhou'}、{name: 'xie liang'、city: 'beijing'}、{name: 'qianqian'、city: 'hangzhou'}、{name: 'dem'、city: 'beijing'}]
};
var gettpl = document.getElementById( 'demo')。innerhtml;
laytpl(gettpl).render(data、function(html){
document.getElementById( 'View')。innerhtml = html;
});
ドキュメントの説明
1。テンプレート構文
HTMLを逃れることなく通常のフィールドを出力:{{d.field}}
通常のフィールドを出力してHTMLをエスケープします:{{= d.field}}
JavaScriptスクリプト:{{#javaScriptステートメント}}
2。組み込みメソッド
1):laytpl(テンプレート); //コア関数、オブジェクトを返します
var tpl = laytpl(テンプレート);
tpl.render(data、callback); //レンダリング方法、レンダリング結果を返し、非同期と同期の2つのモードをサポートします
A):非同期
tpl.render(data、function(result){
console.log(result);
});
b):同期
var result = tpl.render(data);
console.log(result);
2):laytpl.config(options); //構成を初期化します
オプションはオブジェクトです
{open: 'start tag'、close: 'close tag'}
3):laytpl.v //バージョン番号を取得します
注意すべきこと
1. LayTpl.jsを直接導入するだけで、SEAJやその他のモジュラーロードを直接使用することもできます。
2。LAYTPLは、ビジネスと個人のプラットフォームの両方で自由に使用できます。
3.あらゆる機会にソースを維持し、layoutpl.jsヘッダーのコメントを削除しないでください。
公式ウェブサイト:http://sentsin.com/layui/laytpl/
ダウンロード://www.vevb.com/codes/207072.html