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

資訊專(zhuān)欄INFORMATION COLUMN

輕量級(jí)模板引擎ArtTemplate

curried / 2111人閱讀

摘要：這星期做了一個(gè)數(shù)據(jù)統(tǒng)計(jì)系統(tǒng)基于需求便使用了一個(gè)模板引擎來(lái)渲染數(shù)據(jù)在這里模板引擎同后端的不太一樣主要是前端在開(kāi)發(fā)過(guò)程中對(duì)于數(shù)據(jù)處理之后插入到的過(guò)程中使用到的工具由于系統(tǒng)是迷你型的在一通搜索之后便決定采用具有如下特點(diǎn)輕量級(jí)不到快速上手用法簡(jiǎn)單處

這星期做了一個(gè)數(shù)據(jù)統(tǒng)計(jì)系統(tǒng),基于需求便使用了一個(gè)模板引擎來(lái)渲染數(shù)據(jù).
在這里模板引擎同后端的不太一樣,主要是前端在開(kāi)發(fā)過(guò)程中,對(duì)于數(shù)據(jù)處理之后插入到html的過(guò)程中使用到的工具.

由于系統(tǒng)是迷你型的,在一通搜索之后便決定采用ArtTemplate.

ArtTemplate具有如下特點(diǎn)

輕量級(jí)(不到3kb)

快速上手,用法簡(jiǎn)單

處理速度快

常見(jiàn)的模板引擎還有handlebar,Mustache,jade等,我只試用過(guò)handlebar,個(gè)人感覺(jué)它太過(guò)于沉重,配置起來(lái)繁瑣,并不適合小項(xiàng)目的數(shù)據(jù)渲染.

artTemplate提供了兩種語(yǔ)法選擇,原生語(yǔ)法和簡(jiǎn)潔語(yǔ)法

簡(jiǎn)潔語(yǔ)法

{{if admin}}
    {{include "admin_content"}}

    {{each list}}
        
{{$index}}. {{$value.user}}

    {{/each}}
{{/if}}

原生語(yǔ)法

<%if (admin){%>
    <%include("admin_content")%>

    <%for (var i=0;i
        
<%=i%>. <%=list[i].user%>

    <%}%>
<%}%>

模板引擎的原理是基于正則表達(dá)式,對(duì)字符串進(jìn)行分析處理.
在兩種語(yǔ)法中,簡(jiǎn)介語(yǔ)法易讀性更好,用起來(lái)比較順手,比原生語(yǔ)法只多了幾k而已,推薦實(shí)用簡(jiǎn)潔語(yǔ)法

基本的用法不在此介紹,官網(wǎng)的鏈接寫(xiě)的很詳細(xì).主要語(yǔ)法如下.

var template = require("art-template");
var data = {list: ["aui", "test"]};

var html = template(__dirname + "/index/main", data);

最后貼一個(gè)好用的功能------過(guò)濾器
在arttemplate中定義為helper,也就是輔助器.這種工具我之前在寫(xiě)angular也使用到過(guò),我覺(jué)得像ng中命名為過(guò)濾器更適合.它本意就是一個(gè)數(shù)據(jù)的過(guò)濾器,在過(guò)濾器中定義一些方法,使得渲染到頁(yè)面的數(shù)據(jù)是你所需要的.

有點(diǎn)抽象,先貼一個(gè)官方的demo,是一個(gè)日期的過(guò)濾器.



輔助方法

上面的例子是完整的一個(gè)日期過(guò)濾器的例子,有需要直接復(fù)制使用即可.我自己在項(xiàng)目中是用到的是比較簡(jiǎn)單一點(diǎn)的,一個(gè)根據(jù)數(shù)據(jù)顯示的不同輸出對(duì)應(yīng)的數(shù)據(jù).
核心代碼如下

就是一個(gè)簡(jiǎn)單的數(shù)據(jù)轉(zhuǎn)換器,后面針對(duì)所有的對(duì)應(yīng)關(guān)系將其寫(xiě)成了一個(gè)對(duì)象,再進(jìn)行過(guò)濾

var typeOpt = {
    "init": "進(jìn)入頁(yè)面",
    ...
    "share1": "分享到朋友圈"
}

template.helper("typeFilter", function (type) {

    if (typeof type === "string") {
        for(let i in typeOpt ){
            if(type == i){
                return typeOpt[i];
            }
        }
    }


以上是helper的內(nèi)容


最后arttemplate還有一個(gè)include的功能,類(lèi)似php的include函數(shù),不多介紹.

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

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

相關(guān)文章

  • 淺談模板引擎之artTemplate

    摘要：來(lái)給大家推薦一款模板引擎，會(huì)推薦這款模板引擎最主要還是他輕量級(jí)，代碼簡(jiǎn)潔，好用，一個(gè)大概也才幾左右。 對(duì)于前端開(kāi)發(fā)者來(lái)說(shuō)，有一個(gè)綁數(shù)據(jù)的模板是多么的幸福，不用我多說(shuō)大家也知道，終于不用在js中一個(gè)個(gè)字符串拼接一大推元素?cái)?shù)據(jù)啥的，可以省下我們很多時(shí)間。來(lái)給大家推薦一款模板引擎artTemplate，會(huì)推薦這款模板引擎最主要還是他輕量級(jí)，代碼簡(jiǎn)潔，好用，一個(gè)template.js大概也才幾...

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

  • 淺談模板引擎之artTemplate

    摘要：來(lái)給大家推薦一款模板引擎，會(huì)推薦這款模板引擎最主要還是他輕量級(jí)，代碼簡(jiǎn)潔，好用，一個(gè)大概也才幾左右。 對(duì)于前端開(kāi)發(fā)者來(lái)說(shuō)，有一個(gè)綁數(shù)據(jù)的模板是多么的幸福，不用我多說(shuō)大家也知道，終于不用在js中一個(gè)個(gè)字符串拼接一大推元素?cái)?shù)據(jù)啥的，可以省下我們很多時(shí)間。來(lái)給大家推薦一款模板引擎artTemplate，會(huì)推薦這款模板引擎最主要還是他輕量級(jí)，代碼簡(jiǎn)潔，好用，一個(gè)template.js大概也才幾...

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

  • 簡(jiǎn)單高效地JavaScript模板引擎——artTemplate

    摘要：是一個(gè)簡(jiǎn)單高效地模板引擎，相比于這種復(fù)雜的模板引擎，就顯得很嬌小。因?yàn)樵诘臄?shù)組引用中那個(gè)沒(méi)有類(lèi)似于模板數(shù)組引用中的數(shù)組子項(xiàng)說(shuō)明上面例子中的或者。 artTemple是一個(gè)簡(jiǎn)單高效地JavaScript模板引擎，相比于jsRender這種復(fù)雜的模板引擎，artTemple就顯得很嬌小。你幾乎可以在網(wǎng)上任意搜一篇博客或者文章，10分鐘的時(shí)間你就能基本的掌握它得用法（附上網(wǎng)站：http://...

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

  • js模板引擎——art Template

    摘要：簡(jiǎn)單介紹模板引擎作為數(shù)據(jù)與界面分離工作中最重要一環(huán)，越來(lái)越受開(kāi)發(fā)者關(guān)注。是新一代模板引擎，它采用預(yù)編譯方式讓性能有了質(zhì)的飛躍，并且充分利用引擎特性，使得其性能無(wú)論在前端還是后端都有極其出色的表現(xiàn)。 簡(jiǎn)單介紹 javascript 模板引擎作為數(shù)據(jù)與界面分離工作中最重要一環(huán)，越來(lái)越受開(kāi)發(fā)者關(guān)注。 artTemplate 是新一代 javascript 模板引擎，它采用預(yù)編譯方式讓性能有了...

    2i18ns 評(píng)論0 收藏0

  • 模板引擎artTemplate的使用

    摘要：引入文件寫(xiě)模板模板模板內(nèi)容執(zhí)行模板模板，數(shù)據(jù)此處的數(shù)據(jù)必須是對(duì)象格式不是對(duì)象要包裝成對(duì)象的格式把模板生成的結(jié)構(gòu)添加到頁(yè)面目標(biāo)位置如果目標(biāo)位置沒(méi)有其他的元素可以用如果目標(biāo)位置還有其他的元素用追加1.引入template文件 2.寫(xiě)模板 　　模板內(nèi)容 3.執(zhí)行模板 var html = template(模板ID，數(shù)據(jù)) 　　**此處的數(shù)據(jù)必須是對(duì)象格式 不是對(duì)象要包裝成對(duì)象的格式----...

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

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

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<