Juicer——a fast template engine

https://blog.csdn.net/yutao_struggle/article/details/79201688

当前最新版本: 0.6.8-stable

Juicer 是一个高效、轻量的前端 (Javascript) 模板引擎，效率和易用是它追求的目标。除此之外，它还可以运行在 Node.js 环境中。

名字的由来

倘若我们把数据比作新鲜可口的水果，把模板看做是水，Juicer 就是把水果和水榨出我们需要的HTML代码片段的榨汁机。

juicer的引入

<script type=”text/javascript” src=”juicer-1.0.min.js”></script>

Juicer的使用方法

编译模板并根据给定的数据立即渲染模板

juicer(tpl, data);

仅编译模板暂不渲染，它会返回一个可重用的编译后的函数

var compiled_tpl = juicer(tpl);

根据给定的数据，对之前编译好的模板进行数据渲染

var compiled_tpl = juicer(tpl);
var html = compiled_tpl.render(data);

juicer.register(‘function_name’, function);
juicer.unregister(‘function_name’);

自定义模板语法边界符，下边是 Juicer 默认的边界符。你可以借此解决 Juicer 模板语法同某些后端语言模板语法冲突的情况

juicer.set({

    'tag::operationOpen': '{@',

    'tag::operationClose': '}',

    'tag::interpolateOpen': '${',

    'tag::interpolateClose': '}',

    'tag::noneencodeOpen': '$${',

    'tag::noneencodeClose': '}',

    'tag::commentOpen': '{#',

    'tag::commentClose': '}'

});

默认参数配置

{
cache: true [false],
strip: true [false],
errorhandling: true [false],
detection: true [false]
}

参数更改：

juicer.set('strip',false);

juicer.set('cache',false);

或

juicer.set({

    'strip': false,

    'cache': false

};

语法

${变量}

使用 ${} 输出变量值，其中 _ 为对数据源的引用（如 ${_}，常用于数据源为数组的情况）。支持自定义函数（通过自定义函数你可以实现很多有趣的功能，类似 ${data|links} 就可以通过事先定义的自定义函数 links 直接对 data 拼装出<a href=”..” alt=”..” /> ）.

${name}

${name|function}

${name|function, arg1, arg2}

示例：

/*data数据*/

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|links_build} <br />',

    '{@/each}'

].join('');

/*函数*/

var links = function(data) {

    return '<a href="' + data.href + '" alt="' + data.alt + '" />';

};

/*注册自定义函数*/

juicer.register('links_build', links);

/*编译并渲染模板*/

juicer(tpl, json);

以上代码执行后会出现结果被转义了：

&lt;a href=&quot;http://juicer.name&quot; alt=&quot;Juicer&quot; <br />

&lt;a href=&quot;http://benben.cc&quot; alt=&quot;Benben&quot; <br />

&lt;a href=&quot;http://ued.taobao.com&quot; alt=&quot;Taobao UED&quot; <br />

转义/避免转义
出于安全角度的考虑，${变量} 在输出之前会对其内容进行转义，如果你不想输出结果被转义，可以使用 $${变量} 来避免这种情况

内联辅助函数{@helper}…{@/helper}

{@helper numberPlus}

    function(number) {

        return number + 1;

    }

{@/helper}

var tpl = 'Number: ${num|numberPlus}';

juicer(tpl, {

    num: 123

});

//输出Number：124

循环遍历 {@each} … {@/each}

对数组进行循环遍历可取得元素或索引值

{@each list as item, index}

    ${item.prop}

    ${index}

{@/each}

辅助循环{@each i in range(m,n)}

{@each i in range(5, 10)}

    ${i}; //输出 5;6;7;8;9;

{@/each}

判断{@if}…{@else if}…{@else}…{@/if}

{@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}

注释{# 注释内容}

{# 我是注释}

子模板嵌套 {@include tpl, data}

HTML代码：

<script type="text/juicer" id="subTpl">

    I'm sub content, ${name}

</script>

javascript代码：

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'

    }

});

完整示例

模板页面tpl_list.html

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>公告消息</title>

</head>

    {@each LIST as item,index}

    {@if item.NOTICE_READ==0}

    <ul>

        <li >

            <div>

                <ul>

                    <li>

                        <label >${item.NOTICE_TITLE}</label>

                        <span>${item.NOTICE_TIME}</span>

                    </li>

                    <li>

                        <label>

                        ${item.NOTICE_CONTENT}

                        </label>

                    </li>

                </ul>

            </div>

        </li>

    </ul>

    {@/if}

    {@if item.NOTICE_READ==1}

    <ul>

        <li>

            <div>

                <ul>

                    <li>

                        <label>${item.NOTICE_TITLE}</label>

                        <span>${item.NOTICE_TIME}</span>

                    </li>

                    <li>

                        <label>

                        ${item.NOTICE_CONTENT}

                        </label>

                    </li>

                </ul>

            </div>

        </li>

    </ul>

    {@/if}

    {@/each}

</html>

主页面notice.html

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>公告消息</title>

<script type="text/javascript" src="jquery-2.1.1.min.js"></script>

<script type="text/javascript" src="juicer-1.0.min.js"></script>

</head>

<body>

    <div id="P040201">

        <div class="page" data-page="noticeMessage" title="公告消息" >

        </div>

        <div class="page" data-page="noticeDetail" title="公告详情">

        </div>

    </div>

</body>

<script type="text/javascript" src="notice.js"></script>

<script type="text/javascript">

    me.init();

    console.log("...end");

</script>

</html>

notice.js

var panel, pages, pageA;

var me = {

    init : function() {

        console.log("init");

        panel = $("#P040201");

        pages = panel.find(".page");

        pageA = pages.filter("[data-page='noticeMessage']");

        list ={

                LIST : [

                    {

                        "NOTICE_ID" : "1",

                        "NOTICE_TITLE" : "贷款",

                        "NOTICE_CONTENT" : "关于移动CRM的开发申请工作贷款流程审批关于移动CRM的开发申请工作贷款流程审批，关于移动CRM的开发申请工作贷款流程审批，关于移动CRM的开发申请工作贷款流程审批，关于移动CRM的开发申请工作贷款流程审批。",

                        "NOTICE_TIME" : "2018-1-25 9:00",

                        "NOTICE_READ" : "0"

                    },

                    {

                        "NOTICE_ID" : "2",

                        "NOTICE_TITLE" : "jquery data",

                        "NOTICE_CONTENT" : "在元素上存放或读取数据,返回jQuery对象。当参数只有一个key的时候，为读取该jQuery对象对应DOM中存储的key对应的值，值得注意的是，如果浏览器支持HTML5，同样可以读取该DOM中使用 data-[key] = [value] 所存储的值。参见最后一个示例。当参数为两个时，为像该jQuery对象对应的DOM中存储key-value键值对的数据。\

            如果jQuery集合指向多个元素，那将在所有元素上设置对应数据。 这个函数不用建立一个新的expando，就能在一个元素上存放任何格式的数据，而不仅仅是字符串。\

            V1.4.3 新增用法, data(obj) 可传入key-value形式的数据。",

                        "NOTICE_TIME" : "2018-1-25 9:00",

                        "NOTICE_READ" : "0"

                    }

                ]

            };

        me.initPageA();

    },

    initPageA : function() {

        $.get("tpl_list.html",function(tpl){

            var tpl = juicer(tpl,list);

            pageA.html(tpl);

        });

    }

};