openn2o-template.js 1.4 版本发布

栏目: 软件资讯 · 发布时间: 5年前

内容简介：1.4版本升级后，每秒可达1200万次渲染。可在 node 和浏览器端使用。详情使用 node exp_bench.js 示例查看，开通AOT和JIT编译模式。 node批量编译示例 ------------- m1.html 模板文件 {# m1 hbox 横向滚...

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

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。

码农书籍

Coming of Age in Second Life

Tom Boellstorff / Princeton University Press / 2008-04-21 / USD 29.95

The gap between the virtual and the physical, and its effect on the ideas of personhood and relationships, is the most interesting aspect of Boellstorff's analysis... Boellstorff's portrayal of a virt......一起来看看《Coming of Age in Second Life》这本书的介绍吧!

码农工具