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 相关文章推荐
js中scrollHeight,scrollWidth,scrollLeft,scrolltop等差别介绍
May 16 Javascript
jQuery实现鼠标滑过遮罩并高亮显示效果
Jul 16 Javascript
JS中的log对象获取以及debug的写法介绍
Mar 03 Javascript
详细解读JavaScript编程中的Promise使用
Jul 27 Javascript
JS基于构造函数实现的菜单滑动显隐效果【测试可用】
Jun 21 Javascript
JS中检测数据类型的几种方式及优缺点小结
Dec 12 Javascript
Angular 1.x个人使用的经验小结
Jul 19 Javascript
简单实现jQuery轮播效果
Aug 18 jQuery
详解webpack-dev-server的简单使用
Apr 02 Javascript
layui 设置table 行的高度方法
Aug 17 Javascript
为什么Vue3.0使用Proxy实现数据监听(defineProperty表示不背这个锅)
Oct 14 Javascript
JavaScript常用工具函数大全
May 06 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与ASP
2006/10/09 PHP
常用表单验证类,有了这个,一般的验证就都齐了。
2006/12/06 PHP
实用函数4
2007/11/08 PHP
解析PHP自带的进位制之间的转换函数
2013/06/08 PHP
PHP多线程之内部多线程实例分析
2015/03/09 PHP
使用ThinkPHP的自动完成实现无限级分类实例详解
2016/09/02 PHP
PHP实现找出有序数组中绝对值最小的数算法分析
2017/08/07 PHP
IE6下JS动态设置图片src地址问题
2010/01/08 Javascript
读jQuery之十二 删除事件核心方法
2011/07/31 Javascript
jquery聚焦文本框与扩展文本框聚焦方法
2012/10/12 Javascript
让table变成exls的示例代码
2014/03/24 Javascript
javascript HTML+CSS实现经典橙色导航菜单
2016/02/16 Javascript
JavaScript必知必会(七)js对象继承
2016/06/08 Javascript
非常优秀的JS图片轮播插件Swiper的用法
2017/01/03 Javascript
webpack开发环境和生产环境的深入理解
2018/11/08 Javascript
Vue.js组件间通信方式总结【推荐】
2018/11/23 Javascript
Typescript 中的 interface 和 type 到底有什么区别详解
2019/06/18 Javascript
vue表单中遍历表单操作按钮的显示隐藏示例
2019/10/30 Javascript
vue实现图片懒加载的方法分析
2020/02/05 Javascript
jquery检测上传文件大小示例
2020/04/26 jQuery
JS 逻辑判断不要只知道用 if-else 和 switch条件判断(小技巧)
2020/05/27 Javascript
简单介绍Python下自己编写web框架的一些要点
2015/04/29 Python
python实现通过队列完成进程间的多任务功能示例
2019/10/28 Python
Python脚本操作Excel实现批量替换功能
2019/11/20 Python
python:批量统计xml中各类目标的数量案例
2020/03/10 Python
如何通过Python3和ssl实现加密通信功能
2020/05/09 Python
学python最电脑配置有要求么
2020/07/05 Python
使用gunicorn部署django项目的问题
2020/12/30 Python
Farfetch台湾官网:奢侈品牌时尚购物平台
2019/06/17 全球购物
艺术设计专业个人求职信
2013/09/21 职场文书
新员工培训个人的自我评价
2013/10/09 职场文书
党校学习心得体会范文
2014/09/09 职场文书
平遥古城导游词
2015/02/03 职场文书
Navicat连接MySQL错误描述分析
2021/06/02 MySQL
Vue如何清空对象
2022/03/03 Vue.js
GTX1650super好不好 gtx1650super显卡属于什么级别
2022/04/08 数码科技