后端渲染神器!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}
    原文作者:时允
    原文地址: https://segmentfault.com/a/1190000000657451
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞