|
|
@ -136,11 +136,11 @@ layui.use(['laytpl', 'util'], function(){ |
|
|
|
var util = layui.util; |
|
|
|
var util = layui.util; |
|
|
|
var $ = layui.$; |
|
|
|
var $ = layui.$; |
|
|
|
|
|
|
|
|
|
|
|
//获取模板和数据 |
|
|
|
// 获取模板和数据 |
|
|
|
var get = function(type){ |
|
|
|
var get = function(type){ |
|
|
|
return { |
|
|
|
return { |
|
|
|
template: $('#demoTPL1').val() //获取模板 |
|
|
|
template: $('#demoTPL1').val(), // 获取模板 |
|
|
|
,data: function(){ //获取数据 |
|
|
|
data: function(){ // 获取数据 |
|
|
|
try { |
|
|
|
try { |
|
|
|
return JSON.parse($('#demoData1').val()); |
|
|
|
return JSON.parse($('#demoData1').val()); |
|
|
|
} catch(e){ |
|
|
|
} catch(e){ |
|
|
@ -152,52 +152,58 @@ layui.use(['laytpl', 'util'], function(){ |
|
|
|
|
|
|
|
|
|
|
|
var data = get(); |
|
|
|
var data = get(); |
|
|
|
|
|
|
|
|
|
|
|
//耗时计算 |
|
|
|
// 耗时计算 |
|
|
|
var startTime = new Date().getTime(), timer = function(startTime, title){ |
|
|
|
var startTime = new Date().getTime(), timer = function(startTime, title){ |
|
|
|
var endTime = new Date().getTime(); |
|
|
|
var endTime = new Date().getTime(); |
|
|
|
$('#demoViewTime').html((title || '模板解析耗时:')+ (endTime - startTime) + 'ms'); |
|
|
|
$('#demoViewTime').html((title || '模板解析耗时:')+ (endTime - startTime) + 'ms'); |
|
|
|
}; |
|
|
|
}; |
|
|
|
|
|
|
|
|
|
|
|
//渲染模板 |
|
|
|
// 全局设置 |
|
|
|
|
|
|
|
/*laytpl.config({ |
|
|
|
|
|
|
|
open: '<%', |
|
|
|
|
|
|
|
close: '%>' |
|
|
|
|
|
|
|
});*/ |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// 渲染模板 |
|
|
|
var thisTpl = laytpl(data.template); |
|
|
|
var thisTpl = laytpl(data.template); |
|
|
|
|
|
|
|
|
|
|
|
//执行渲染 |
|
|
|
// 执行渲染 |
|
|
|
thisTpl.render(data.data, function(view){ |
|
|
|
thisTpl.render(data.data, function(view){ |
|
|
|
timer(startTime); |
|
|
|
timer(startTime); |
|
|
|
$('#demoView1').html(view); |
|
|
|
$('#demoView1').html(view); |
|
|
|
}); |
|
|
|
}); |
|
|
|
|
|
|
|
|
|
|
|
//编辑 |
|
|
|
// 编辑 |
|
|
|
$('.laytpl-demo textarea').on('input', function(){ |
|
|
|
$('.laytpl-demo textarea').on('input', function(){ |
|
|
|
var data = get(); |
|
|
|
var data = get(); |
|
|
|
if(!data.data) return; |
|
|
|
if(!data.data) return; |
|
|
|
|
|
|
|
|
|
|
|
//计算模板渲染耗时 |
|
|
|
// 计算模板渲染耗时 |
|
|
|
var startTime = new Date().getTime(); |
|
|
|
var startTime = new Date().getTime(); |
|
|
|
|
|
|
|
|
|
|
|
//若模板有变化,则重新解析模板;若模板没变,数据有变化,则从模板缓存中直接渲染(效率大增) |
|
|
|
// 若模板有变化,则重新解析模板;若模板没变,数据有变化,则从模板缓存中直接渲染(效率大增) |
|
|
|
if(this.id === 'demoTPL1'){ |
|
|
|
if(this.id === 'demoTPL1'){ |
|
|
|
thisTpl.parse(data.template, data.data); //解析模板 |
|
|
|
thisTpl.parse(data.template, data.data); // 解析模板 |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
//执行渲染 |
|
|
|
// 执行渲染 |
|
|
|
thisTpl.render(data.data, function(view){ |
|
|
|
thisTpl.render(data.data, function(view){ |
|
|
|
timer(startTime); |
|
|
|
timer(startTime); |
|
|
|
$('#demoView1').html(view); |
|
|
|
$('#demoView1').html(view); |
|
|
|
}); |
|
|
|
}); |
|
|
|
}); |
|
|
|
}); |
|
|
|
|
|
|
|
|
|
|
|
//事件 |
|
|
|
// 事件 |
|
|
|
util.event('lay-on', { |
|
|
|
util.on({ |
|
|
|
//性能测试 |
|
|
|
// 性能测试 |
|
|
|
test1: function(){ |
|
|
|
test1: function(){ |
|
|
|
var dataLen = 1000 //数据量 |
|
|
|
var dataLen = 1000 // 数据量 |
|
|
|
,renderTimes = 1000; //渲染次数 |
|
|
|
var renderTimes = 1000; // 渲染次数 |
|
|
|
|
|
|
|
|
|
|
|
//初始化数据 |
|
|
|
// 初始化数据 |
|
|
|
var data = { |
|
|
|
var data = { |
|
|
|
title: '性能测试' |
|
|
|
title: '性能测试', |
|
|
|
,items: function(items){ |
|
|
|
items: function(items){ |
|
|
|
for(var i = 0; i < dataLen; i++){ |
|
|
|
for(var i = 0; i < dataLen; i++){ |
|
|
|
items.push({ |
|
|
|
items.push({ |
|
|
|
index: i |
|
|
|
index: i |
|
|
@ -209,7 +215,7 @@ layui.use(['laytpl', 'util'], function(){ |
|
|
|
}([]) |
|
|
|
}([]) |
|
|
|
}; |
|
|
|
}; |
|
|
|
|
|
|
|
|
|
|
|
//模板 |
|
|
|
// 模板 |
|
|
|
var startTime = new Date(); |
|
|
|
var startTime = new Date(); |
|
|
|
for(var j = 0; j < renderTimes; j++){ |
|
|
|
for(var j = 0; j < renderTimes; j++){ |
|
|
|
var template = document.getElementById('laytplTestTpl').innerHTML; |
|
|
|
var template = document.getElementById('laytplTestTpl').innerHTML; |
|
|
|