后端渲染神器！Dust

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}