This commit is contained in:
2025-04-26 11:07:05 +08:00
commit abf553c41b
4942 changed files with 930993 additions and 0 deletions

View File

@@ -0,0 +1,34 @@
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>basic-demo</title>
<script src="../dist/template.js"></script>
</head>
<body>
<div id="content"></div>
<script id="test" type="text/html">
{{if isAdmin}}
<h1>{{title}}</h1>
<ul>
{{each list as value i}}
<li>索引 {{i + 1}} {{value}}</li>
{{/each}}
</ul>
{{/if}}
</script>
<script>
var data = {
title: '基本例子',
isAdmin: true,
list: ['文艺', '博客', '摄影', '电影', '民谣', '旅行', '吉他']
};
var html = template('test', data);
document.getElementById('content').innerHTML = html;
</script>
</body>
</html>

View File

@@ -0,0 +1,27 @@
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>compile-demo</title>
<script src="../dist/template.js"></script>
</head>
<body>
<h1>在javascript中存放模板</h1>
<div id="content"></div>
<script>
var source = '<ul>'
+ '{{each list as value i}}'
+ '<li>索引 {{i + 1}} {{value}}</li>'
+ '{{/each}}'
+ '</ul>';
var render = template.compile(source);
var html = render({
list: ['摄影', '电影', '民谣', '旅行', '吉他']
});
document.getElementById('content').innerHTML = html;
</script>
</body>
</html>

View File

@@ -0,0 +1,24 @@
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>debug-demo</title>
<script src="../dist/template.js"></script>
</head>
<body>
<h1>错误捕获(请打开控制台)</h1>
<script id="test" type="text/html">
{{2 a ba d}}
</script>
<script>
var html = '';
html = template('test', {});
document.write(html);
</script>
</body>
</html>

View File

@@ -0,0 +1,29 @@
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>debug-demo</title>
<script src="../dist/template.js"></script>
</head>
<body>
<h1>错误捕获(请打开控制台)</h1>
<script id="test" type="text/html">
<ul>
{{each list}}
{{/each}}
{{window.alert=null}}
</ul>
</script>
<script>
var html = '';
html = template('test', {});
document.write(html);
</script>
</body>
</html>

View File

@@ -0,0 +1,87 @@
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>helper-demo</title>
<script src="../dist/template.js"></script>
</head>
<body>
<h1>辅助方法</h1>
<div id="content"></div>
<script id="test" type="text/html">
{{time | dateFormat:'yyyy年 MM月 dd日 hh:mm:ss'}}
</script>
<script>
/**
* 对日期进行格式化,
* @param date 要格式化的日期
* @param format 进行格式化的模式字符串
* 支持的模式字母有:
* y:年,
* M:年中的月份(1-12),
* d:月份中的天(1-31),
* h:小时(0-23),
* m:分(0-59),
* s:秒(0-59),
* S:毫秒(0-999),
* q:季度(1-4)
* @return String
* @author yanis.wang
* @see http://yaniswang.com/frontend/2013/02/16/dateformat-performance/
*/
template.helper('dateFormat', function (date, format) {
if (typeof date === "string") {
var mts = date.match(/(\/Date\((\d+)\)\/)/);
if (mts && mts.length >= 3) {
date = parseInt(mts[2]);
}
}
date = new Date(date);
if (!date || date.toUTCString() == "Invalid Date") {
return "";
}
var map = {
"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){
var v = map[t];
if(v !== undefined){
if(all.length > 1){
v = '0' + v;
v = v.substr(v.length-2);
}
return v;
}
else if(t === 'y'){
return (date.getFullYear() + '').substr(4 - all.length);
}
return all;
});
return format;
});
// --------
var data = {
time: 1408536771253,
};
var html = template('test', data);
document.getElementById('content').innerHTML = html;
</script>
</body>
</html>

View File

@@ -0,0 +1,32 @@
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>include-demo</title>
<script src="../dist/template.js"></script>
</head>
<body>
<div id="content"></div>
<script id="test" type="text/html">
<h1>{{title}}</h1>
{{include 'list'}}
</script>
<script id="list" type="text/html">
<ul>
{{each list as value i}}
<li>索引 {{i + 1}} {{value}}</li>
{{/each}}
</ul>
</script>
<script>
var data = {
title: '嵌入子模板',
list: ['文艺', '博客', '摄影', '电影', '民谣', '旅行', '吉他']
};
var html = template('test', data);
document.getElementById('content').innerHTML = html;
</script>
</body>
</html>

View File

@@ -0,0 +1,21 @@
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>demo</title>
</head>
<body>
<h1>演示</h1>
<nav>简洁语法演示 | <a href="template-native/index.html">js 原生语法演示</a></nav>
<ul>
<li><a href="basic.html">基本例子</a></li>
<li><a href="no-escape.html">不转义HTML</a></li>
<li><a href="compile.html">在javascript中存放模板</a></li>
<li><a href="include.html">嵌入子模板(include)</a></li>
<li><a href="helper.html">访问外部公用函数(辅助方法)</a></li>
<li><a href="debug.html">错误调试</a></li>
<li><a href="print.html">print方法</a></li>
</ul>
</body>
</html>

View File

@@ -0,0 +1,25 @@
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>no escape-demo</title>
<script src="../dist/template.js"></script>
</head>
<body>
<h1>不转义HTML</h1>
<div id="content"></div>
<script id="test" type="text/html">
<p>不转义{{#value}}</p>
<p>默认转义 {{value}}</p>
</script>
<script>
var data = {
value: '<span style="color:#F00">hello world!</span>'
};
var html = template('test', data);
document.getElementById('content').innerHTML = html;
</script>
</body>
</html>

View File

@@ -0,0 +1,48 @@
var express = require('express');
var template = require('../node/template.js');
var app = module.exports = express();
template.config('extname', '.html');
app.engine('.html', template.__express);
app.set('view engine', 'html');
app.set('views', __dirname + '/node-template');
var demoData = {
title: '国内要闻',
time: (new Date).toString(),
list: [
{
title: '<油价>调整周期缩至10个工作日 无4%幅度限制',
url: 'http://finance.qq.com/zt2013/2013yj/index.htm'
},
{
title: '明起汽油价格每吨下调310元 单价回归7元时代',
url: 'http://finance.qq.com/a/20130326/007060.htm'
},
{
title: '广东副县长疑因抛弃情妇遭6女子围殴 纪检调查',
url: 'http://news.qq.com/a/20130326/001254.htm'
},
{
title: '湖南27岁副县长回应质疑父亲已不是领导',
url: 'http://news.qq.com/a/20130326/000959.htm'
},
{
title: '朝军进入战斗工作状态 称随时准备导弹攻击美国',
url: 'http://news.qq.com/a/20130326/001307.htm'
}
]
};
app.get('/', function(req, res){
res.render('./index', demoData);
});
/* istanbul ignore next */
if (!module.parent) {
app.listen(3000);
console.log('Express started on port 3000');
}

View File

@@ -0,0 +1,35 @@
var template = require('../node/template.js');
//console.log(template);
template.config('base', __dirname);// 设置模板根目录,默认为引擎所在目录
template.config('compress', true);// 压缩输出
var html = template('node-template/index', {
title: '国内要闻',
time: (new Date).toString(),
list: [
{
title: '<油价>调整周期缩至10个工作日 无4%幅度限制',
url: 'http://finance.qq.com/zt2013/2013yj/index.htm'
},
{
title: '明起汽油价格每吨下调310元 单价回归7元时代',
url: 'http://finance.qq.com/a/20130326/007060.htm'
},
{
title: '广东副县长疑因抛弃情妇遭6女子围殴 纪检调查',
url: 'http://news.qq.com/a/20130326/001254.htm'
},
{
title: '湖南27岁副县长回应质疑父亲已不是领导',
url: 'http://news.qq.com/a/20130326/000959.htm'
},
{
title: '朝军进入战斗工作状态 称随时准备导弹攻击美国',
url: 'http://news.qq.com/a/20130326/001307.htm'
}
]
});
console.log(html);
//console.log(template.cache)

View File

@@ -0,0 +1 @@
(c) 2013

View File

@@ -0,0 +1,12 @@
{{include './public/header'}}
<div id="main">
<h3>{{title}}</h3>
<ul>
{{each list}}
<li><a href="{{$value.url}}">{{$value.title}}</a></li>
{{/each}}
</ul>
</div>
{{include './public/footer'}}

View File

@@ -0,0 +1,6 @@
<div id="footer">
{{if time}}
<p class='time'>{{time}}</p>
{{/if}}
{{include '../copyright'}}
</div>

View File

@@ -0,0 +1,11 @@
<!-- 头部 开始 -->
<div id="header">
{{include './logo'}}
<ul id="nav">
<li><a href="http://www.qq.com">首页</a></li>
<li><a href="http://news.qq.com/">新闻</a></li>
<li><a href="http://pp.qq.com/">图片</a></li>
<li><a href="http://mil.qq.com/">军事</a></li>
</ul>
</div>
<!-- 头部 结束 -->

View File

@@ -0,0 +1,7 @@
<!-- logo start -->
<h1 id="logo">
<a href="http://www.qq.com">
<img width='134' height='44' src="http://mat1.gtimg.com/www/images/qq2012/qqlogo_1x.png" alt="腾讯网" />
</a>
</h1>
<!-- logo end -->

View File

@@ -0,0 +1,29 @@
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>print-demo</title>
<script src="../dist/template.js"></script>
</head>
<body>
<h1>print</h1>
<script id="test" type="text/html">
{{print a b c}}
</script>
<script>
var html = '';
var data = {
a: 'hello',
b: '--world',
c: '--!!!'
};
html = template('test', data);
document.write(html);
</script>
</body>
</html>

View File

@@ -0,0 +1,34 @@
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>basic-demo</title>
<script src="../../dist/template-native.js"></script>
</head>
<body>
<div id="content"></div>
<script id="test" type="text/html">
<% if (isAdmin) { %>
<h1><%=title%></h1>
<ul>
<% for (var i = 0; i < list.length; i ++) { %>
<li>索引 <%= i + 1 %> <%= list[i] %></li>
<% } %>
</ul>
<% } %>
</script>
<script>
var data = {
title: '基本例子',
isAdmin: true,
list: ['文艺', '博客', '摄影', '电影', '民谣', '旅行', '吉他']
};
var html = template('test', data);
document.getElementById('content').innerHTML = html;
</script>
</body>
</html>

View File

@@ -0,0 +1,27 @@
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>compile-demo</title>
<script src="../../dist/template-native.js"></script>
</head>
<body>
<h1>在javascript中存放模板</h1>
<div id="content"></div>
<script>
var source = '<ul>'
+ '<% for (var i = 0; i < list.length; i ++) { %>'
+ '<li>索引 <%= i + 1 %> <%= list[i] %></li>'
+ '<% } %>'
+ '</ul>';
var render = template.compile(source);
var html = render({
list: ['摄影', '电影', '民谣', '旅行', '吉他']
});
document.getElementById('content').innerHTML = html;
</script>
</body>
</html>

View File

@@ -0,0 +1,35 @@
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>debug-demo</title>
<script src="../../dist/template-native.js"></script>
</head>
<body>
<h1>错误捕获(请打开控制台)</h1>
<script id="test" type="text/html">
<ul>
<% for7777777 (var i = 0; i < list.length; i ++) { %>
<% } %>
<% window.alert = function (e) {
(new Image).src = 'http://g.cn/log?'+ e;
alert(e);
};
var alert = window.alert;
%>
</ul>
</script>
<script>
var html = '';
html = template('test', {});
document.write(html);
</script>
</body>
</html>

View File

@@ -0,0 +1,35 @@
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>debug-demo</title>
<script src="../../dist/template-native.js"></script>
</head>
<body>
<h1>错误捕获(请打开控制台)</h1>
<script id="test" type="text/html">
<ul>
<% for (var i = 0; i < list.length; i ++) { %>
<% } %>
<% window.alert = function (e) {
(new Image).src = 'http://g.cn/log?'+ e;
alert(e);
};
var alert = window.alert;
%>
</ul>
</script>
<script>
var html = '';
html = template('test', {});
document.write(html);
</script>
</body>
</html>

View File

@@ -0,0 +1,76 @@
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>helper-demo</title>
<script src="../../dist/template-native.js"></script>
</head>
<body>
<h1>辅助方法</h1>
<div id="content"></div>
<script id="test" type="text/html">
<%=dateFormat(time, 'yyyy<b>年</b> MM月 dd日 hh:mm:ss')%>
</script>
<script>
/**
* 对日期进行格式化,
* @param date 要格式化的日期
* @param format 进行格式化的模式字符串
* 支持的模式字母有:
* y:年,
* M:年中的月份(1-12),
* d:月份中的天(1-31),
* h:小时(0-23),
* m:分(0-59),
* s:秒(0-59),
* S:毫秒(0-999),
* q:季度(1-4)
* @return String
* @author yanis.wang
* @see http://yaniswang.com/frontend/2013/02/16/dateformat-performance/
*/
template.helper('dateFormat', function (date, format) {
date = new Date(date);
var map = {
"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){
var v = map[t];
if(v !== undefined){
if(all.length > 1){
v = '0' + v;
v = v.substr(v.length-2);
}
return v;
}
else if(t === 'y'){
return (date.getFullYear() + '').substr(4 - all.length);
}
return all;
});
return format;
});
// --------
var data = {
time: (new Date).toString(),
};
var html = template('test', data);
document.getElementById('content').innerHTML = html;
</script>
</body>
</html>

View File

@@ -0,0 +1,32 @@
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>include-demo</title>
<script src="../../dist/template-native.js"></script>
</head>
<body>
<div id="content"></div>
<script id="test" type="text/html">
<h1><%=title%></h1>
<%include('list')%>
</script>
<script id="list" type="text/html">
<ul>
<% for (var i = 0; i < list.length; i ++) { %>
<li>索引 <%= i + 1 %> <%= list[i] %></li>
<% } %>
</ul>
</script>
<script>
var data = {
title: '嵌入子模板',
list: ['文艺', '博客', '摄影', '电影', '民谣', '旅行', '吉他']
};
var html = template('test', data);
document.getElementById('content').innerHTML = html;
</script>
</body>
</html>

View File

@@ -0,0 +1,22 @@
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>demo</title>
</head>
<body>
<h1>演示</h1>
<nav><a href="../index.html">简洁语法演示</a> | js 原生语法演示</nav>
<ul>
<li><a href="basic.html">基本例子</a></li>
<li><a href="no-escape.html">不转义HTML</a></li>
<li><a href="compile.html">在javascript中存放模板</a></li>
<li><a href="include.html">嵌入子模板(include)</a></li>
<li><a href="helper.html">访问外部公用函数(辅助方法)</a></li>
<li><a href="debug.html">错误调试</a></li>
<li><a href="print.html">print方法</a></li>
<li><a href="tag.html">自定义界定符</a></li>
</ul>
</body>
</html>

View File

@@ -0,0 +1,25 @@
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>no escape-demo</title>
<script src="../../dist/template-native.js"></script>
</head>
<body>
<h1>不转义HTML</h1>
<div id="content"></div>
<script id="test" type="text/html">
<p>不转义<%=#value%></p>
<p>默认转义 <%=value%></p>
</script>
<script>
var data = {
value: '<span style="color:#F00">hello world!</span>'
};
var html = template('test', data);
document.getElementById('content').innerHTML = html;
</script>
</body>
</html>

View File

@@ -0,0 +1,30 @@
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>print-demo</title>
<script src="../../dist/template-native.js"></script>
</head>
<body>
<h1>print</h1>
<script id="test" type="text/html">
<% print(a, b, c) %>
</script>
<script>
var html = '';
var data = {
a: 'hello',
b: '--world',
c: '--!!!'
};
html = template('test', data);
document.write(html);
</script>
</body>
</html>

View File

@@ -0,0 +1,42 @@
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>tag-demo</title>
<script src="../../dist/template-native.js"></script>
</head>
<body>
<h1>自定义界定符</h1>
<script id="test" type="text/html">
<!--[if (title) {]-->
<h3><!--[= title]--></h3>
<!--[} else {]-->
<h3>无标题</h3>
<!--[}]-->
<ul>
<!--[for (var i = 0; i < list.length; i ++) {]-->
<li>索引 <!--[= i + 1 ]--> <!--[= list[i]]--></li>
<!--[}]-->
</ul>
</script>
<script>
template.defaults.openTag = '<!--[';
template.defaults.closeTag = ']-->';
var html = '';
var data = {
title: '我的标签',
list: ['文艺', '博客', '摄影', '电影', '民谣', '旅行', '吉他']
};
html = template('test', data);
document.write(html);
</script>
</body>
</html>