openn2o-template.js 1.4 版本发布

1.4版本升级后，每秒可达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是首元素权限其余元素只显示图标
#}

<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}} 内容语法

<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"}));