master

分支 (1)

管理

管理

master

javascript-template
/
demo.html

<!DOCTYPE html>
<html lang='zh-CN'>
<head>
    <meta charset='utf-8'>
    <meta content='IE=edge' http-equiv='X-UA-Compatible'>

    <title>
        js-template.js · fushanlang / javascript template - 代码托管 - 开源中国社区
    </title>
    <script src="js-template.js" type="text/javascript"></script>
    <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.3.min.js" type="text/javascript"></script>
    <script type="text/javascript">
       function run(){
           $('#template_code_output').val(js_template($('#template_code').val(),{'names':['tom','jerry','david']}));
           $('#out_put_div').html($('#template_code_output').val());
       }

var Timer = function (){
        this.startTime = + new Date;
    };

    Timer.prototype.stop = function(){
        return + new Date - this.startTime;
    };


       // 数据量
var length = 100;
// 渲染次数
var number = 10000;

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'
    });
};

    function test(){

var time = new Timer;
var render = js_template($('#template_code').val());
var render2 = js_template($('#template_code2').val());
        for (var i = 0; i < number; i ++) {
                render({'list':data.list});
            }

var endTime = time.stop();

            alert(endTime);
    }
    </script>
</head>
<body>
<textarea id="template_code"  style="width:400px;height:600px;">

    <js> for(var i=0;i<vars.list.length;++i){</js>
        <label><h1><js>output+=vars.list[i]['user'];</js></h1><js>output+=vars.list[i]['site'];</js></label>
    <js> }</js>
</textarea>

<textarea id="template_code2"  style="width:400px;height:600px;">

    <table>
        <tr><td></td></tr><js>alert('hello');</js>
    </table>
</textarea>
<button onclick="run();">Run</button>
<button onclick="test();">Test</button>
<textarea id="template_code_output" style="width:400px;height:600px;" >
</textarea>

<hr/>
<br/>
<div style="border:blue solid 1px;">
    <div id="out_put_div">

    </div>
</div>
</body>
</html>