写在前面
”Art虐我千百遍,而待她如初恋“,前端模板引擎很多,机缘巧合之下结识了这位美丽的Art,于是对她情有独钟,纵使开源社区薄弱,API文档稀缺,还是坚韧不拔地去 使用她。和她相处的几个月里 遇到的坑,趟过的枪实在是不计其数,但是没关系,既然选择了她,那就要一心一意,去克服困难,一起成长不是吗?
nodeJS中使用
最初结识它是在 WebApp开发的时候,那时还不太会nodeJS,Art也仅仅是用在客户端 数据的渲染上,用的最多的是 {{each}}
、{{if}}
、{{include}}
这些东西。在客户端JavaScript中 模块化有诸多限制,必须依托AMD
或者CMD
的方式来实现,而且客户端使用模板引擎对SEO的支持着实无助。当然这也算是自己趟过的一个坑吧,其实 Art真正实现价值还是在3.0之后 对nodeJS的支持,这样打破了传统的express+jade
组合模式,开启了另一个高性能的前后端可共用的模板引擎时代。
安装
使用npm之前先确保已经安装了nodeJS,使用 node -v
测试一下,然后:
npm install art-template
使用
var template = require('art-template');
var data = {list: ["aui", "test"]};
var html = template(__dirname + '/index/main', data);
配置
NodeJS 版本新增了如下默认配置:
字段 | 类型 | 默认值 | 说明 |
---|---|---|---|
base | String | '' | 指定模板目录 |
extname | String | '.html' | 指定模板后缀名 |
encoding | String | 'utf-8' | 指定模板编码 |
注意:配置base指定模板目录可以缩短模板的路径,并且能够避免include语句越级访问任意路径引发安全隐患,例如:
template.config('base', __dirname);
var html = template('index/main', data)
NodeJS + Express
这个在之前的文章里已经详细介绍了,配置方法大致长这样。
var template = require('art-template');
template.config('base', '');
template.config('extname', '.html');
app.engine('.html', template.__express);
app.set('view engine', 'html');
//app.set('views', __dirname + '/views');
还不清楚的 用力戳 这里
helper函数
helper函数的API很简单,但它的用处实在不小。也正是因为它的存在使得 Art变得非常地灵活——这也完全取决于你的自己。
template.helper(name, callback)
先看一下官方 yanis.wang 写的例子,他老人家故意整个正则和参数形式的回调 来提高逼格,小子我来回看了好几遍才搞懂(加了些注释进去) ~_~
所以看之前,对 replace函数不熟悉的请 戳这里
html部分
<!--数据容器-->
<div id="content"></div>
<!--/数据容器-->
<script id="test" type="text/html">
/*对time对象进行格式化*/
{{time | dateFormat:'yyyy年 MM月 dd日 hh:mm:ss'}}
</script>
JavaScript部分
/**
* 对日期进行格式化,
* @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) {
date = new Date(date); //新建日期对象
/*日期字典*/
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: (new Date).toString(),
};
/*渲染*/
var html = template('test', data);
/*绑定*/
document.getElementById('content').innerHTML = html;
当然了,看不懂这个例子也没关系,我扔块 “低小下”的砖头给你。
一块丑丑的砖头
app.js
/*引用artTemplate模板*/
var template=require('art-template');
template.render('transNumber',function(number){
swich(number){
case 0:
return "zero";
break;
case 1:
return "none";
break;
//...more and more
default:
break;
}
});
test.art
<div>{{number | transNumber:number}}</div>
没错,这么搞就可以了,回调函数 按照实际需求爱怎么写就怎么写。
最后
欢迎关注我的个人博客: http://jafeney.com ^_^