mirror of https://github.com/layui/layui
You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
240 lines
6.1 KiB
240 lines
6.1 KiB
<!DOCTYPE html> |
|
<html> |
|
<head> |
|
<meta charset="utf-8"> |
|
<meta name="viewport" content="width=device-width, initial-scale=1"> |
|
<title>视图模板引擎 - layui</title> |
|
|
|
<link rel="stylesheet" href="../src/css/layui.css"> |
|
<style> |
|
.laytpl-demo{border: 1px solid #EBEBEB;} |
|
.laytpl-demo>textarea{position: relative; display: block; width:100%; height: 300px; padding: 11px; border: 0; box-sizing: border-box; resize: none; background-color: #fff; font-family: Courier New; font-size: 13px;} |
|
.laytpl-demo>div:first-child{height: 32px; line-height: 32px; padding: 6px 11px; border-bottom: 1px solid #EBEBEB; background-color: #F8F9FA;} |
|
</style> |
|
</head> |
|
<body> |
|
|
|
<div> |
|
|
|
<div class="layui-row"> |
|
<div class="layui-col-xs6 laytpl-demo"> |
|
<div>模板</div> |
|
<textarea id="demoTPL1"><h1>{{ d.title }}</h1> |
|
|
|
<p>转义输出(HTML)：{{ d.desc }}</p> |
|
<p>转义输出(HTML)：{{= d.desc }}</p> |
|
<p>原始输出(HTML)：{{- d.desc }}</p> |
|
{{#}} |
|
|
|
<div class="layui-section"> |
|
<hr> |
|
<ul> |
|
{{# var str = "a b c"; |
|
layui.each(d.items, function(index, item){ }} |
|
<li class="{{ index > 0 ? 'list' : '' }}"> |
|
<strong>{{ item.title }}</strong> |
|
{{# if(item.content){ }} |
|
<span>{{ item.content }}</span> |
|
{{# } }} |
|
<span>{{ item.time || '' }}</span> |
|
{{ str }} |
|
|
|
|
|
</li> |
|
{{# }); if(d.items.length === 0){ }} |
|
无数据 |
|
{{# } }} |
|
</ul> |
|
<hr> |
|
</div> |
|
|
|
<div> |
|
{{ d.content || '' }} |
|
{{ }} {{}} |
|
{{ }} |
|
|
|
\a |
|
'12'""""" |
|
"哈''哈" |
|
</div> |
|
|
|
<p>渲染时间：{{ layui.util.toDateString(new Date()) }}</p></textarea> |
|
</div> |
|
|
|
<div class="layui-col-xs6 laytpl-demo"> |
|
<div class="layui-row"> |
|
<div class="layui-col-xs3">数据</div> |
|
<div class="layui-col-xs9" style="text-align: right"> |
|
<button class="layui-btn layui-btn-sm layui-btn-primary" lay-on="createData">生成数据</button> |
|
</div> |
|
</div> |
|
<textarea id="demoData1"> |
|
{ |
|
"title": "标题", |
|
"desc": "<a href=\"\" style=\"color:blue;\">一段描述</a>", |
|
"items": [ |
|
{ |
|
"title": "list 1", |
|
"child": [{ |
|
"title": "list 1-1", |
|
"child": [{ |
|
"title": "list 1-1-1" |
|
}] |
|
}] |
|
}, |
|
{ |
|
"title": "list 2", |
|
"child": [{ |
|
"title": "list 2-1" |
|
}] |
|
}, |
|
{"title": "list 3"} |
|
] |
|
}</textarea> |
|
</div> |
|
<div class="layui-col-xs12 laytpl-demo"> |
|
<div class="layui-row"> |
|
<div class="layui-col-xs4">视图</div> |
|
<div class="layui-col-xs4" style="text-align: center"> |
|
<button class="layui-btn layui-btn-sm layui-btn-primary" lay-on="test1">性能测试</button> |
|
</div> |
|
<div class="layui-col-xs4" style="text-align: right"> |
|
<span id="demoViewTime"></span> |
|
</div> |
|
</div> |
|
<div class="layui-padding-sm" id="demoView1"></div> |
|
</div> |
|
</div> |
|
|
|
|
|
<script type="type/html" template id="demoTplCommon"> |
|
公共模板 - {{ d.title }} |
|
</script> |
|
|
|
<script type="type/html" template id="demoTplList"> |
|
{{# if(d.items && d.items.length > 0){ }} |
|
<ul> |
|
{{# layui.each(d.items, function(index, item){ }} |
|
<li><strong>{{ item.title }}</strong>{{ laytpl.include('demoTplList', {items: item.child}) }}</li> |
|
{{# }); }} |
|
</ul> |
|
{{# } }} |
|
</script> |
|
|
|
<script type="type/html" template id="laytplTestTpl"> |
|
{{# for(var i = 0; i < d.items.length; i++){ }} |
|
第{{= d.items[i].index }}个，Name: {{- d.items[i].name }} Number: {{= d.items[i].number }} |
|
{{# } }} |
|
</script> |
|
|
|
</div> |
|
|
|
<script src="../src/layui.js"></script> |
|
<script> |
|
layui.use(['laytpl', 'util'], function(){ |
|
var laytpl = layui.laytpl; |
|
var util = layui.util; |
|
var $ = layui.$; |
|
|
|
//获取模板和数据 |
|
var get = function(type){ |
|
return { |
|
template: $('#demoTPL1').val() //获取模板 |
|
,data: function(){ //获取数据 |
|
try { |
|
return JSON.parse($('#demoData1').val()); |
|
} catch(e){ |
|
$('#demoView1').html(e); |
|
} |
|
}() |
|
}; |
|
}; |
|
|
|
var data = get(); |
|
|
|
//耗时计算 |
|
var startTime = new Date().getTime(), timer = function(startTime, title){ |
|
var endTime = new Date().getTime(); |
|
$('#demoViewTime').html((title || '模板解析耗时：')+ (endTime - startTime) + 'ms'); |
|
}; |
|
|
|
//渲染模板 |
|
var thisTpl = laytpl(data.template); |
|
|
|
//执行渲染 |
|
thisTpl.render(data.data, function(view){ |
|
timer(startTime); |
|
$('#demoView1').html(view); |
|
}); |
|
|
|
//编辑 |
|
$('.laytpl-demo textarea').on('input', function(){ |
|
var data = get(); |
|
if(!data.data) return; |
|
|
|
//计算模板渲染耗时 |
|
var startTime = new Date().getTime(); |
|
|
|
//若模板有变化，则重新解析模板；若模板没变，数据有变化，则从模板缓存中直接渲染（效率大增） |
|
if(this.id === 'demoTPL1'){ |
|
thisTpl.parse(data.template, data.data); //解析模板 |
|
} |
|
|
|
//执行渲染 |
|
thisTpl.render(data.data, function(view){ |
|
timer(startTime); |
|
$('#demoView1').html(view); |
|
}); |
|
}); |
|
|
|
//事件 |
|
util.event('lay-on', { |
|
//性能测试 |
|
test1: function(){ |
|
var dataLen = 1000 //数据量 |
|
,renderTimes = 1000; //渲染次数 |
|
|
|
//初始化数据 |
|
var data = { |
|
title: '性能测试' |
|
,items: function(items){ |
|
for(var i = 0; i < dataLen; i++){ |
|
items.push({ |
|
index: i |
|
,name: '<strong style="color: red;">张三</strong>' |
|
,number: 100+i |
|
}); |
|
} |
|
return items; |
|
}([]) |
|
}; |
|
|
|
//模板 |
|
var startTime = new Date(); |
|
for(var j = 0; j < renderTimes; j++){ |
|
var template = document.getElementById('laytplTestTpl').innerHTML; |
|
var html = laytpl(template).render(data); |
|
} |
|
timer(startTime, '本次测试耗时：'); |
|
$('#demoView1').html(html); |
|
|
|
} |
|
}); |
|
|
|
// 自定义标签符 |
|
laytpl(` |
|
<%# var job = ["前端工程师"]; %> |
|
<%= d.name %>是一名<%= job[d.type] %>。 |
|
`, { |
|
open: '<%', |
|
close: '%>' |
|
}).render({ |
|
name: '张三', |
|
type: 0 |
|
}, function(str){ |
|
console.log(str); // 张三是一名前端工程师。 |
|
}); |
|
}); |
|
</script> |
|
</body> |
|
</html>
|
|
|