javascript轻量级模板引擎juicer使用指南


Posted in Javascript onJune 22, 2014

使用方法

编译模板并根据数据立即渲染出结果

juicer(tpl, data);

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

var compiled_tpl = juicer(tpl);

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

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

注册/注销自定义函数(对象)

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

默认参数配置

{
   cache: true [false];
   script: true [false];
   error handling: true [false];
   detection: true [false];
 }

修改默认配置,逐条修改

juicer.set('cache', false);

修改默认配置,批量修改

juicer.set({
      'script': false,
      'cache': false
 })

Juicer 默认会对编译后的模板进行缓存,从而避免同一模板多次数据渲染时候重复编译所耗的时间, 如无特殊需要,强烈不建议关闭默认参数中的 cache,这么做将会令 Juicer 缓存失效从而降低性能.

语法

* ${变量}         

- 使用${}输出变量,其中_ 为对数据源的引用(${_})。支持使用自定义函数。

${name}
${name|function}
${name|function, arg1, arg2}
var = 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);

* 转义/避免转义

     - ${变量} 在输出之前会对其内容进行转义,如果你不想输出结果被转义,可以使用 $${变量} 来避免这种情况。

var json = {
    value: '<strong>juicer</strong>'
 };
 var escape_tpl='${value}';
 var unescape_tpl='$${value}';
 juicer(escape_tpl, json); //输出 '<strong>juicer</strong>'
 juicer(unescape_tpl, json); //输出 '<strong>juicer</strong>'

*循环遍历 {@each} ... {@/each}          

     - 遍历数组,${index}当前索引

{@each list as item, index}
     ${item.prop}
     ${index} //当前索引
 {@/each}

*判断 {@if} ... {@else if} ... {@else} ... {@/if}

*注释 {# 注释内容}

 {# 这里是注释内容}
*辅助循环 {@each i in range(m, n)}

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

一个完整的例子

HTML 代码:

<script id="tpl" type="text/template">
   <ul>
     {@each list as it,index}
       <li>${it.name} (index: ${index})</li>
     {@/each}
     {@each blah as it}
       <li>
         num: ${it.num} <br />
         {@if it.num==3}
           {@each it.inner as it2}
             ${it2.time} <br />
           {@/each}
         {@/if}
       </li>
     {@/each}
   </ul>
 </script>

Javascript 代码:

var data = {
   list: [
     {name:' guokai', show: true},
     {name:' benben', show: false},
     {name:' dierbaby', show: true}
   ],
   blah: [
     {num: 1},
     {num: 2},
     {num: 3, inner:[
       {'time': '15:00'},
       {'time': '16:00'},
       {'time': '17:00'},
       {'time': '18:00'}
     ]},
     {num: 4}
   ]
 };
 
 var tpl = document.getElementById('tpl').innerHTML;
 var html = juicer(tpl, data);
Javascript 相关文章推荐
语义化 H1 标签
Jan 14 Javascript
fireworks菜单生成器mm_menu.js在 IE 7.0 显示问题的解决方法
Oct 20 Javascript
js 获取class的元素的方法 以及创建方法getElementsByClassName
Mar 11 Javascript
js超时调用setTimeout和间歇调用setInterval实例分析
Jan 28 Javascript
探寻JavaScript中this指针指向
Apr 23 Javascript
灵活使用数组制作图片切换js实现
Jul 28 Javascript
浅谈键盘上回车按钮的js触发事件
Feb 13 Javascript
微信小程序如何获知用户运行小程序的场景教程
May 17 Javascript
layui弹出层按钮提交iframe表单的方法
Aug 20 Javascript
vue前端框架—Mint UI详解(更适用于移动端)
Apr 30 Javascript
微信小程序获取用户信息及手机号(后端TP5.0)
Sep 12 Javascript
React实现轮播效果
Aug 25 Javascript
JQuery插件iScroll实现下拉刷新,滚动翻页特效
Jun 22 #Javascript
Window.Open如何在同一个标签页打开
Jun 20 #Javascript
JSON.parse()和JSON.stringify()使用介绍
Jun 20 #Javascript
Js实现手机发送验证码时按钮延迟操作
Jun 20 #Javascript
使用原生js实现页面蒙灰(mask)效果示例代码
Jun 20 #Javascript
js处理php输出时间戳对不上号的解决方法
Jun 20 #Javascript
Javascript 实现复制(Copy)动作方法大全
Jun 20 #Javascript
You might like
PHP实现Markdown文章上传到七牛图床的实例内容
2020/02/11 PHP
HTML页面如何象ASP一样接受参数
2007/02/07 Javascript
JavaScript 三种创建对象的方法
2009/10/16 Javascript
Jquery 滑入滑出效果实现代码
2010/03/27 Javascript
jquery中获取select选中值的代码
2011/06/27 Javascript
jquery必须知道的一些常用特效方法及使用示例(整理)
2013/06/24 Javascript
JS检测输入字符是否包含非法字符的示例代码
2014/02/11 Javascript
jquery.form.js用法之清空form的方法
2014/03/07 Javascript
jquery map方法使用示例
2014/04/23 Javascript
js判断登录与否并确定跳转页面的方法
2015/01/30 Javascript
js实现上传图片预览的方法
2015/02/09 Javascript
一览画面点击复选框后获取多个id值的方法
2016/05/30 Javascript
javascript 数组的定义和数组的长度
2016/06/07 Javascript
js中遍历Map对象的简单实例
2016/08/08 Javascript
bootstrap与Jquery UI 按钮样式冲突的解决办法
2016/09/23 Javascript
ionic进入多级目录后隐藏底部导航栏(tabs)的完美解决方案
2016/11/23 Javascript
AngularJS控制器controller给模型数据赋初始值的方法
2017/01/04 Javascript
JS/jquery实现一个网页内同时调用多个倒计时的方法
2017/04/27 jQuery
ES7中利用Await减少回调嵌套的方法详解
2017/11/01 Javascript
JS实现小球的弹性碰撞效果
2017/11/11 Javascript
Angular angular-file-upload文件上传的示例代码
2018/08/23 Javascript
解决webpack dev-server不能匹配post请求的问题
2018/08/24 Javascript
vue、react等单页面项目部署到服务器的方法及vue和react的区别
2018/09/29 Javascript
vue+elementUI实现简单日历功能
2020/09/24 Javascript
OpenLayers3实现图层控件功能
2020/09/25 Javascript
JavaScript函数柯里化实现原理及过程
2020/12/02 Javascript
Python中的闭包总结
2014/09/18 Python
在Python的Django框架中加载模版的方法
2015/07/16 Python
HTML+CSS3模拟心的跳动实例代码
2017/09/05 HTML / CSS
日语系毕业生推荐信
2013/11/11 职场文书
酒店员工检讨书
2014/02/18 职场文书
医学专业应届生的自我评价
2014/02/28 职场文书
运动与健康自我评价
2015/03/09 职场文书
2015年小学一年级班主任工作总结
2015/05/21 职场文书
Python基础数据类型tuple元组的概念与用法
2021/08/02 Python
Pandas-DataFrame知识点汇总
2022/03/16 Python