qinshenxue-tpl
/
index.html

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">body {
        font-family: Microsoft Yahei
    }

    h1, h2 {
        font-weight: normal;
    }


    code{
        font-family:consolas;
        font-size: 12px;
        padding:20px !important;
    }
    /*

    github.com style (c) Vasily Polovnyov <vast@whiteants.net>

    */

    .hljs {
        display: block;
        overflow-x: auto;
        padding: 0.5em;
        color: #333;
        background: #f8f8f8;
    }

    .hljs-comment,
    .hljs-quote {
        color: #998;
        font-style: italic;
    }

    .hljs-keyword,
    .hljs-selector-tag,
    .hljs-subst {
        color: #333;
        font-weight: bold;
    }

    .hljs-number,
    .hljs-literal,
    .hljs-variable,
    .hljs-template-variable,
    .hljs-tag .hljs-attr {
        color: #008080;
    }

    .hljs-string,
    .hljs-doctag {
        color: #d14;
    }

    .hljs-title,
    .hljs-section,
    .hljs-selector-id {
        color: #900;
        font-weight: bold;
    }

    .hljs-subst {
        font-weight: normal;
    }

    .hljs-type,
    .hljs-class .hljs-title {
        color: #458;
        font-weight: bold;
    }

    .hljs-tag,
    .hljs-name,
    .hljs-attribute {
        color: #000080;
        font-weight: normal;
    }

    .hljs-regexp,
    .hljs-link {
        color: #009926;
    }

    .hljs-symbol,
    .hljs-bullet {
        color: #990073;
    }

    .hljs-built_in,
    .hljs-builtin-name {
        color: #0086b3;
    }

    .hljs-meta {
        color: #999;
        font-weight: bold;
    }

    .hljs-deletion {
        background: #fdd;
    }

    .hljs-addition {
        background: #dfd;
    }

    .hljs-emphasis {
        font-style: italic;
    }

    .hljs-strong {
        font-weight: bold;
    }

    </style>
</head>
<body>
<div style="width: 800px;margin: 0 auto">
    <h1>渲染示例</h1>
    <h2>模板</h2>
    <pre><code class="xml hljs"><span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span
            class="hljs-attr">id</span>=<span class="hljs-string">"tpl-example"</span> <span
            class="hljs-attr">type</span>=<span class="hljs-string">"text/plain"</span>&gt;</span><span
            class="undefined">
    &lt;div style='color:red;'&gt; {{= $data.name + ' show' }}&lt;/div&gt;
    &lt;div&gt; {{= $tools.formatDate($data.date) }}&lt;/div&gt;
    {{ var list=$data.list; }}
    {{ for(var i=0,j=list.length;i&lt;j;i++){ }}
            &lt;div style="color:blue"&gt;{{= list[i]}}&lt;/div&gt;
    {{}}}
</span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span></code></pre>
    <h2>数据</h2>
    <pre><code class="javascript hljs">tpl.tool(<span class="hljs-string">'formatDate'</span>, <span
            class="hljs-function"><span class="hljs-keyword">function</span> (<span
            class="hljs-params">date</span>) </span>{
    <span class="hljs-keyword">var</span> d = <span class="hljs-keyword">new</span> <span
                class="hljs-built_in">Date</span>(date);
    <span class="hljs-keyword">return</span> d.getFullYear() + <span
                class="hljs-string">'-'</span> + (d.getMonth() + <span class="hljs-number">1</span>) + <span
                class="hljs-string">'-'</span> + d.getDate();
});
<span class="hljs-keyword">var</span> example = {
    <span class="hljs-attr">name</span>: <span class="hljs-string">'example'</span>,
    <span class="hljs-attr">list</span>: [],
    <span class="hljs-attr">date</span>: <span class="hljs-keyword">new</span> <span class="hljs-built_in">Date</span>().getTime()
};
<span class="hljs-keyword">for</span> (<span class="hljs-keyword">var</span> i = <span class="hljs-number">0</span>; i &lt; <span
                class="hljs-number">5</span>; i++) {
    example.list.push((<span class="hljs-built_in">Math</span>.random() * <span class="hljs-number">100</span>).toFixed(<span
                class="hljs-number">0</span>));
}
<span class="hljs-built_in">document</span>.getElementById(<span
                class="hljs-string">'output'</span>).innerHTML = tpl(<span class="hljs-string">'tpl-example'</span>, example);</code></pre>
    <h2>结果</h2>
    <div id="output"></div>

    <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>
    <script src="src/tpl.js"></script>

    <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);
    </script>


    <h1>渲染性能测试</h1>
    数据条数 <input type="number" id="dataCount" value="100">
    渲染次数 <input type="number" id="renderCount" value="10000">
    <button onclick="test()">开始测试</button>
    <div id="result" style="background: #eee;line-height: 1.5">
    </div>
    <h2>测试代码</h2>
    <pre><code class="javascript hljs"><span class="hljs-function"><span class="hljs-keyword">function</span> <span
            class="hljs-title">test</span>(<span class="hljs-params"></span>) </span>{
    <span class="hljs-keyword">var</span> length = <span class="hljs-built_in">document</span>.getElementById(<span
                class="hljs-string">'dataCount'</span>).value;
    <span class="hljs-comment">// 渲染次数</span>
    <span class="hljs-keyword">var</span> number = <span class="hljs-built_in">document</span>.getElementById(<span
                class="hljs-string">'renderCount'</span>).value;
    <span class="hljs-keyword">var</span> data = {
        <span class="hljs-attr">list</span>: []
    };
    <span class="hljs-keyword">for</span> (<span class="hljs-keyword">var</span> i = <span class="hljs-number">0</span>; i &lt; length; i++) {
        data.list.push({
            <span class="hljs-attr">index</span>: i,
            <span class="hljs-attr">user</span>: <span class="hljs-string">'&lt;strong style="color:red"&gt;糖饼&lt;/strong&gt;'</span>,
            <span class="hljs-attr">site</span>: <span class="hljs-string">'http://www.planeart.cn'</span>,
            <span class="hljs-attr">weibo</span>: <span class="hljs-string">'http://weibo.com/planeart'</span>,
            <span class="hljs-attr">QQweibo</span>: <span class="hljs-string">'http://t.qq.com/tangbin'</span>
        });
    }
    <span class="hljs-keyword">var</span> startTime = <span class="hljs-keyword">new</span> <span class="hljs-built_in">Date</span>();
    <span class="hljs-keyword">for</span> (<span class="hljs-keyword">var</span> j = <span class="hljs-number">0</span>; j &lt; number; j++) {
        tpl.render(<span class="hljs-string">'template'</span>, data)
    }
    <span class="hljs-keyword">var</span> span = <span class="hljs-keyword">new</span> <span
                class="hljs-built_in">Date</span>() - startTime;
    result.innerHTML += <span class="hljs-string">'用时'</span> + span + <span class="hljs-string">'ms&lt;br/&gt;'</span>;
}</code></pre>
    <script src="src/tpl.js"></script>

    <script id="template" type="text/plain">
<ul>
    {{ for (i = 0, l = $data.list.length; i < l; i ++) { }}
        <li>用户: {{=$data.list[i].user}}/ 网站：{{=$data.list[i].site}}</li>
    {{ } }}
</ul>


    </script>

    <script>
        var result = document.getElementById('result');
        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/>';
        }
    </script>
</div>
</body>
</html>