juicer.js是阿里的一個輕量級模板引擎,min只有7K.

獲取定義模板tpl
ps:

<script id = "tpl" type = "text/template">
            需要渲染的模板內容
</script>
var tpl = document.queryselector("#tpl").innerHTML;

使用json資料
ps:

1.直接定義

        var  date = ....    .....(json資料)；

2.ajax獲取json資料

        var mysjon;
        //如果使用了ajax要設定為同步，否則DOM還沒有生成就會自動執行下面的東西，如果下面有dom操作的地方會報錯。
        $.ajaxSettings.async = flase;          
        $getJSON("myjson.json",function(){
                mysjon = date;
        })
 

juicer渲染模板和資料

           var html = juicer(tpl,mysjon);
           document.body.innerHTML = html;

語法：

遍歷整個陣列
{@each hot as it,k}             each標籤遍歷hot陣列
${it.name}                      輸出
{@/each}                        each標籤結束


輸出單個
{@each main as it,k}           each標籤遍歷main陣列
{@if k == 1}                   檢索key等於1的陣列元素
${it.name}                     輸出
{@/if}                         if標籤結束
{@/each}                       each標籤結束