juicer 入门教程

来源：互联网发布：忘不了前男友知乎编辑：程序博客网时间：2024/06/03 14:08

juicer官方介绍

https://github.com/PaulGuo/Juicer

http://juicer.name/

// 编译模板并根据所给的数据立即渲染出结果
juicer(tpl, data);

// 仅编译模版暂不渲染，它会返回一个可重用的编译后的函数. 根据给定的数据，对之前编译好的模板进行数据渲染.

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': '}'  });

// 默认配置是 Juicer 推荐的使用方式，如果你使用过程中的确需要更改这些参数，可以这么做：
逐条参数更改：
juicer.set('strip',false);
juicer.set('cache',false);

批量参数更改：
juicer.set({
    'strip': false,
    'cache': false
});

${变量}
使用 ${} 输出变量值，

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

内联辅助函数 {@helper} ... {@/helper}
如果你需要在页面或者模板内定义辅助函数，可以像这样使用 `helper`，同时支持Node和Browser.

Javascript 代码：
var tpl = 'Number: ${num|numberPlus}';
juicer(tpl, {
    num: 123
});
//输出 Number: 124

循环遍历 {@each} ... {@/each}
如果你需要对数组进行循环遍历的操作，就可以像这样使用 `each` .
{@each list as item}
    ${item.prop}
{@/each}

如果遍历过程中想取得当前的索引值，也很方便.
{@each list as item, index}
    ${item.prop}
    ${index} //当前索引
{@/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}

注释 {# 注释内容}
为了后续代码的可维护性和可读性，我们可以在模板中增加注释.
{# 这里是注释内容}

辅助循环 {@each i in range(m, n)}
辅助循环是 Juicer 为你精心设置的一个语法糖，也许你会在某种情境下需要它.
{@each i in range(5, 10)}
    ${i}; //输出 5;6;7;8;9;
{@/each}

子模板嵌套 {@include tpl, data}
子模板嵌套可以让你更灵活的组织你的模板代码，除了可以引入在数据中指定的子模板外，当然你也可以通过指定字符串`#id`使用写在`script`标签中的模板代码.
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'      }  });

文件名： juicer-1.html

<html><script type="text/javascript" src="juicer-min.js"></script><!-- 引入 juicer --><script id="tpl" type="text/template"><!-- template 模板; 模板内容不会直接显示出来 --><div><p> HTML script is allowed! </p><p> ${name} </p><!-- ${variableName} juicer调用变量的方式 --></div></script> <div id='content'> Original HTML content! </div>   <script type="text/javascript">window.onload = function(){alert('breakpoint');var data=new Object();data.name="this content is loaded by juicer!"// 定义一个字符串变量var tpl = document.getElementById('tpl').innerHTML;// 获取模板内容var tplContent = juicer(tpl, data);// 使用juicer将参数渲染模板var content = document.getElementById('content');    content.innerHTML=tplContent;// 将内容写到HTML元素展示}</script></html>

更多使用实例，请参考以下 juicer-2.html 代码：

文件名： juicer-2.html

<html><script type="text/javascript" src="juicer-min.js"></script><!--  --><!-- template 模板; 模板内容不会直接显示出来 ;;;; 此处type值可以设置为 type="text/XXX"   默认的javascript会导致浏览器解析出错。  --><script id="tpl" type="text/template"><div><p> HTML script is allowed! </p><p> ${name} </p><!-- ${variableName} juicer调用变量的方式 --><div>{# 注释内容 }<!-- 遍历js数组，将值给指定函数处理 --><span style="color:red"> list: </span> <br/>{@each list as value,index} {@if value.name=='guokai'}          The value is ${value.name},the index is ${index} <br/>    {@else}    value : ${value.name}  ||| index : ${index}  <br/>    {@/if}  {@/each}<span style="color:red"> rows: </span> <br/>{@each rows as value} {@if value==1}          The value is ${value} <br/>    {@else if value == 2}This value  ${value}  had been decorated : ${ value | decorate } <br/>   {# 将变量传给函数处理 }    {@else}    The value is ${value} <br/>    {@/if}  {@/each}</div></div></script> <div><p>  sub content! </p><!-- 新建一个模板，嵌套使用 --><script type="text/juicer" id="subTpl">   I'm 1th sub content, ${name}  </script>  </div><div id='content'> Original HTML content! </div>   <script type="text/javascript">window.onload = function(){alert('breakpoint');//参数var data=new Object();data = {    list: [          {name:' guokai', show: true},          {name:' benben', show: false},          {name:' dierbaby', show: true}  ],name:"this content is loaded by juicer!",// 定义一个字符串变量rows: [1,2,3]}var tpl = document.getElementById('tpl').innerHTML;// 获取模板内容var tplContent = juicer(tpl);// 模板化tplvar tplContent = tplContent.render(data);var content = document.getElementById('content');            // 嵌套一个 subTpl 模板。（第 1 种方式）    var subtpl = '<br/><br/> Hi, {@include "#subTpl", subData}, End.<br/>';tplContent += juicer(subtpl, {      subData: {          name: 'subJuicer'      }  });  // 嵌套一个 subTpl 模板。（第 2 种方式）var tpl = 'Hi, {@include subTpl, subData}, End. <br/>';    tplContent += juicer(tpl, {      subTpl: "I'm 2th sub content, ${name}",      subData: {          name: 'juicer'      }  }); content.innerHTML=tplContent;// 将内容写到HTML元素展示}</script><script type="text/javascript">// 自定义函数注册给juicerfunction decorateString(value){var newValue = value+10;return newValue ;}juicer.register('decorate', decorateString);</script></html>

0 0