#JTemplate
@author yangjian102621@gmail.com
@version 1.0.5
插件描述:
JTemplate 是一个轻量的javascript模板引擎,除去注释不到200行代码,但却几乎实现常用模板引擎的所有功能。而且还添加了一些内置的方便使用的标签,也支持自定义标签解析。有web版和nodejs版,高效轻量。
使用demo
模板代码
<script type="text/html" id="template">
<h3>{[title]}</h3>
<ul>
{[loop list value index]}
<li class="loop">
<a href="#">{[value]}</a>
{[if value == 'xiaoming']}
<span onclick="testFun();">小明滚出去</span>
{[/if]}
<i>{[index]}</i>
</li>
{[/loop]}
{[expr: var name = "yangjian333"]}
<li>{[name.toUpperCase()]}</li>
{[if addTime != 0]}
<li>{[addTime]}</li>
{[/if]}
{[expr: var n = 3.14159]}
<li>Math.ceil(3.14159) : {[Math.ceil(n)]}</li>
<li>{[wxtime:1458005809]}</li>
<li>{[wxtime:1458015634]}</li>
<li>{[dateformat: 1458005809 | 'yyyy年MM月dd日 hh:mm:ss']}</li>
<li>{[dateformat: $addTime | 'yyyy年MM月dd日 hh:mm:ss']}</li>
<li>姓名:{[user.name]}, 年龄:{[user.age]}</li>
</ul>
</script>
<div id="container"></div>
javascript代码
data = new Array("xiaoming", "xiaoyang", "小三", "小四", "小五"); //数据模型
var template = document.getElementById("template").innerHTML;
JTemplate.assign("title", "js 模板引擎测试"); //添加数据模型
JTemplate.assign("addTime", 1458015634);
JTemplate.assign("user", {name : "曾书书", age : 108});
JTemplate.config("debug", true); //开启调试模式
//JTemplate.config("tagPrefix", "{["); //设置模板前缀
//JTemplate.config("tagSuffix", "]}"); //设置模板后缀
//JTemplate.config("debug", true); //开启调试模式
JTemplate.helper("dateformat", function(time, format) {
var date = new Date();
date.setTime(time*1000)
var map = {
"y": date.getFullYear(), //年份
"M": date.getMonth() + 1, //月份
"d": date.getDate(), //日
"h": date.getHours(), //小时
"m": date.getMinutes(), //分
"s": date.getSeconds(), //秒
"q": Math.floor((date.getMonth() + 3) / 3), //季度
"S": date.getMilliseconds() //毫秒
};
format = format.replace(/([yMdhmsqS])+/g, function(all, t){
return[map[t]];
});
return format;
});
var html = JTemplate.render(template, {list : data});
//console.log(html);
document.getElementById("container").innerHTML = html;
function testFun() {
alert("fuck it, whatever.");
}
nodejs demo
模板代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>{[title]}</title>
</head>
<body>
<h2>{[hello]}</h2>>
{[loop params key value]}
{[key]} : {[value]}
{[/loop]}
</body>
</html>
nodejs 代码
var template = require("../src/JTemplate.node.js");
var tempFile = __dirname+"/index";
template.config("template_encoding", "utf-8");
template.config("template_ext", ".html");
var html = template.render(tempFile, {
title : "测试模板引擎",
hello : "Hello, world.",
params : {
name : "xiaoyang",
age : 23
}
});
console.log(html);