html模板引擎 字符串长度,javascript轻量级模板引擎juicer使用指南
使用方法
编译模板并根据数据立即渲染出结果
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}
',
'{@/each}'].join('');
var links = function(data) {
return '';
};
juicer.register('links_build', links); //注册自定义函数
juicer(tpl, json);
* 转义/避免转义
- ${变量} 在输出之前会对其内容进行转义,如果你不想输出结果被转义,可以使用 $${变量} 来避免这种情况。
var json = {
value: 'juicer'
};
var escape_tpl='${value}';
var unescape_tpl='$${value}';
juicer(escape_tpl, json); //输出 'juicer'
juicer(unescape_tpl, json); //输出 'juicer'
- 遍历数组,${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代码:
I'm sub content, ${name}
- 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 代码:
{@each list as it,index}
${it.name} (index: ${index})
{@/each}
{@each blah as it}
num: ${it.num}
{@if it.num==3}
{@each it.inner as it2}
${it2.time}
{@/each}
{@/if}
{@/each}
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);
html模板引擎 字符串长度,javascript轻量级模板引擎juicer使用指南相关推荐
- html模板引擎 字符串长度,Web前端模板引擎の字符串模板
这是一个系列文章,将会介绍目前Web前端领域里用到的三种模板引擎技术,它们分别是: 基于字符串的模板 基于Dom操作的模板 基于虚拟Dom的模板 本文是这个系列的第一篇,着重介绍基于字符串的模板引擎的 ...
- php 字符串里面计算,php 计算字符串长度
在项目的开发中,常常遇到要计算一个字符串的长度(中英文结合),由于产品要求不同,每个中文的长度要求也不一样. 解决utf-8编码下的字符串长度(可自定义每个中英文算几个字节) /** * 计算字符串长 ...
- 前端模板引擎artTemplate---高性能JavaScript模板引擎
关于artTemplate模板引擎的详细原理请移步高性能JavaScript模板引擎原理解析,本文只探讨如何使用.初学前端的人一般对于绑定数据都是使用原生js或者jquery来拼接字符串,此为hard ...
- ie模版字符串_字符串(String)模板引擎被视为是有害的
用模板和一些数据来生成HTML不是一项特别繁重的任务.那些你必须要为HTML做的事才是效率低下的部分. 假如你有一个代表改变数据的UI: Current score: {{currentScore}} ...
- JavaScript之模板字符串的使用
本文主要介绍JavaScript中模板字符串的使用.相对于字符串拼接而言,模板字符串提供了更加简洁的方法.下面介绍模板字符的几个特性. 1.支持单双引号同时书写 模板字符串由反引号"`&qu ...
- php 模板 {{}},PHP字符串模板引擎
这是一个简易的字符串模板引擎.数据库模板引擎.区别于一般基于文件模板的引擎,这里的模板是一个字符串,因此可以将模板存于数据库或其他地方,而且不是编译型引擎,没有缓存文件,因而就不涉及到目录权限问题.模 ...
- 【javascript】模板字符串
目录 模板字符串 示例1:单行.多行字符串 示例2:嵌入表达式 示例3:模板嵌套 示例4:eval + 模板字符串 示例5:模板字符串获取参数值 示例6:模板字符串获取表单元素的值 参考 模板字符串 ...
- ThinkPHP6 模板引擎普通标签中,模板引擎运算符函数,循环标签,判断标签的使用,及一些特殊标签
ThinkPHP6 模板引擎普通标签中,模板引擎运算符函数,循环标签,判断标签的使用,及一些特殊标签 模板引擎支持普通标签和XML标签方式两种标签定义,分别用于不同的目的: 标签类型 描述 普通标签 ...
- swig模板 PHP,认识一下swig前端模板引擎
swig官网上的自我介绍是基于Node.js和浏览器的JavaScript模板引擎.下面介绍的是一些常用的基本语法,不过我还是极力推荐仔细阅读siwg官网教程. swig的安装 通过NPM:npm i ...
- html jquery 模板引擎,jquery template.js前端模板引擎
作为现代应用,ajax的大量使用,使得前端工程师们日常的开发少不了拼装模板,渲染模板 在刚有web的时候,前端与后端的交互,非常直白,浏览器端发出URL,后端返回一张拼好了的HTML串.浏览器对其进行 ...
最新文章
- 洛谷 [P1314] 聪明的质检员(NOIP2011 D2T2)
- Python对象注意点
- Linux运行脚本忽略警告,ShellCheck - 显示Shell脚本的警告和建议的工具
- 动态规划——方格取数(hdu1565)
- java入学测试_算法历练之路——入学考试(JAVA)
- Eclipse Code Template 设置自动加注释
- java 如何执行dig 命令_如何直接在cmd下执行Dig命令
- PowerDesigner 报错 Could not Initialize JavaVM!
- 苹果电脑装系统出现未能与服务器取得联系,Mac您的磁盘未能分区 Mac磁盘分区出错解决办法...
- 2021版小新Pro14 Ubuntu 20.04 配置指南
- pvs显示unknown device
- Golang 实现定时任务
- html5如何快速根据psd,微页h5制作工具怎么快速导入PSD源文件?
- 面试可能遇到java基础知识
- 视觉数据集是基于物体和风景标记的巨大的图像库
- java的图片文件上传下载,多表新增,菜品信息分页
- 西门子PLC 工具下载-博途等
- 手机电影正式亮相,华为手机不断提高影像力让手机拍电影成为可能
- Android自定义UI陷阱:LayoutInflater.from().inflate()一定不能工作在父类或虚类里
- 1+x证书Web前端开发中级理论考试(试卷1)
热门文章
- LOJ2542 PKUWC2018随机游走(概率期望+容斥原理)
- python文件操作:文件指针移动、修改
- 【Luogu】【关卡2-3】排序(2017年10月) 【AK】
- django通用视图(类方法)
- 一人身兼多个项目时的“课程表”工作模式实践
- Cocos2d-x基础概念详情篇
- 初次网页设计案例及思路
- http --- 从输入URL到页面加载的过程发生了什么?
- 免费的用户界面设计工具、工具包和资源备忘
- INFORMATION_SESSION_VARIABLES feature is disabled问题