后端渲染神器！Dust

myeveryheart 发布于2019-08-01 14:41 / 2623人阅读

摘要：由于某些原因，我们产品需要改为在后端渲染，再发送到前端，但早已经适应的我根本不能忍受后端各种弱爆了的模板。本身的语法可谓相当灵活，还有强大的扩展功能，他可以渲染等任何格式的文本文件，还支持模块化，条件判断，流输出等其它特性。

Dust一个适用于浏览器与node的异步模板框架。

先上实例

后端模板：

{@inject api="http://api.myserver.com/get_message"}
     留言： {count}条
    {#messages}
        {.}
    {/messages}
{/inject}

http://api.myserver.com/get_message 返回结果：

{
    count: 3,
    messages: ["我勒个去", "好强大啊", "受不了了"]
}

渲染结果：

留言: 3条

我勒个去

好强大啊

受不了了

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"}
     留言： {count}条
    {#messages}
        {.}
    {/messages}
{:else}
    You got an Error: {error}
{/inject}

云服务器 GPU云服务器 Dust 神器神器VPS php神器

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/49529.html

学习 PixiJS — 粒子效果

摘要：使用粒子发射器方法会产生一次粒子爆发，但通常你必须产生连续的粒子流。发射器具有和方法，可让打开和关闭粒子流，并可以定义粒子的创建间隔。你如何创造火，烟，魔法和爆炸等效果？你制作了许多小精灵，几十，几百，甚至上千个精灵。然后对这些精灵应用一些物理效果，使它们的行为类似于你尝试模拟的元素。你还必须给他们一些关于它们应该如何出现和消失以及应该形成什么样的模式的规则。这些微小的精灵被称为粒子...

chanjarster 2019-08-23 14:53 评论0 收藏0
PayPal 为什么从 Java 迁移到 Node.js：性能提高一倍，文件代码减少44%

摘要：大家都知道是另一家迁移到平台的大型公司，的这篇博文解释了为什么从迁移出来的原因开发效率提高一倍个人用更少的时间干了个人的活，性能提高一倍，代码量减少文件减少。性能性能是一个非常有意思和具有争议性的话题。对于来说这是一个另人激动的时刻。大家都知道 PayPal 是另一家迁移到 Node.js 平台的大型公司，Jeff Harrell 的这篇博文 Node.js at PayPal 解释...

you_De 2019-08-14 11:33 评论0 收藏0
前端性能优化之Performance神器

摘要：需要注意的一点是，面板下的功能，是对于细节中的细节进行的优化。我们可以很清晰明了得分析按照活动，目录，域，子域，和进行分组的前端性能。个人理解的话，前者类似事件冒泡，后者类似事件捕获。同学在点我达，他们正在筹划改组成大前端团队。　　对Chrome控制台有一定的了解的朋友都在知道，Network面板会包括很多网络请求方面的东西，包括Http相关的Request信息，Response信息...

qujian 2019-08-20 17:22 评论0 收藏0
Google搜索灭霸彩蛋的实现效果

详见Githubhttps://github.com/lichking24... Thanos Dust Effect Effects Demo As Thanos making a snap with the Infinite Gauntlet, half the heros vanish to dust. As using the time stone, people come back. D...

王岩威 2019-08-23 17:13 评论0 收藏0
Google搜索灭霸彩蛋的实现效果

详见Githubhttps://github.com/lichking24... Thanos Dust Effect Effects Demo As Thanos making a snap with the Infinite Gauntlet, half the heros vanish to dust. As using the time stone, people come back. D...

CHENGKANG 2019-08-29 18:46 评论0 收藏0