openn2o-template.jsjs 模板引擎
最快的js 模板引擎，每秒可達1200萬次渲染
可在node和瀏覽器端使用。
詳情使用node exp_bench.js 示例查看， 開通AOT和JIT編譯模式。
node批量編譯示例
-------------
m1.html 模板文件
{#
m1 hbox 橫向滾動抽屜
#}
<div class="heading">
<div class="title" style="padding:0.5rem;"><h3>{*data.name*}</h3></div>
<nav class="nav">
<a><i class="icon icon-sort-by-attributes-alt"></i></a>
</nav>
</div>
{%foreach v in data.data do%}
<a class="item with-avatar multi-lines" data-item="{*v.book_id*}">
<div class="avatar rounded yellow" style="pointer-events:none;width:3.6rem;height:4.5rem">
<img src="res/{*v.book_id*}/icon.jpg">
</div>
<div class="content" style="pointer-events:none;">
<div class="title" style="color:#000;pointer-events:none; font-bold:100; padding-left:5px; font-size:0.7rem">{*v.name*}</div>
<div class="subtitle" style="padding-left:5px;pointer-events:none; font-size:0.6rem;line-height:0.8rem;">
{%if (v.keyword.length>50) do%}
{*v.keyword.substring(0,50)*} ...
{%else%}
{*v.keyword*}
{%end%}<br>
<span>{*v.author*} | {*v.book_type*} | {*v.status*}</span>
</div>
</div>
</a>
{%end%}
m3.html 模板
{#
m3有圖標也有簡介的模塊視圖
#}
<div class="heading">
<div class="title" style="padding:0.5rem;"><h3>{*data.name*}</h3></div>
<nav class="nav">
<a><i class="icon icon-sort-by-attributes-alt"></i></a>
</nav>
</div>
{%foreach v in data.data do%}
<a class="item with-avatar multi-lines" data-item="{*v.book_id*}">
<div class="avatar rounded yellow" style="pointer-events:none;width:3.6rem;height:4.5rem">
<img src="res/{*v.book_id*}/icon.jpg">
</div>
<div class="content" style="pointer-events:none;">
<div class="title" style="color:#000;pointer-events:none; font-bold:100; padding-left:5px; font-size:0.7rem">{*v.name*}</div>
<div class="subtitle" style="padding-left:5px;pointer-events:none; font-size:0.6rem;line-height:0.8rem;">
{%if (v.keyword.length>50) do%}
{*v.keyword.substring(0,50)*} ...
{%else%}
{*v.keyword*}
{%end%}<br>
<span>{*v.author*} | {*v.book_type*} | {*v.status*}</span>
</div>
</div>
</a>
{%end%}
m4.html 模板文件
{#
m4是首元素權(quán)限其余元素只顯示圖標
#}
<div class="heading">
<div class="title" style="padding:0.5rem;"><h3>{*data.name*}</h3></div>
<nav class="nav">
<a><i class="icon icon-sort-by-attributes-alt"></i></a>
</nav>
</div>
{%header = true;%}
{%foreach v in data.data do%}
{%if (header==true) do%}
<a class="item with-avatar multi-lines" data-item="{*v.book_id*}">
<div class="avatar rounded yellow" style="pointer-events:none;width:3.6rem;height:4.5rem">
<img src="res/{*v.book_id*}/icon.jpg">
</div>
<div class="content" style="pointer-events:none;">
<div class="title" style="color:#000;pointer-events:none; font-bold:100; padding-left:5px; font-size:0.7rem">{*v.name*}</div>
<div class="subtitle" style="padding-left:5px;pointer-events:none; font-size:0.6rem;line-height:0.8rem;">
{%if (v.keyword.length>50) do%}
{*v.keyword.substring(0,50)*} ...
{%else%}
{*v.keyword*}
{%end%}<br>
<span>{*v.author*} | {*v.book_type*} | {*v.status*}</span>
</div>
</div>
</a>
{%header = false%}
<div class="row">
{%else%}
<div class="cell-3" style="padding:.7rem ;">
<a class="item with-avatar multi-lines" data-item="{*v.book_id*}">
<div class="avatar rounded yellow" style="pointer-events:none;width:3.6rem;height:4.5rem">
<img src="res/{*v.book_id*}/icon.jpg">
</div>
<div class="content" style="pointer-events:none;">
<div class="subtitle" style="font-size:0.6rem;line-height:0.8rem; padding-top:0.5rem;">{*v.name*}</div>
</div>
</a>
</div>
{%end%}
{%end%}
</div>
-------------
//生成一個二進制的模板代碼壓縮文件
var template = require("./template.js").template;
template.info();
var a = template.precompile("./" , "a.out");
template.load("a.out");
輸入文件夾 輸出2進制文件，輸出2進制文件可通過瀏覽器示例處理。
瀏覽器示例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="template.js"></script>
</head>
<body>
<script>
template.load("a.out", function (){
console.time ("t")
for(var i = 0; i< 1000000; i++) {
template.render("head.html" , {name:"agent.zy"});
}
console.timeEnd ("t")
});
console.log(template)
</script>
</body>
</html>
hello World示例
var template = require("./template.js").template;
var helloPtr = template.compile("{{name}}, welcome!");
console.log(helloPtr({ name : "agent.zy" }));
模板語法
1. {{expression}} 內(nèi)容語法
<header>
<div id="{{name}}">
""
</div>
<div id="{{name}}">
""
</div>
<div id="{{name}}" >
"{{ddd}}"
</div>
</header>
2. {*expression*} 變量語法
var template = require("./template.js").template;
template.info();
console.log(template.compile('{*data["foo"]*}' , 1)());
var tml5 = "{%\
var a = 10\
%}"
var tml6 = "condition {*a*}";
console.log( tml5 + tml6);
var a = template.compile(tml5 + tml6 , 2);
console.log("result:",a({"k1":2,"k2":"v2"}));
3. {%expression%} 邏輯語法
if 語句
var template = require("./template.js").template;
template.info();
var str = `
{% if (data['k1']==1) do %}
value eq 1 out
{%else%}
value neq 1 out
{%end%}
`
console.log( "tml=" , str );
var a = template.compile(str , 2);
console.log("===============");
console.log("result:", a({"k1":2,"k2":"v2"}));
for each
var template = require("./template.js").template;
template.info();
var str = `
{%foreach v in data do%}
{*v*} {%EOL%}
{%end%}
`
var a = template.compile(str , 3);
console.log("result:",a({"k1":"v1","k2":"v2"}));
for in
var template = require("./template.js").template;
template.info();
var str = `
{%for d in data do%}
key 是{*d*} 并且元素是 {*data[d]*} 換行 {%EOL%}
{%end%}
`
console.log( str );
var a = template.compile(str , 2);
console.log("result:",a({"k1":"frist","k2":"second"}));
ipairs 語法
var template = require("./template.js").template;
template.info();
var tml8 = "{%\
ipairs i,v in data do\
%}"
var tml9 = " {*i*} {*v.k1*} {%EOL%}";
var tml10 = "{%end%}"
var a = template.compile(tml8 + tml9 + tml10 , 3);
console.log("result:",a([{"k1":"v1"},{"k1":"v2"},{"k1":"v3"} ]));
4. {#expression#} 注釋語法
注釋語法
var template = require("./template.js").template;
template.info();
var tml8 = "{# \
this is a note !!!\
#} hello {# this is note !!!#}222"
var a = template.compile(tml8 , 3);
console.log("result:",a({"k1":"v1","k2":"v2"}));
5. {#expression#} 繼承語法
模板繼承語法 組合
var template = require("./template.js").template;
template.info();
var tml8 = "{(head.html)} TML {# this is note !!!#}222 TML"
var a = template.compile(tml8 , 3);
console.log("result=",a({"name":"v1","k2":"v2"}));評論
圖片
表情