轻量级模板引擎ArtTemplate
这星期做了一个数据统计系统,基于需求便使用了一个模板引擎来渲染数据.
在这里模板引擎同后端的不太一样,主要是前端在开发过程中,对于数据处理之后插入到html的过程中使用到的工具.
由于系统是迷你型的,在一通搜索之后便决定采用ArtTemplate.
ArtTemplate具有如下特点
轻量级(不到3kb)
快速上手,用法简单
处理速度快
常见的模板引擎还有handlebar,Mustache,jade等,我只试用过handlebar,个人感觉它太过于沉重,配置起来繁琐,并不适合小项目的数据渲染.
artTemplate提供了两种语法选择,原生语法和简洁语法
简洁语法
{{if admin}} {{include 'admin_content'}} {{each list}} {{$index}}. {{$value.user}} {{/each}}{{/if}}原生语法
. 模板引擎的原理是基于正则表达式,对字符串进行分析处理.
在两种语法中,简介语法易读性更好,用起来比较顺手,比原生语法只多了几k而已,推荐实用简洁语法
基本的用法不在此介绍,官网的链接写的很详细.主要语法如下.
var template = require('art-template');var data = {list: ["aui", "test"]};var html = template(__dirname + '/index/main', data);最后贴一个好用的功能------过滤器
在arttemplate中定义为helper,也就是辅助器.这种工具我之前在写angular也使用到过,我觉得像ng中命名为过滤器更适合.它本意就是一个数据的过滤器,在过滤器中定义一些方法,使得渲染到页面的数据是你所需要的.
有点抽象,先贴一个官方的demo,是一个日期的过滤器.
# 辅助方法{{time | dateFormat:'yyyy年 MM月 dd日 hh:mm:ss'}}/ * 对日期进行格式化， * @param date 要格式化的日期 * @param format 进行格式化的模式字符串 * 支持的模式字母有： * y:年, * M:年中的月份(1-12), * d:月份中的天(1-31), * h:小时(0-23), * m:分(0-59), * s:秒(0-59), * S:毫秒(0-999), * q:季度(1-4) * @return String * @author yanis.wang * @see http://yaniswang.com/frontend/2013/02/16/dateformat-performance/ */template.helper('dateFormat', function (date, format) { if (typeof date === "string") { var mts = date.match(/(\/Date\((\d+)\)\/)/); if (mts && mts.length >= 3) { date = parseInt(mts[2]); } } date = new Date(date); if (!date || date.toUTCString() == "Invalid Date") { return ""; } var map = { "M": date.getMonth() + 1, //月份 "d": date.getDate(), //日 "h": date.getHours(), //小时 "m": date.getMinutes(), //分 "s": date.getSeconds(), //秒 "q": Math.floor((date.getMonth() + 3) / 3), //季度 "S": date.getMilliseconds() //毫秒 }; format = format.replace(/([yMdhmsqS])+/g, function(all, t){ var v = map[t]; if(v !== undefined){ if(all.length > 1){ v = '0' + v; v = v.substr(v.length-2); } return v; } else if(t === 'y'){ return (date.getFullYear() + '').substr(4 - all.length); } return all; }); return format;});// --------var data = { time: 1408536771253,};var html = template('test', data);document.getElementById('content').innerHTML = html;上面的例子是完整的一个日期过滤器的例子,有需要直接复制使用即可.我自己在项目中是用到的是比较简单一点的,一个根据数据显示的不同输出对应的数据.
核心代码如下
template.helper('typeFilter', function (type) { if (typeof type === "string") { switch(type){ case "init":{ return "进入页面"; break; } ... case "share1":{ return "分享到朋友圈"; break; } } }});就是一个简单的数据转换器,后面针对所有的对应关系将其写成了一个对象,再进行过滤
var typeOpt = { "init": "进入页面", ... "share1": "分享到朋友圈"}template.helper('typeFilter', function (type) { if (typeof type === "string") { for(let i in typeOpt ){ if(type == i){ return typeOpt[i]; } } }以上是helper的内容最后arttemplate还有一个include的功能,类似php的include函数,不多介绍.关键字：JavaScript
版权声明
本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处。如若内容有涉嫌抄袭侵权/违法违规/事实不符，请点击 举报 进行投诉反馈！
