JTemplate

v1.0.6

Published

2 years ago

JavaScript Template Engine

Downloads

0High
0Medium
0Low

yangjian102621

util functional template

#JTemplate

@author [email protected] @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);

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme

插件描述:

使用demo

模板代码

javascript代码

nodejs demo

模板代码

nodejs 代码