成人无码视频,亚洲精品久久久久av无码,午夜精品久久久久久毛片,亚洲 中文字幕 日韩 无码

資訊專欄INFORMATION COLUMN

后端渲染神器！Dust

myeveryheart / 2730人閱讀

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

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

先上實(shí)例

后端模板：

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

    {#messages}
        
{.}

    {/messages}
{/inject}

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

{
    count: 3,
    messages: ["我勒個(gè)去", "好強(qiáng)大啊", "受不了了"]
}

渲染結(jié)果：

留言: 3條


我勒個(gè)去


好強(qiáng)大啊


受不了了
Dust的特性

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

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

  
Asynchronous templates for the browser and node.js

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

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

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

源碼

上面例子中的@inject就是我自己寫(xiě)的dust擴(kuò)展。源碼如下：

function requestAPI(url,cb){
    //請(qǐng)求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模塊，用來(lái)捕捉錯(cuò)誤：

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

    {#messages}
        
{.}

    {/messages}
{:else}
    You got an Error: {error}
{/inject}

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://m.hztianpu.com/yun/49529.html

相關(guān)文章

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

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

    chanjarster 評(píng)論0 收藏0

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

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

    you_De 評(píng)論0 收藏0

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

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

    qujian 評(píng)論0 收藏0

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

    詳見(jià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...

    王巖威 評(píng)論0 收藏0

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

    詳見(jià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 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

閱讀需要支付1元查看
<