2018-08-06 Juicer.js 模版引擎

1.简介

Juicer 是一个高效、轻量的前端模版引擎，好处可以在前端页面使得视图模型与数据的分离。（可以运行在node.js ）

2.使用

1.引用
1).Install:：npm i juicer
2).
下载代码地址：Github Link
项目中引用：<script type="text/javascript" src="juicer-min.js"></script>
2.一般使用
1.语法

a.使用${} 输出变量，支持自定义函数
${name}
${name|function}

//自定义的函数
var testFun = function(data){
 　　 return '<a href="'+data.href+'" alt = "'+data.alt+'"/>'
}
//注册/注销自定义函数
//jucer.register('function name',function)
juicer.register('test_Fun',testFun)
//juicer.unregister('test_Fun')
var json = {
    links: [
        {href: 'http://juicer.name', alt: 'Juicer'},
        {href: 'http://benben.cc', alt: 'Benben'},
        {href: 'http://ued.taobao.com', alt: 'Taobao UED'}
    ]
};

var tpl= [
    '{@each links as item }',
        '${item|test_Fun} <br/>',
    '{@/each}'
].join('')

//编译模版并根据所给数据立即渲染结果
juicer(tpl,json)
//先编译，返回函数，再渲染数据
var compiled_tpl = juicer(tpl);
var htm = compiled_tpl.render(data);

//转义问题
使用$${变量}避免转义

b.循环和判断
{@each  list as item} 
    ${item.变量}
{@/each} 

{@each list as item,index}
    {@if index===3}
        the index is 3, the value is ${item.prop}
    {@else if index === 4}
        the index is 4, the value is ${item.prop}
    {@else}
        the index is not 3, the value is ${item.prop}
    {@/if}
{@/each}

c.注释
{# 注释类容}
d.辅助循环
{@each i in range(5, 10)}
    ${i}; //输出 5;6;7;8;9;
{@/each}

e.子模板嵌套 {@include tpl, data}
//Html 代码
<script type="text/juicer" id="subTpl">
    I'm sub content, ${name}
</script>
//js 代码
var tpl = 'Hi, {@include "#subTpl", subData}, End.';
 
juicer(tpl, {
    subData: {
        name: 'juicer'
    }
});
 
//输出 Hi, I'm sub content, juicer, End.
//或者通过数据引入子模板，下述代码也将会有相同的渲染结果： 
var tpl = 'Hi, {@include subTpl, subData}, End.';
juicer(tpl, {
    subTpl: "I'm sub content, ${name}",
    subData: {
        name: 'juicer'
    }
});

f. Node.hs 使用
在命令行中执行:
npm install juicer
 
在代码中这么引入:
var juicer = require('juicer');
var html = juicer(tpl, data);

3..net demo
.net 项目中，使用Razor引擎。
1).定义模版
注意点：由于@在razor中是关键字，所以在razor中使用Juicer，需要使用@@ 代表@

HTML 代码
 <div id="ChildCon" class="row-border ChildCondition">
                        <div id="Conditions" style="padding: 50px 50px 50px 50px;">
                        </div>
                        <div class="row-border" style="padding: 0 50px 10px 50px; margin-top: -30px;text-align:center">
                            <button id="Goback" class="btn btn-default pull-left" title="Back"><i class=" fa fa-arrow-left fa-xs"></i></button>
                            <button id="GoSearch" class="btn btn-default" title="Search"><i class=" fa fa-search fa-xs"></i></button>
                        </div>
                    </div>
<script id="tpl" type="text/template">
        <div class="row">
            <div class="form-horizontal">
                {@@each list as lt}
                <div class="form-group col-lg-4">
                    {@@each lt.key as lkey}
                    <label class="col-sm-4 control-label noPaddingRigt">${lkey.label}:</label>
                    {@@if lkey.type==1}
                    <div class="col-sm-8">
                        <select style="width: 80%" class="form-control">
                            {@@each lt.value as lval}
                            {@@if lval.default==1}
                            <option value="${lval.ovalue}" selected>${lval.otext}</option>
                            {@@else}
                            <option value="${lval.ovalue}">${lval.otext}</option>
                            {@@/if}
                            {@@/each}
                        </select>
                    </div>
                    {@@else if lkey.type==0}
                    <div class="col-sm-8">
                        <input id="${lkey.id}" style="width:80%" class="form-control" placeholder="${lt.value}" />
                    </div>
                    {@@/if}
                    {@@/each}
                </div>
                {@@/each}
            </div>
        </div>
    </script>

Js 代码
 $(function () {
            var objdata = {
                list: [
                    {
                        key: [{ "label": "Conductor Material", "type": "1" }],
                        value: [
                            { "otext": "Copper and alloy 铜及合金", "ovalue": "Copper and alloy;铜及合金", "default": 1 },
                            { "otext": "Aluminum and alloy 铝及合金", "ovalue": "Aluminum and alloy;铝及合金", "default": 0 },
                            { "otext": "Others 其它", "ovalue": "Others;其它", "default": 0 },
                            { "otext": "", "ovalue": "不限", "default": 0 }
                        ]
                    }]
 var tpl = document.getElementById('tpl').innerHTML;
                        var html = juicer(tpl, objdata);
                        $("#Conditions").html(html);
});