js模板jsTpl

来源：互联网发布：手机音乐后期软件编辑：程序博客网时间：2024/05/21 17:44

由于前端工程越来越复杂，需要模板和数据的分离。
tpl.js是一个比较极致(极小，极快，极简单)的js模板引擎，可以在各种js环境中使用。
官网地址

简单的例子

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>js模板</title>    <script src="js/jsTpl.js"></script></head><body>    <div class="result"> </div>    <script>        // 输出名字        var tmp = ' your name is {{this.name}}';        var ctx = {"name": "luck"};        var jstpl = new JsTpl(tmp);        document.querySelector('.result').innerHTML = jstpl.getCTpl().render(ctx);            // 循环    /*  var tmp = `<table border="1">                                {{for (var i = 0,len = this.score.length; i < len; i++):}}                                        <tr>                                            <td>{{this.score[i]['name']}}</td>                                            <td>{{this.score[i]['score']}}</td>                                        </tr>                                {{endfor;}}                            </table>`;        var ctx = {"score":[                  {"name":"1", "score": "90"},                                {"name":"2", "score": "91"},                                {"name":"3", "score": "92"}              ]};        var jstpl = new JsTpl(tmp);        document.querySelector('.result').innerHTML = jstpl.getCTpl().render(ctx);*/    </script></body></html>

阅读全文

0 0