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': '}'
});- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
默认参数配置
{
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
};- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
语法
${变量}
使用 ${} 输出变量值，其中 _ 为对数据源的引用（如 ${_}，常用于数据源为数组的情况）。支持自定义函数（通过自定义函数你可以实现很多有趣的功能，类似 ${data|links} 就可以 通过事先定义的自定义函数 links 直接对 data 拼装出<a href=”..” alt=”..” /> ）.
${name}
${name|function}
${name|function, arg1, arg2}- 1
- 2
- 3
示例：
/*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);- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
以上代码执行后会出现结果被转义了：
<a href="http://juicer.name" alt="Juicer" <br />
<a href="http://benben.cc" alt="Benben" <br />
<a href="http://ued.taobao.com" alt="Taobao UED" <br />- 1
- 2
- 3
转义/避免转义
出于安全角度的考虑，${变量} 在输出之前会对其内容进行转义，如果你不想输出结果被转义，可以使用 $${变量} 来避免这种情况
内联辅助函数{@helper}…{@/helper}
{@helper numberPlus}
function(number) {
return number + 1;
}
{@/helper}
var tpl = 'Number: ${num|numberPlus}';
juicer(tpl, {
num: 123
});
//输出Number：124- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
循环遍历 {@each} … {@/each}
对数组进行循环遍历可取得元素或索引值
{@each list as item, index}
${item.prop}
${index}
{@/each}- 1
- 2
- 3
- 4
辅助循环{@each i in range(m,n)}
{@each i in range(5, 10)}
${i}; //输出 5;6;7;8;9;
{@/each}- 1
- 2
- 3
判断{@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}- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
注释{# 注释内容}
{# 我是注释}- 1
子模板嵌套 {@include tpl, data}
HTML代码：
<script type="text/juicer" id="subTpl">
I'm sub content, ${name}
</script>- 1
- 2
- 3
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'
}
});- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
完整示例
模板页面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>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
主页面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>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
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);
});
}
};