juicer是一个javascript轻量级模板引擎。
编译模板并根据数据立即渲染出结果　　
1 juicer(tpl, data);
仅编译模板暂不渲染，返回一个可重用的编译后的函数
var compiled_tpl = juicer(tpl);
根据给定的数据对之前编译好的模板进行渲染
1 var complied_tpl = juicer(tpl);
2 var html = complied_tpl.render(data);
注册/注销自定义函数（对象）
1 juicer.register(&function_name&, function);
2 juicer.unregister(&function_name&);
默认参数配置
cache: true [false];
script: true [false];
error handling: true [false];
detection: true [false];
修改默认配置，逐条修改
1 juicer.set('cache', false);
修改默认配置，批量修改
1 juicer.set({
'script': false,
'cache': false
Juicer 默认会对编译后的模板进行缓存，从而避免同一模板多次数据渲染时候重复编译所耗的时间， 如无特殊需要，强烈不建议关闭默认参数中的 cache，这么做将会令 Juicer 缓存失效从而降低性能.
语法 & & &
* ${变量} & & & & &
- 使用${}输出变量，其中_ 为对数据源的引用（${_})。支持使用自定义函数。
2 ${name|function}
3 ${name|function, arg1, arg2}&
var = links: [{href: 'http://juicer.name', alt: 'Juicer&},
{href: 'http://benben.cc', alt: 'Benben&},
{href: '', alt: 'Taobao UED&}
5 var tpl = [ '{@each links as item}&,
'${item|links_build} &br /&&,
'{@/each}'].join('&);
8 var links = function(data) {
9 　　return '&a href="' + data.href + '" alt="' + data.alt + '" /&&;
11 juicer.register('links_build', links); //注册自定义函数
12 juicer(tpl, json);
* 转义/避免转义& & &-&${变量} 在输出之前会对其内容进行转义，如果你不想输出结果被转义，可以使用 $${变量} 来避免这种情况。
1 var json = {
value: '&strong&juicer&/strong&'
5 var escape_tpl='${value}';
6 var unescape_tpl='$${value}';
8 juicer(escape_tpl, json); //输出 '&strong&juicer&/strong&'
9 juicer(unescape_tpl, json); //输出 '&strong&juicer&/strong&'
*循环遍历 {@each} ... {@/each}& & & & &&
& & &- 遍历数组，${index}当前索引
1 {@each list as item, index}
${item.prop}
${index} //当前索引
4 {@/each}
*判断 {@if} ... {@else if} ... {@else} ... {@/if}
1 {@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}
the index is not 3, the value is ${item.prop}
9 {@/each}
*注释 {# 注释内容}
1 {# 这里是注释内容}
*辅助循环 {@each i in range(m, n)}
1 {@each i in range(5, 10)}
${i}; //输出 5;6;7;8;9;
3 {@/each}
*子模板嵌套 {@include tpl, data}& & & &-&子模板嵌套除了可以引入在数据中指定的子模板外，也可以通过指定字符串`#id`使用写在`script`标签中的模板代码.& & & &- HTML代码：
&script type="text/juicer" id="subTpl"&
I'm sub content, ${name}
& & & &- Javascript 代码：
1 var tpl = 'Hi, {@include "#subTpl", subData}, End.';
3 juicer(tpl, {
subData: {
name: 'juicer'
9 //输出 Hi, I'm sub content, juicer, End.
10 //或者通过数据引入子模板，下述代码也将会有相同的渲染结果：
12 var tpl = 'Hi, {@include subTpl, subData}, End.';
14 juicer(tpl, {
subTpl: "I'm sub content, ${name}",
subData: {
name: 'juicer'
& & & & & & & & & & &
一个完整的例子&
HTML 代码:
1 &script id="tpl" type="text/template"&
{@each list as it,index}
&li&${it.name} (index: ${index})&/li&
{@each blah as it}
num: ${it.num} &br /&
{@if it.num==3}
{@each it.inner as it2}
${it2.time} &br /&
17 &/script&
Javascript 代码:
1 var data = {
{name:' guokai', show: true},
{name:' benben', show: false},
{name:' dierbaby', show: true}
{num: 3, inner:[
{'time': '15:00'},
{'time': '16:00'},
{'time': '17:00'},
{'time': '18:00'}
20 var tpl = document.getElementById('tpl').innerHTML;
21 var html = juicer(tpl, data);
阅读(...) 评论()javascript中doT,juicer,artTemplate模板引擎分析与对比-js教程-网页制作-壹聚教程网javascript中doT,juicer,artTemplate模板引擎分析与对比
目前客户端资源极为强大，而服务器资源也应不断优化，将页面的html拼接转接到客户端完成，节省服务器资源，且更加易于维护，这为今后工作带来了很大便利。
再可以将前后端代码分离，岗位清晰，使后台程序人员可更好的去完成逻辑运算，而前端人员岗位更加专精、统一。
js模板引擎越来越多的得到应用，如今已经出现了几十种js模板引擎，国内各大互联网公司也都开发了自己的js模板引擎（淘宝的kissy template，腾讯的artTemplate，百度的baiduTemplate等），如何从这么多纷繁的模板引擎中选择一款适合自己的呢，笔者最近对主流的js模板引擎（mustache，doT，juicer，artTemplate，baiduTemplate，Handlebars，Underscore）做了一番调研，分享出来希望对大家有用。
从这几个指标来比较js模板引擎：
1 文件大小 & 影响网络传输时间 2 执行速度（性能） & 影响响应速度，涉及模板解析和渲染 3 语法简明/易用/灵活/自定义操作符 & 影响开发效率和维护难度 4 错误处理/调试 & 影响开发效率和维护难度 5 安全（XSS） & 是否防止XSS
1 文件大小（压缩后） Mustache：5k doT：4k juicer：7.65k artTemplate(腾讯)：5k baiduTemplate(百度)：3k Underscore(Arale)：11.7k & 不只是模板，还包含很多js语言增强功能 Handlebars(Arale)：30.5k
&2 执行速度（不要迷恋速度） 对于执行速度，不得不提模板&编译速度&和&渲染速度&。这几个主流模板都支持将模板预编译，然后再渲染。 这里有一篇文章《高性能JavaScript模板引擎原理解析》，说artTemplate的速度达到理论极限，实际说的是渲染速度，它的综合速度并不快。 一般情况下，每页面只有一两个模板，执行时间差别不大。 &&这里&&有个测试页面，根据artTemplate的测试页面《引擎渲染速度竞赛》改的，揭示了几个主流js模板引擎的性能情况，大致结果截图如下：
可以看出artTemplate,juicer,doT比其他模板引擎快很多。
3 语法 简明/易用/灵活/自定义操作符 & 影响开发效率和维护难度
语法需要一段时间的使用经验才能更深切地体会到优缺点，并且每个人喜欢的语法风格也不同，这部分可能略带个人主观色彩。 这几个js模板引擎的语法可以粗略分为两种，一种是类似的语法（doT, artTemplate, underscore），另一种是与javascript差异较大的语法（Mustache, juicer, handlebars）。从易上手的角度来看，类javascript语法更容易被新手掌握，但是熟练掌握之后，各个模板的语法都能满足我们的需求，可以按个人喜好来选择。
Mustache声称是无逻辑（logic-less）模板，没有for、if&else&语法，但实际可以实现循环和分支，还可以实现更复杂的逻辑。 doT模板语法灵活，阅读起来很易懂。可以方便地改造成插件。
&!--Mustache 的模板 --&
&script id=&Mustache& type=&text/tmpl&&
&&& {{#list}}
&&&&&&& &li&{{{index}}}. 用户: {{{user}}}/ 网站：{{{site}}}&/li&
&&& {{/list}}
&!-- doT 的模板 --&
&script id=&doT& type=&text/tmpl&&
&&& {{ for (var val, i = 0, l = it.list. i & i ++) { }}
&&&&&&& {{ val = it. }}
&&&&&&& &li&{{=val[i].index}}. 用户: {{=val[i].user}}/ 网站：{{=val[i].site}}&/li&
&&& {{ } }}
&!--juicer 的模板 --&
&script id=&juicer& type=&text/tmpl&&
&&& {@each list as val}
&&&&&&& &li&$${val.index}. 用户: $${val.user}/ 网站：$${val.site}&/li&
&&& {@/each}
&!-- artTemplate 的模板 --&
&script id=&template& type=&text/tmpl&&
&&& &% for (i = 0, l = list. i & i ++) { %&
&&&&&&& &li&&%=list[i].index%&. 用户: &%=list[i].user%&/ 网站：&%=list[i].site%&&/li&
&&& &% } %&
&!-- underscore 的模板 --&
&script id=&underscoreTemplate& type=&text/tmpl&&
&&& &% for (var i = 0, l = list. i & i ++) { %&
&&&&&&& &li&&%=list[i].index%&. 用户: &%=list[i].user%&/ 网站：&%=list[i].site%&&/li&
&&& &% } %&
&!-- Handlebars 的模板 --&
&script id=&Handlebars& type=&text/tmpl&&
&&& {{#list}}
&&&&&&& &li&{{{index}}}. 用户: {{{user}}}/ 网站：{{{site}}}&/li&
&&& {{/list}}
4 错误处理/调试 & 影响开发效率和维护难度 artTemplate 有详细的错误提示信息，查错方便，不影响后面代码的继续执行 kissy template 错误信息直接输出在页面，而不是在控制台。不影响后面代码的继续执行 juicer 控制台提示模板渲染出错，不影响后面代码的继续执行 mustache 没有任何错误信息，不影响后面代码的继续执行 其他控制台报脚本错误 js执行中断，不知道是哪里出错
&5 安全- 很重要。是否防止XSS 以上几个模板引擎全都支持html转义，防止XSS
最终的一个对比：
上一页： &&&&&下一页：相关内容前端（18）
1.引入juicer-min.js文件
2.定义模板例如&script id=&tpl& type=&text/template&&
{@each list as it,index}
&li&${it.name} (index:${index})&/li&
{@each blah as it}
num:${it.num}&br/&
{@if it.num==3}
{@each it.inner as it2}
${it2.time}&br/&
&/script&3.模板数据依赖
&script type=&text/javascript&&
var data={
{name:'firstname',show:true},
{name:'secondname',show:false},
{name:'thirdname',show:true}
{num:3,inner:[
{'time':'15:00'},
{'time':'16:00'},
{'time':'17:00'},
{'time':'18:00'}
var tpl=document.getElementById(&tpl&).innerHTML;
var html=juicer(tpl,data); //得到渲染结果，需要放到DOM元素中才能在页面中显示
var div= document.getElementsById(&box&);
box.innerHTML =
参考知识库
* 以上用户言论只代表其个人观点，不代表CSDN网站的观点或立场
访问：1567次
排名：千里之外
原创：13篇
(3)(2)(2)(4)(7)(4)让我们从一段代码说起，假设有一段这样的JSON数据：
var json={
name:"流火",
blog:"benben.cc"
我们需要根据这段JSON生成这样的HTML代码：
&span class="name"&流火 (blog: benben.cc)&/span&
传统的Javascript代码一定是这个样子：
html='&span class="name"&'+json.name+' (blog: '+json.blog+')&/span&';
不言而喻，这样的代码混杂了html结构和代码逻辑，而且代码不具可读性，不便于后期维护，于是便有了这样一个函数：
function sub(str,data) {
&&&&return str
&&&&&&&&.replace(/{(.*?)}/igm,function($,$1) {
&&&&&&&&&&&&return data[$1]?data[$1]:$;
&&&&&&&&});
有了这个函数，我们拼接字符串的工作就可以简化为：
var tpl='&span class="name"&{name} (blog: {blog})&/span&';
var html=sub(tpl,json);
看到这里，不用我多说，我想通过这个例子直观的展现出前端模板引擎的好处所在，这么做能够完全剥离html和代码逻辑，便于多人协作和后期的代码维护。当然，当我们的业务逻辑需要对数据源进行循环遍历，if判断等的时候，这个简明的函数很显然并不能满足我们的需求，于是便有了如今这市面上众多的模板引擎，诸如Mustache, jQuery tmpl, Kissy template, ejs, doT, nTenjin, etc.
&如无必要，勿增实体。& 这是著名的奥卡姆剃须刀法则，简单的说就是避免重复造轮子。那么就会有童鞋质疑，既然已然有这么多现成的东西可用，为什么还要重新打造一个呢？
我个人认为一个完善的模板引擎应该兼顾这几点：
执行效率高
错误处理机制
多语言通用性
而市面上现有的模板引擎没有做到兼顾以上几点，比如Mustache支持多种语言，通用性不错，不过性能稍差，而且语法不支持高级特性，例如遍历的时候无法做if判断，也无法获得index索引值，jQuery tmpl依赖jQuery，缺乏可移植性，Kissy template虽然依赖Kissy, 不过性能和语法都值得推荐，doT/nTenjin 性能和灵活性都很不错，但是语法需要用原生的js来写，写好的模板代码可读性稍差。
鱼和熊掌不可兼得，语法的处理，安全性的输出过滤和错误处理机制的引入在一定程度上都会或多或少降低模板引擎的性能，因此就需要我们权衡。Juicer 在实现上首先将性能看做第一个重要的指标，毕竟性能好坏直接影响用户的感知，同时兼顾了安全性和错误处理机制（即便这样会导致性能的略微下降）。
首先来看下jsperf上同几个主流模板引擎的性能对比。
可以看到，性能上比传统模板引擎均有提升，下边的介绍主要从语法、安全性和错误处理，以及如何使用这几个方面介绍下Juicer.
循环 {@each}&{@/each}
判断 {@if}&{@else if}&{@else}&{@/if}
变量（支持函数）${varname|function}
注释 {# comment here}
详细的语法请参考&.
安全性，简单地说就是对输出数据在输出前进行一次转义过滤，避免XSS这样的脚本注入攻击，简单扫下盲，举个XSS的例子。
var json={
output:'&script&alert("XSS");&/script&'
如果JSON数据是第三方接口返回或者含有用户输入（像BBS、评价）的内容，我们如果赤裸裸的将output写到页面上就会执行恶意的js代码，所以Juicer默认是对数据输出做了安全转义的，当然如果不想被转义，可以使用$${varname}。
juicer.to_html('${output}',json); //输出：&script&alert("XSS");&/script&
juicer.to_html('$${output}',json); //输出：&script&alert("XSS");&/script&
c. 错误处理
如果没有错误处理，当模板引擎编译(Compile)或者渲染(Render)出错时候就会引起后续js代码停止执行，可想而知，如果因为一个逗号或者JSON数据的偶发错误导致整个页面挂掉，是我们不能接受的。但是Juicer在遇到这些错误的时候不会影响后续代码的执行，只会在控制台打出一句警告(Warn)告知开发者模板解析出现错误。
juicer.to_html('${varname,,,,,,,}',json);
alert('hello, juicer!');
执行上边的代码就会看到控制台打出的&Juicer Compile Exception: Unexpected token ,&，但是不会因为错误导致后续的alert被阻塞掉。
Juicer对一个模板的编译和渲染的过程主要有以下几个步骤：
1、对模板代码进行语法分析
2、分析后生成原生的Javascript代码字符串
3、将生成的代码转为可重用的Function (Compiled Template)
var json={
{name:"benben"},
{name:"liuhuo"}
var tpl='{@each data.list as value,key}$${value.name}{@/each}';
var compiled_tpl=juicer.compile(tpl,{errorhandling:false});
我们通过compiled_tpl.render.toString()看下编译后的代码：
function anonymous(data) {
var data = data || {};
var out = '';
out += '';
for (var i0 = 0, l = data.list.length; i0 & l; i0++) {
var value = data.list[i0];
var key = i0;
out += '';
out += ((value.name));
out += '';
out += '';
return out;
是不是已经明白了Juicer的原理？这个编译后的函数就会每次帮我们完成从数据到html代码的拼装操作。
这里有几点优化的地方值得分享下：
1、using += instead of array.push
2、avoid using with {}
3、cache the compiled template (function)
这几点优化在大数据量循环渲染时候性能提升显著，不过正因为放弃了with{}语句，所以JSON数据外层必须指定&data.&前缀，如果你觉得这点性能的提升不重要，也可以在options中指定loose:true（松散模式），这样就可以省去data. 前缀。
最后介绍下Options配置项，左侧为参数默认值。
cache:true/false,
loose:false/true,
errorhandling:true/false
cache默认为true，即同一个模板编译后是否被juicer缓存，也就是说如果缓存开启的情况下，同一个模板第一次编译后，为了缩短耗时提升性能，后续不会再次执行编译的操作而是直接从缓存中去取编译好的模板函数。
Juicer的API. Juicer有两种使用方法，一种是通过
juicer.to_html(tpl,data,options);
直接根据提供的数据将模板转为html代码，另一种是通过compile方法先将模板编译好，在需要的时候再对模板进行数据的Render操作：
var compiled_tpl=juicer.compile(tpl,options);
compiled_tpl.render(data);
最后附上Juicer的项目地址，上边有详细的文档和Demo代码。
阅读(...) 评论()& & & & 让我们从一段代码说起，假设有一段这样的JSON数据：var json={ name:"流火", blog:""};& & 我们需要根据这段JSON生成这样的HTML代码：&span&流火 (blog: )&/span&& & 传统的Javascript代码一定是这个样子：html='&span&'+json.name+' (blog: '+json.blog+')&/span&';& & 不言而喻，这样的代码混杂了html结构和代码逻辑，而且代码不具可读性，不便于后期维护，于是便有了这样一个函数：function sub(str,data) {&&&&return str&&&&&&&&.replace(/{(.*?)}/igm,function($,$1) {&&&&&&&&&&&&return data[$1]?data[$1]:$;&&&&&&&&});}& & 有了这个函数，我们拼接字符串的工作就可以简化为：var tpl='&span&{name} (blog: {blog})&/span&';var html=sub(tpl,json);& & & & 看到这里，不用我多说，我想通过这个例子直观的展现出前端模板引擎的好处所在，这么做能够完全剥离html和代码逻辑，便于多人协作和后期的代码维护。当然，当我们的业务逻辑需要对数据源进行循环遍历，if判断等的时候，这个简明的函数很显然并不能满足我们的需求，于是便有了如今这市面上众多的模板引擎，诸如Mustache, jQuery tmpl, Kissy template, ejs, doT, nTenjin, etc.& & “如无必要，勿增实体。” 这是著名的奥卡姆剃须刀法则，简单的说就是避免重复造轮子。那么就会有童鞋质疑，既然已然有这么多现成的东西可用，为什么还要重新打造一个呢？& & 我个人认为一个完善的模板引擎应该兼顾这几点：语法简明执行效率高安全性错误处理机制多语言通用性& & & & 而市面上现有的模板引擎没有做到兼顾以上几点，比如Mustache支持多种语言，通用性不错，不过性能稍差，而且语法不支持高级特性，例如遍历的时候无法做if判断，也无法获得index索引值，jQuery tmpl依赖jQuery，缺乏可移植性，Kissy template虽然依赖Kissy, 不过性能和语法都值得推荐，doT/nTenjin 性能和灵活性都很不错，但是语法需要用原生的js来写，写好的模板代码可读性稍差。& & 鱼和熊掌不可兼得，语法的处理，安全性的输出过滤和错误处理机制的引入在一定程度上都会或多或少降低模板引擎的性能，因此就需要我们权衡。 Juicer 在实现上首先将性能看做第一个重要的指标，毕竟性能好坏直接影响用户的感知，同时兼顾了安全性和错误处理机制（即便这样会导致性能的略微下降）。& & 首先来看下jsperf上同几个主流模板引擎的性能对比。& & & & & & 可以看到，性能上比传统模板引擎均有提升，下边的介绍主要从语法、安全性和错误处理，以及如何使用这几个方面介绍下Juicer.& & a. 语法循环 {@each}…{@/each}判断 {@if}…{@else if}…{@else}…{@/if}变量（支持函数）${varname|function}注释 {# comment here}& & 详细的语法请参考Juicer Docs.& & b. 安全性& & 安全性，简单地说就是对输出数据在输出前进行一次转义过滤，避免XSS这样的脚本注入攻击，简单扫下盲，举个XSS的例子。var json={ output:'alert("XSS");'};& & 如果JSON数据是第三方接口返回或者含有用户输入（像BBS、评价）的内容，我们如果赤裸裸的将output写到页面上就会执行恶意的js代码，所以Juicer默认是对数据输出做了安全转义的，当然如果不想被转义，可以使用$${varname}。juicer.to_html('${output}',json);//输出：&script&alert("XSS");&/script&juicer.to_html('$${output}',json);//输出：& & c. 错误处理& & 如果没有错误处理，当模板引擎编译(Compile)或者渲染(Render)出错时候就会引起后续js代码停止执行，可想而知，如果因为一个逗号或者JSON数据的偶发错误导致整个页面挂掉，是我们不能接受的。但是Juicer在遇到这些错误的时候不会影响后续代码的执行，只会在控制台打出一句警告(Warn)告知开发者模板解析出现错误。juicer.to_html('${varname,,,,,,,}',json);alert('hello, juicer!');& & 执行上边的代码就会看到控制台打出的“Juicer Compile Exception: Unexpected token ,”，但是不会因为错误导致后续的alert被阻塞掉。& & 实现原理& & & & Juicer对一个模板的编译和渲染的过程主要有以下几个步骤：1、对模板代码进行语法分析2、分析后生成原生的Javascript代码字符串3、将生成的代码转为可重用的Function (Compiled Template)var json={ list:[
{name:"benben"},
{name:"liuhuo"} ]};var tpl='{@each data.list as value,key}$${value.name}{@/each}';var compiled_pile(tpl,{errorhandling:false});& & 我们通过compiled_tpl.render.toString()看下编译后的代码：function anonymous(data) { var data = data || {}; var ut = ''; out += ''; for (var i0 = 0, l = data.list. i0 & i0++) {
var value = data.list[i0];
var key = i0;
out += '';
out += ((value.name));
out += ''; } out += ''; }& & 是不是已经明白了Juicer的原理？这个编译后的函数就会每次帮我们完成从数据到html代码的拼装操作。& & 这里有几点优化的地方值得分享下：1、using += instead of array.push2、avoid using with {}3、cache the compiled template (function)& & 这几点优化在大数据量循环渲染时候性能提升显著，不过正因为放弃了with{}语句，所以JSON数据外层必须指定“data.”前缀，如果你觉得这点性能的提升不重要，也可以在options中指定loose:true（松散模式），这样就可以省去data. 前缀。& & 最后介绍下Options配置项，左侧为参数默认值。{ cache:true/false, loose:false/true, errorhandling:true/false}& & cache默认为true，即同一个模板编译后是否被juicer缓存，也就是说如果缓存开启的情况下，同一个模板第一次编译后，为了缩短耗时提升性能，后续不会再次执行编译的操作而是直接从缓存中去取编译好的模板函数。& & Juicer的API. Juicer有两种使用方法，一种是通过juicer.to_html(tpl,data,options);& & 直接根据提供的数据将模板转为html代码，另一种是通过compile方法先将模板编译好，在需要的时候再对模板进行数据的Render操作：var compiled_pile(tpl,options);compiled_tpl.render(data);& & 最后附上Juicer的项目主页，上边有详细的文档和Demo代码。& & http://juicer.name来自:
声明：该文章系网友上传分享，此内容仅代表网友个人经验或观点，不代表本网站立场和观点；若未进行原创声明，则表明该文章系转载自互联网；若该文章内容涉嫌侵权，请及时向
论文写作技巧
上一篇：下一篇：
相关经验教程