当前位置：首页 > 软件库 > 程序开发 > 模板引擎 >

openn2o-template.js

js 模板引擎

授权协议 MIT

开发语言 JavaScript

所属分类程序开发、模板引擎

软件类型开源软件

地区国产

投递者笪昌翰

操作系统跨平台

开源组织无

适用人群未知

软件概览

最快的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是首元素权限其余元素只显示图标
#}

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

使用案例

js模板引擎template.js的使用

js模板引擎template.js的使用 template.js源码 /*!art-template - Template Engine | http://aui.github.com/artTemplate/*/ !function(){function a(a){return a.replace(t,"").replace(u,",").replace(v,"").replace(w,"").
template.js的使用案例

template.js是一款开源的JavaScript模板引擎，用来渲染页面的第一步：首页页面引用 <script type="text/javascript" src="js/template.js"></script> 第二步：模板创建  <script type="text/html" id="templet"> {{each object as obj i}}
template.js

\s 空白字符，包括： \b space character 空格符 \n new line character 换行符 \v vertical tab character 垂直换行符 \r 回车符 carriage return character \t tab character 制表符 \b backspace character 空格符 \f form feed character 换页符
node-pre-gyp WARN Tried to download(404): https://fsevents-binaries.s3-us-west-2.amazonaws.com/v1.2.

出现以下错误的原因是：node-pre-gyp WARN Tried to download(404): https://fsevents-binaries.s3-us-west-2.amazonaws.com/v1.2.7/fse-v1.2.7-node-v83-darwin-x64.tar.gz 【下载失败，下载的路径记录在原有的package-lock.json，现在已打不开了，所有导致这

openn2o-template.js

node批量编译示例

浏览器示例

hello World示例

模板语法

1. `{{expression}}` 内容语法

2. `{expression}` 变量语法

3. `{%expression%}` 逻辑语法

4. `{#expression#}` 注释语法

5. `{#expression#}` 继承语法

同类工具

相关阅读

相关文章

相关问答

相关文档

openn2o-template.js

node批量编译示例

浏览器示例

hello World示例

模板语法

1. {{expression}} 内容语法

2. {*expression*} 变量语法

3. {%expression%} 逻辑语法

4. {#expression#} 注释语法

5. {#expression#} 继承语法

同类工具

相关阅读

相关文章

相关问答

相关文档

1. `{{expression}}` 内容语法

2. `{expression}` 变量语法

3. `{%expression%}` 逻辑语法

4. `{#expression#}` 注释语法

5. `{#expression#}` 继承语法