成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

后端渲染神器！Dust

myeveryheart / 2663人閱讀

摘要：由于某些原因，我們產(chǎn)品需要改為在后端渲染，再發(fā)送到前端，但早已經(jīng)適應(yīng)的我根本不能忍受后端各種弱爆了的模板。本身的語法可謂相當(dāng)靈活，還有強大的擴展功能，他可以渲染等任何格式的文本文件，還支持模塊化，條件判斷，流輸出等其它特性。

Dust一個適用于瀏覽器與node的異步模板框架。

先上實例

后端模板：

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

    {#messages}
        
{.}

    {/messages}
{/inject}

http://api.myserver.com/get_message 返回結(jié)果：

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

渲染結(jié)果：

留言: 3條


我勒個去


好強大啊


受不了了
Dust的特性

所有用過Angularjs的同學(xué)，一定不會忘記它強大的模板、數(shù)據(jù)綁定等功能，而這些在后端往往都是可盼而不可求的。由于某些原因，我們產(chǎn)品需要改為在后端渲染html，再發(fā)送到前端，但早已經(jīng)適應(yīng)Angularjs的我根本不能忍受后端各種弱爆了的模板。類似如jade這些都只能等你把數(shù)據(jù)全部準(zhǔn)備好之后才能工作，如果遇到復(fù)雜點的pjax頁面當(dāng)時就傻逼了。而我需要的是類似Angularjs的那種，只用把依賴關(guān)系和數(shù)據(jù)位置都寫清，然后從數(shù)據(jù)請求到發(fā)送到客戶端折=這一些列流程它自己跑起來的那種模板。

就在前幾天，我突然腦洞大開的在google上搜索了“async node template”,居然搜索到了Dust這貨。 其主頁第一句介紹的話就是:

  
Asynchronous templates for the browser and node.js

而且這個項目又是有 LinkedIn 在背后做支持，當(dāng)時感覺就是碉堡了。他的項目主頁在 http://linkedin.github.io/dustjs/

那么現(xiàn)在回到最上面的模板代碼，這段代碼的作用是 請求遠程服務(wù)器的get_message鏈接，再將服務(wù)器返回的數(shù)據(jù)注入到模板中。如果你采用類似淘寶那種架構(gòu)的話（node只負責(zé)渲染頁面），那么這個就很好用，開發(fā)者就不用再管理鏈接請求啊，維持依賴啊等等這些瑣碎的事了。

Dust本身的語法可謂相當(dāng)靈活，還有強大的擴展功能，他可以渲染html、xml等任何格式的文本文件，還支持模塊化、partial，條件判斷，流輸出等其它特性。

源碼

上面例子中的@inject就是我自己寫的dust擴展。源碼如下：

function requestAPI(url,cb){
    //請求url，并將結(jié)果返回，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}

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/49529.html

相關(guān)文章

  • 學(xué)習(xí) PixiJS — 粒子效果

    摘要：使用粒子發(fā)射器方法會產(chǎn)生一次粒子爆發(fā)，但通常你必須產(chǎn)生連續(xù)的粒子流。發(fā)射器具有和方法，可讓打開和關(guān)閉粒子流，并可以定義粒子的創(chuàng)建間隔。 你如何創(chuàng)造火，煙，魔法和爆炸等效果？你制作了許多小精靈，幾十，幾百，甚至上千個精靈。然后對這些精靈應(yīng)用一些物理效果，使它們的行為類似于你嘗試模擬的元素。你還必須給他們一些關(guān)于它們應(yīng)該如何出現(xiàn)和消失以及應(yīng)該形成什么樣的模式的規(guī)則。這些微小的精靈被稱為粒子...

    chanjarster 評論0 收藏0

  • PayPal 為什么從 Java 遷移到 Node.js：性能提高一倍，文件代碼減少44%

    摘要：大家都知道是另一家遷移到平臺的大型公司，的這篇博文解釋了為什么從遷移出來的原因開發(fā)效率提高一倍個人用更少的時間干了個人的活，性能提高一倍，代碼量減少文件減少。性能性能是一個非常有意思和具有爭議性的話題。對于來說這是一個另人激動的時刻。 大家都知道 PayPal 是另一家遷移到 Node.js 平臺的大型公司，Jeff Harrell 的這篇博文 Node.js at PayPal 解釋...

    you_De 評論0 收藏0

  • 前端性能優(yōu)化之Performance神器

    摘要：需要注意的一點是，面板下的功能，是對于細節(jié)中的細節(jié)進行的優(yōu)化。我們可以很清晰明了得分析按照活動，目錄，域，子域，和進行分組的前端性能。個人理解的話，前者類似事件冒泡，后者類似事件捕獲。同學(xué)在點我達，他們正在籌劃改組成大前端團隊。 　　對Chrome控制臺有一定的了解的朋友都在知道，Network面板會包括很多網(wǎng)絡(luò)請求方面的東西，包括Http相關(guān)的Request信息，Response信息...

    qujian 評論0 收藏0

  • Google搜索滅霸彩蛋的實現(xiàn)效果

    詳見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...

    王巖威 評論0 收藏0

  • Google搜索滅霸彩蛋的實現(xiàn)效果

    詳見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 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<