Dust一个适用于浏览器与node的异步模板框架。
先上实例
后端模板:
{@inject api="http://api.myserver.com/get_message"}
<h3> 留言: {count}条</h3>
{#messages}
<p>{.}</p>
{/messages}
{/inject}
http://api.myserver.com/get_message 返回结果:
{
count: 3,
messages: ['我勒个去', '好强大啊', '受不了了']
}
渲染结果:
<h3>留言: 3条</h3>
<p>我勒个去</p>
<p>好强大啊</p>
<p>受不了了</p>
Dust的特性
所有用过Angularjs的同学,一定不会忘记它强大的模板、数据绑定等功能,而这些在后端往往都是可盼而不可求的。由于某些原因,我们产品需要改为在后端渲染html,再发送到前端,但早已经适应Angularjs的我根本不能忍受后端各种弱爆了的模板。类似如jade这些都只能等你把数据全部准备好之后才能工作,如果遇到复杂点的pjax页面当时就傻逼了。而我需要的是类似Angularjs的那种,只用把依赖关系和数据位置都写清,然后从数据请求到发送到客户端折=这一些列流程它自己跑起来的那种模板。
就在前几天,我突然脑洞大开的在google上搜索了“async node template”,居然搜索到了Dust这货。 其主页第一句介绍的话就是:
Asynchronous templates for the browser and node.js
而且这个项目又是有 LinkedIn 在背后做支持,当时感觉就是碉堡了。他的项目主页在 http://linkedin.github.io/dustjs/
那么现在回到最上面的模板代码,这段代码的作用是 请求远程服务器的get_message链接,再将服务器返回的数据注入到模板中。如果你采用类似淘宝那种架构的话(node只负责渲染页面),那么这个就很好用,开发者就不用再管理链接请求啊,维持依赖啊等等这些琐碎的事了。
Dust本身的语法可谓相当灵活,还有强大的扩展功能,他可以渲染html、xml等任何格式的文本文件,还支持模块化、partial,条件判断,流输出等其它特性。
源码
上面例子中的@inject
就是我自己写的dust扩展。源码如下:
function requestAPI(url,cb){
//请求url,并将结果返回,cb 的格式为 function(err,result)
};
dust.helpers.inject = function(chunk, context, bodies, params) {
var api=params.api;
if(api){
return chunk.map(function(chunk){
requestAPI(api,function(err,result){
if(err&&bodies['else']){
chunk.render(bodies['else'],context.push({error:err}));
}else if(bodies.block){
chunk.render(bodies.block,context.push(result));
}
chunk.end();
});
})
}else{
return chunk.render(bodies.block,context);
}
}
刚才的模板还可以加入else模块,用来捕捉错误:
{@inject api="http://api.myserver.com/get_message"}
<h3> 留言: {count}条</h3>
{#messages}
<p>{.}</p>
{/messages}
{:else}
You got an Error: {error}
{/inject}