Skip to content

Commit 74a9898

Browse files
EishedEished
committed
增加template代码
1 parent 014ca89 commit 74a9898

1 file changed

Lines changed: 97 additions & 120 deletions

File tree

‎readme.md‎

Lines changed: 97 additions & 120 deletions
Original file line numberDiff line numberDiff line change
@@ -6405,9 +6405,13 @@
64056405
64066406
### 1、特性
64076407
6408-
（1）、性能卓越，执行速度通常是 Mustache 与 tmpl 的 20 多倍（性能测试）（2）、支持运行时调试，可精确定位异常模板所在语句（演示）
6408+
（1）、性能卓越，执行速度通常是 Mustache 与 tmpl 的 20 多倍（性能测试）
64096409
6410-
（3）、对 NodeJS Express 友好支持（4）、安全，默认对输出进行转义、在沙箱中运行编译后的代码（Node版本可以安全执行用户上传的模板）
6410+
（2）、支持运行时调试，可精确定位异常模板所在语句（演示）
6411+
6412+
（3）、对 NodeJS Express 友好支持
6413+
6414+
（4）、安全，默认对输出进行转义、在沙箱中运行编译后的代码（Node版本可以安全执行用户上传的模板）
64116415
64126416
（5）、支持include语句
64136417
@@ -6429,10 +6433,12 @@
64296433
64306434
{{ 与 }} 符号包裹起来的语句则为模板的逻辑表达式。
64316435
6436+
`template('test', data)` : 渲染
6437+
64326438
（3）、输出表达式
64336439
6434-
对内容编码输出： {{content}}
6435-
不编码输出： {{#content}}
6440+
对内容编码(转义)输出：` {{content}} `
6441+
不编码(转义)输出：` {{#content}} `
64366442
编码可以防止数据中含有 HTML 字符串，避免引起 XSS 攻击。
64376443
64386444
（4）、条件表达式
@@ -6455,7 +6461,7 @@
64556461
{{each list as value index}}
64566462
<li>{{index}} - {{value.user}}</li>
64576463
{{/each}}
6458-
// 亦可以被简写：
6464+
// 亦可以被简写：$ 特指当前函数中的变量
64596465
{{each list}}
64606466
<li>{{$index}} - {{$value.user}}</li>
64616467
{{/each}}
@@ -6471,10 +6477,10 @@
64716477
64726478
（7）、辅助方法
64736479
6474-
使用 `template.helper(name, callback) `注册公用辅助方法：
6480+
使用 `template.defaults.imports.dateFormat = function(arg1,arg2){} `注册公用辅助方法：
64756481
64766482
```js
6477-
template.helper('dateFormat', function (date, format) {
6483+
template.defaults.imports.dateFormat = function(arg1,arg2) {
64786484
// ..
64796485
return value;
64806486
});
@@ -6486,35 +6492,89 @@ template.helper('dateFormat', function (date, format) {
64866492
### 3、实例
64876493
64886494
```html
6489-
<!DOCTYPE HTML>
6490-
<html>
6491-
<head>
6492-
<meta charset="UTF-8">
6493-
<title>basic-demo</title>
6494-
<script src="../dist/template.js"></script>
6495-
</head>
6496-
<body>
6497-
<div id="content"></div>
6498-
<script id="test" type="text/html">
6499-
{{if isAdmin}}
6500-
<h1>{{title}}</h1>
6501-
<ul>
6502-
{{each list as value i}}
6503-
<li>索引 {{i + 1}} ：{{value}}</li>
6504-
{{/each}}
6505-
</ul>
6506-
{{/if}}
6507-
</script>
6508-
<script>
6509-
var data = {
6510-
title: '基本例子',
6511-
isAdmin: true,
6512-
list: ['文艺', '博客', '摄影', '电影', '民谣', '旅行', '吉他']
6513-
};
6514-
var html = template('test', data);
6515-
document.getElementById('content').innerHTML = html;
6516-
</script>
6517-
</body>
6495+
<!DOCTYPE html>
6496+
<html lang="en">
6497+
6498+
<head>
6499+
<meta charset="UTF-8" />
6500+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6501+
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
6502+
<title>Document</title>
6503+
<script src="./lib/template-web.js"></script>
6504+
</head>
6505+
6506+
<body>
6507+
<div id="content"></div>
6508+
<script id="test" type="text/html">
6509+
<div>
6510+
<!-- 输出表达式 -->
6511+
<p>{{name}}</p>
6512+
<!-- 不转义输出 -->
6513+
<p>{{#value}}</p>
6514+
6515+
<!-- 条件表达式 -->
6516+
{{if bool}}
6517+
<p>{{bool}}</p>
6518+
{{/if}}
6519+
{{if num < 1 }}
6520+
<p>'num < 1'</p> {{else}} <p>error!</p>
6521+
{{/if}}
6522+
6523+
<!-- 遍历表达式 数组 -->
6524+
<p>遍历表达式 数组</p>
6525+
{{each list as value index}}
6526+
<li>{{index}}: {{value}}</li>
6527+
{{/each}}
6528+
<!-- $简写 $ 特指当前函数中的变量 -->
6529+
<p>$简写</p>
6530+
{{each list}}
6531+
<li>{{$index}}: {{$value}}</li>
6532+
{{/each}}
6533+
<!-- 遍历表达式 对象 -->
6534+
<p>遍历表达式 对象</p>
6535+
{{each objList as value index}}
6536+
<li>{{index}}: {{value}}</li>
6537+
{{/each}}
6538+
<!-- $简写 -->
6539+
<p>$简写</p>
6540+
{{each objList}}
6541+
<li>{{$index}}: {{$value}}</li>
6542+
{{/each}}
6543+
6544+
<!-- 模板包含子模板,表达式 -->
6545+
{{include 'news_list'}}
6546+
6547+
<!-- 辅助方法 -->
6548+
</div>
6549+
</script>
6550+
6551+
<script id="news_list" type="text/html">
6552+
<p>模板包含子模板,表达式</p>
6553+
<ul>
6554+
{{each list as value i}}
6555+
<li>索引 {{i + 1}} ：{{value + 1}}</li>
6556+
{{/each}}
6557+
</ul>
6558+
</script>
6559+
6560+
<script>
6561+
const data = {
6562+
name: 'zhangsan',
6563+
value: '<h1>lisi</h1>',
6564+
num: 0,
6565+
bool: true,
6566+
list: [1, 2, 3, 4, 5],
6567+
objList: {
6568+
name: 'zhangsan',
6569+
age: '18',
6570+
addr: '广东'
6571+
}
6572+
}
6573+
let temp = template('test', data)
6574+
document.getElementById('content').innerHTML = temp
6575+
</script>
6576+
</body>
6577+
65186578
</html>
65196579
```
65206580

@@ -6590,90 +6650,7 @@ document.getElementById('content').innerHTML = html;
65906650
![image-20200126152842459](readme.assets/image-20200126152842459.png)
65916651

65926652
```html
6593-
<!DOCTYPE HTML>
6594-
<html>
6595-
<head>
6596-
<meta charset="UTF-8">
6597-
<title>helper-demo</title>
6598-
<script src="../dist/template.js"></script>
6599-
</head>
6600-
6601-
<body>
6602-
<h1>辅助方法</h1>
6603-
<div id="content"></div>
6604-
<script id="test" type="text/html">
6605-
{{time | dateFormat:'yyyy年 MM月 dd日 hh:mm:ss'}}
6606-
</script>
6607-
6608-
<script>
6609-
/**
6610-
* 对日期进行格式化，
6611-
* @param date 要格式化的日期
6612-
* @param format 进行格式化的模式字符串
6613-
* 支持的模式字母有：
6614-
* y:年,
6615-
* M:年中的月份(1-12),
6616-
* d:月份中的天(1-31),
6617-
* h:小时(0-23),
6618-
* m:分(0-59),
6619-
* s:秒(0-59),
6620-
* S:毫秒(0-999),
6621-
* q:季度(1-4)
6622-
* @return String
6623-
* @author yanis.wang
6624-
* @see http://yaniswang.com/frontend/2013/02/16/dateformat-performance/
6625-
*/
6626-
template.helper('dateFormat', function (date, format) {
6627-
6628-
if (typeof date === "string") {
6629-
var mts = date.match(/(\/Date(\d+)\/)/);
6630-
if (mts && mts.length >= 3) {
6631-
date = parseInt(mts[2]);
6632-
}
6633-
}
6634-
date = new Date(date);
6635-
if (!date || date.toUTCString() == "Invalid Date") {
6636-
return "";
6637-
}
6638-
6639-
var map = {
6640-
"M": date.getMonth() + 1, //月份
6641-
"d": date.getDate(), //日
6642-
"h": date.getHours(), //小时
6643-
"m": date.getMinutes(), //分
6644-
"s": date.getSeconds(), //秒
6645-
"q": Math.floor((date.getMonth() + 3) / 3), //季度
6646-
"S": date.getMilliseconds() //毫秒
6647-
};
6648-
6649-
6650-
format = format.replace(/([yMdhmsqS])+/g, function(all, t){
6651-
var v = map[t];
6652-
if(v !== undefined){
6653-
if(all.length > 1){
6654-
v = '0' + v;
6655-
v = v.substr(v.length-2);
6656-
}
6657-
return v;
6658-
}
6659-
else if(t === 'y'){
6660-
return (date.getFullYear() + '').substr(4 - all.length);
6661-
}
6662-
return all;
6663-
});
6664-
return format;
6665-
});
6666-
6667-
// --------
6668-
6669-
var data = {
6670-
time: 1408536771253,
6671-
};
6672-
var html = template('test', data);
6673-
document.getElementById('content').innerHTML = html;
6674-
</script>
6675-
</body>
6676-
</html>
6653+
66776654
```
66786655

66796656
![image-20200126152920878](readme.assets/image-20200126152920878.png)

0 commit comments

Comments
 (0)