art-template

本質

正則、置換

とくせい

JavaScriptレンダーの限界に近いパフォーマンス

デバッグは友好的です:文法、実行時のエラーログはテンプレートの行に正確です;テンプレートファイル上のブレークポイント

をサポート

圧縮出力ページのHTML、CSS、JSコード

をサポート

Express、Koa、Webpack

をサポート

は、テンプレート継承とサブテンプレート

をサポートする.

EJS、Underscore、LoDashテンプレート構文

に対応

テンプレートコンパイル後のコードサポート厳格モードで

を実行

JavaScript文とテンプレート構文のブレンド

をサポート

カスタムテンプレートの構文解析規則

をサポートする

ブラウザバージョン6 KBサイズ

のみ
レンダー変数(Render Variables)

//     




    <h1>{{title}}</h1>


var data={
    title:"hello osoLife"
};
var htmlStr=template("tpl",data);
$("#box").html(htmlStr);

//     
      



    <%=msg%>


var data={
    msg:"hello world"
};
var htmlStr="";
htmlStr=template("tpl",data); 
$("#box").html(htmlStr);

レンダーリスト(Render List)

  



    <%for(var i=0;i<artList.length;i++){%>
           ：<%=artList[i].title%><br/>
    <%}%>


var data={
    artList:[
        {title:"     "},
        {title:"     "},
        {title:"     "},
        {title:"     "},
        {title:"     "}
    ]
};
var htmlStr=template("tpl",data);
$("#box").html(htmlStr);

文字列テンプレートのコンパイル

//     JS 
//    ：



var tplStr=""; //      
var data={msg:"osoLife"};
var render=template.compile(tplStr); //         
var htmlStr=render(data); //       ，    ，  htmlStr
$("#box").html(htmlStr);

//    ：



var str='
'+
    ''+
    '
'+
    ''+
    '
';
var data={
    arr:['A','B','C']
};
var render=template.compile(str); //       
var htmlStr=render(data);
$("#box").html(htmlStr);

each(サイクル)

//     
// 1.    




    <h1>{{title}}</h1>  
    <ul>
        {{each content value key}}  
        <li>{{value}}</li>
        {{/each}}
    </ul>


var data={
    title:'    ',
    content:['  ','  ','  ']
};
var htmlStr=template("tpl",data);
$("#box").html(htmlStr);

// 2.  JSON
div id="box">

<ul>
{{each json value key}}
<li>{{key}}------->{{value}}</li>
{{/each}}
</ul>
var data={
json:{
a:'A',
b:'B',
c:'C'
}
};
var htmlStr=template("tpl",data);
$("#box").html(htmlStr);
//原始文法
<h1><%=title%></h1>
<ul>
<%for(var i=0;i<arr.length;i++){%>
<li><%=arr[i]%>---><%=i%></li>
<%}%>
</ul>
var data={
title:'hello world',
arr:['A','B','C']
};
var htmlStr=template("tpl",data);
$("#box").html(htmlStr);
include

//     


    

    <h1>{{title}}</h1>
    {{include 'list'}}


    <ul>
        {{each json value key}} 
        <li>{{key}}------->{{value}}</li>
        {{/each}}
    </ul>


var data={
    title:'hello world',
    json:{
        a:'A',
        b:'B',
        c:'C'
    }
};
var htmlStr=template("tpl",data);
$("#box").html(htmlStr);

//     


    

    <h1><%=title%></h1>
    <ul>
        <%for(var i=0;i<arr.length;i++){%>
            <li><%=arr[i]%>---><%=i%></li>
        <%}%>
    </ul>
    <%include('list2')%>


    <ol>
        <%for(var key in json){%>
            <li><%=key%>-----><%=json[key]%></li>
        <%}%>
    </ol>

非エスケープ出力

  ：
{{#msg}} 



    

    <p><%=#title%></p>


var data={
    title:'     ',
};
var htmlStr=template("tpl",data);
$("#box").html(htmlStr);

定義子の変更(カスタムテンプレートタグ)