使用模板引擎Trimpath
使用模板引擎,让开发模式更清晰,也让职责更明确,对维护对开发都是一件双赢的事情。
曾经接触过SmartTemplate和Velocity,如果纯从编写前端模板来说,都不是太难的事情,大部分流行的模板引擎都支持类似的语法,如Smarty以及本文要介绍的JS模板引擎Trimpath。
如果一个项目,需要前端大量的重绘数据来展现,大量的DOM树会随用户的操作而产生变化,这时,无论从功能上,还是性能上,以及维护的方便性 上,Trimpath template都是一个不错的选择。唯一遗憾的是,已经有近2年的时间没有更新了,是没有bug还是作者已经放弃掉了都不得而知。因为是好的东西,就不 管那么多了。
Trimpath支持的语法:
1)变量声明
{var yihui = '一回'}
${yihui} // 一回
2)变量(表达式)调节器
Trimpath的变量调节器是可以扩展的,在使用上和Smarty几乎看不出区别:
{var yihui = '<hr />'}
${yihui|escape|capitalize} // <HR />
Trimpath默认支持以下调节器:capitalize,escape(h),default,eat。同时支持表达式的调节,如:
${new Date()|toFormat:'YYYY-MM-DD'}
你也可以根据自己的需要进行扩展,上面的toFormat就是自定义的。
3)条件控制
{var yihui = 'b'}
{if yihui == 'a'}
${yihui}等于a
{else}
{elseif}
${yihui}不等于a
{/if}
4)循环控制
假设数据为:
var datas = [
{'type' : 'market', 'name' : '市场基金', 'value' : 102.44},
{'type' : 'channel', 'name' : '渠道基金', 'value' : 54},
{'type' : 'customer', 'name' : '客服考核', 'value' : 98}
];
模板可以这样写:
<table width="400" cellspacing="0" cellpadding="0" border="1">
{for x in datas}
<tr>
<td>${x.type}</td>
<td>${x.name}</td>
<td>${x.value}</td>
</tr>
{forelse}
<tr>
<td>没有数据</td>
</tr>
{/for}
</table>
这样书写,是不是要比字符串拼接更直观,维护也方便呢?
5)支持宏定义
宏可以理解为能够完成一定功能的函数,将通用的功能组织起来,有利于代码复用:
{macro htmlList(list, optionalListType)}
{var listType = optionalListType != null ? optionalListType : "ul"}
<${listType}>
{for item in list}
<li>${item}</li>
{/for}
</${listType}>
{/macro}
${htmlList([1,2,3], 'ol')}
6)CDATA区域
CDATA区域的内容将不被Trimpath解析,会原样输出
{cdata}hello,${yihui}{/cdata}
7)内联JS代码
eval区域内可以直接书写JS代码:
<select οnchange="sel_onchange()">
<option value="1">1</option>
<option value="2">2</option>
</select>
{eval}
sel_onchange = function() {
alert('我不小心被change了');
}
{/eval}
转载于:https://www.cnblogs.com/mrray/archive/2011/12/26/2301775.html
使用模板引擎Trimpath相关推荐
- TrimPath - Js模板引擎
当页面中引用template.js文件之后,脚本将创建一个TrimPath对象供你使用. parseDOMTemplate(elementId,optionalDocument) //获得模板字符串代 ...
- 13 款 JavaScript 模板引擎
JavaScript 在生成各种页面内容时如果能结合一些模板技术,可以让逻辑和数据之间更加清晰,本文介绍 X 款 JavaScript 的模板引擎.(排名不分先后顺序) 1. Mustache 基于j ...
- html jquery 模板引擎,jquery template.js前端模板引擎
作为现代应用,ajax的大量使用,使得前端工程师们日常的开发少不了拼装模板,渲染模板 在刚有web的时候,前端与后端的交互,非常直白,浏览器端发出URL,后端返回一张拼好了的HTML串.浏览器对其进行 ...
- SpringBoot (三) :SpringBoot使用Freemarker模板引擎渲染web视图
什么是Freemarker FreeMarker是一款模板引擎: 即一种基于模板和要改变的数据, 并用来生成输出文本(HTML网页.电子邮件.配置文件.源代码等)的通用工具. 它不是面向最终用户的,而 ...
- SpringBoot-web开发(三): 模板引擎Thymeleaf
[SpringBoot-web系列]前文: SpringBoot-web开发(一): 静态资源的导入(源码分析) SpringBoot-web开发(二): 页面和图标定制(源码分析) 目录 1. 引入 ...
- php codeigniter 语言,php – codeigniter模板引擎,包括语言解析器
不幸的是,CI内置的模板解析器类没有此功能.你可以在 sparks directory中环顾四周,有多个火花集成了许多模板引擎,如smarty或twig,可以通过调整来创建这样的东西. 此外,您可以尝 ...
- php smarty模板引擎 性能,smarty性能低?直接使用php模板引擎吧
skymvc框架使用的php模板引擎 1.[代码][PHP]代码 class smarty{ public $template_dir = '';//模版文件夹 public $cache_dir = ...
- java freemarker 模版_Java模板引擎-FreeMarker
简介: FreeMarker是一个模板引擎,一个基于模板生成文本输出的通用工具,使用纯Java编写.FreeMarker我们的第一印象是用来替代JSP的,但是与JSP不同的是FreeMarker模板可 ...
- 模板引擎:VelocityFreeMarker(转)
Velocity,名称字面翻译为:速度.速率.迅速,用在Web开发里,用过的人可能不多,大都基本知道和在使用Struts,到底Velocity和Struts(Taglib和Tiles)是如何联系?在技 ...
最新文章
- 十一月工作小记--上线前的冲刺
- MacBookProM1 重置的注意事项
- 《食堂远程下单系统》需求规格说明书
- Oracle配置监听和连接,已经一些比较容易混淆的相关概念
- 【C 语言】二级指针内存模型 ( 指针数组 | 二维数组 | 自定义二级指针 | 将 一、二 模型数据拷贝到 三 模型中 并 排序 )
- Interference Signal 第八届
- scratch跳一跳游戏脚本_cocos creator制作微信小游戏「跳一跳」
- vim打造成golang的IDE
- linux安装mysql5.6rpm_centos6.5 下安装mysql5.6,rpm方式
- dedecms channel php,DedeCMS在{dede:channel}标签前加序列号
- iOS开发——策略模式
- Python数据分析与应用(一)
- 第一章:网络信息安全概述精讲笔记
- 海康威视算法实习面试——我的第一次面试经历
- 美团 2021 届秋季校园招聘笔试真题
- 奇异值分解(SVD)
- UVA: 1589 Xiangqi
- CSS---足球场的实现,纪念2022世界杯(:root的使用)
- python字符串输出和输入
- linux 内核 屏幕 驱动,Linux液晶显示屏驱动设计
热门文章
- RocketMQ可视化控制台
- C++_泛型编程与标准库(三)
- 高品质摄影作图台式计算机推荐,浅谈高质量摄影照片后期输出的打印机选择
- 【Prometheus】 Prometheus 入门到实战搭建监控系统
- 详解:Drools规则引擎探究
- 如何写一个脚本语言_如何写一个Nx schematic plugin?
- 剑灵选区界面一直正在连接服务器,如何选择服务器 选择困难症的指南
- select into mysql_MySQL select into 和 SQL select into
- linux烧录,新人求教,怎么烧录Linux系统到一个小芯片上?
- python数据逆透视_PIVOT(透视转换)和UNPIVOT(逆透视转换)