Juicer 轻量级javascript模板引擎

最新推荐文章于 2024-11-05 21:22:15 发布

紫冰Nan

最新推荐文章于 2024-11-05 21:22:15 发布

阅读量1.8k

点赞数

CC 4.0 BY-SA版权

分类专栏： JS

本文链接：https://blog.youkuaiyun.com/NN_nan/article/details/71553036

JS 专栏收录该内容

31 篇文章

订阅专栏

本文介绍了Juicer.js，一个简洁高效的JavaScript模板引擎。通过提供代码示例和链接到GitHub资源，读者可以学习如何下载和使用Juicer进行模板渲染。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

代码示例

<!DOCTYPE html>
<html>
<head>
    <title>Juicer</title>
    <meta charset=UTF-8>
    <!--引入jquery-->
    <script src="/static/jquery/jquery-1.11.1.min.js"></script>
    <!--引入juicer-->
    <script type="text/javascript" src="/static/js/ceshi/juicer.js"></script>
</head>
<body>
<!--下面是模板-->
<script id="tpl" type="text/template">
    <ul>
        {@each list as it,index}
        <li>${it.name} (index:${index})</li>
        {@/each}
        {@each blah as it}
        <li>
            num:${it.num}<br/>
            {@if it.num==3}
            {@each it.inner as it2}
            ${it2.time}<br/>
            {@/each}
            {@/if}
        </li>
        {@/each}
    </ul>
</script>
<!--建立一个div来接收渲染结果-->
<div id="result"></div>

<script type="text/javascript">
    var data={
        list:[
            {name:'firstname',show:true},
            {name:'secondname',show:false},
            {name:'thirdname',show:true}
        ],
        blah:[
            {num:1},
            {num:2},
            {num:3,inner:[
                {'time':'15:00'},
                {'time':'16:00'},
                {'time':'17:00'},
                {'time':'18:00'}
            ]},
            {num:4}
        ]
    };
    var tpl=document.getElementById("tpl").innerHTML;
    var html=juicer(tpl,data); //得到渲染结果，需要放到DOM元素中才能在页面中显示
    console.log(html)//编译模板并立即渲染出结果，如没有下一句页面看不到结果
    $("#result").html(html);
</script>
</body>
</html>