Juicer 轻量前端模板引擎

2018-03-21

× 文章目录

1. Juicer用法

Juicer用法

// juicer引入
<script type="text/javascript" src="juicer-min,js"></script>
// 编译模板并渲染数据
juicer(tpl,data);
// 仅编译模板暂不渲染，返回可重用编译函数
var compile_tpl = juicer(tpl);
var html = compile_tpl.render(data);
// 注册/注销自定义函数(对象)
juicer.register("function_name",function);
juicer.unregister("function_name");

自定义模板语法边界符

juicer.set({
    'tag::operationOpen': '{@',
    'tag::operationClose': '}',
    'tag::interpolateOpen': '${',
    'tag::interpolateClose': '}',
    'tag::noneencodeOpen': '$${',
    'tag::noneencodeClose': '}',
    'tag::commentOpen': '{#',
    'tag::commentClose': '}'
});

默认参数配置：

{
    cache:          true [false],
    strip:          true [false],
    errorhandling:  true [false],
    detection:      true [false]
}
修改默认配置：
// 单个修改
juicer.set('strip',false);
// 批量参数设置
juicer.set({
    'strip': false,
    'cache': false
})

1.$变量

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);
// 使用单个$就会产生转义，即'<'转为&lt; '>'转为&gt;
// 为避免转义，使用'$$'.

2. 内联辅助函数

即{@helper} ... {@/helper}
{@helper numberPlus}
    function(number){
        return number+1;
    }
{@/helper}
// JavaScript代码
var tpl = 'Number: ${num|numberPlus}';
juicer(tpl,{num: 123});   // 124

3. 循环遍历

即{@each}...{@/each}
{@each list as item,index}
    ${item.prop}
    ${index}
{@/each}

4. 判断

即{@if}...{@else if}...{@else}...{@/if}
// 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}

5. 注释

{# 注释内容}

6. 辅助循环

即{@each i in range(m,n)}
{@each i in range(5,10)}
    ${i}   // 5,6,7,8,9
{@/each}

7. 子模版嵌套

可以在script标签中写入id

即{@include tpl,data}
// HTML代码
<script type="text/juicer" id="subTpl">
	Im sub content, ${name},
</script>
// JavaScript代码
var tpl = 'Hi, {@include "#subTpl", subData}, End.';
juicer(tpl, {
	subData: {
		name: 'juicer'
	}
});         
// 输出 Hi, Im sub content, juicer, End
// 或者通过数据引入子模板，下述代码也将会有相同的渲染结果：
var tpl = "Hi, {@include subTpl, subData}, End.";
juicer(tpl, {
    subTpl: "Im sub content, ${name}",
    subData: {
        name: 'juicer'
    }
});

参考文章：
Juicer中文文档
如有错误，烦请指正，谢谢！