渲染示例

模板

<script id="tpl-example" type="text/plain">
    <div style='color:red;'> {{= $data.name + ' show' }}</div>
    <div> {{= $tools.formatDate($data.date) }}</div>
    {{ var list=$data.list; }}
    {{ for(var i=0,j=list.length;i<j;i++){ }}
            <div style="color:blue">{{= list[i]}}</div>
    {{}}}
</script>

数据

tpl.tool('formatDate', function (date) {
    var d = new Date(date);
    return d.getFullYear() + '-' + (d.getMonth() + 1) + '-' + d.getDate();
});
var example = {
    name: 'example',
    list: [],
    date: new Date().getTime()
};
for (var i = 0; i < 5; i++) {
    example.list.push((Math.random() * 100).toFixed(0));
}
document.getElementById('output').innerHTML = tpl('tpl-example', example);

结果

渲染性能测试

数据条数 渲染次数 开始测试

测试代码

function test() {
    var length = document.getElementById('dataCount').value;
    // 渲染次数
    var number = document.getElementById('renderCount').value;
    var data = {
        list: []
    };
    for (var i = 0; i < length; i++) {
        data.list.push({
            index: i,
            user: '<strong style="color:red">糖饼</strong>',
            site: 'http://www.planeart.cn',
            weibo: 'http://weibo.com/planeart',
            QQweibo: 'http://t.qq.com/tangbin'
        });
    }
    var startTime = new Date();
    for (var j = 0; j < number; j++) {
        tpl.render('template', data)
    }
    var span = new Date() - startTime;
    result.innerHTML += '用时' + span + 'ms<br/>';
}