更新時間:2023-05-19 來源:黑馬程序員 瀏覽量:
art-lemplate是新一代高性能JavaScript模板引擎,它可以將數(shù)據(jù)與HTML模板更加友好地結(jié)合起來,省去煩瑣的字符串拼接,使代碼更易于維護(hù)。
art-template模板引擎既可以在服務(wù)器端使用,也可以在瀏覽器端使用。此處僅講解art-template模板引擎在服務(wù)器端的使用。art-template模板引擎的下載和使用方法如下。
(1)模板引擎下載命令如下。
npm install artmplate
(2)使用模板引擎時應(yīng)在j腳本中導(dǎo)入模板引擎,并編譯模板。
//導(dǎo)入模板 const template · require('art-template'); //編譯模板 const result = template('./views/index.html', ( msg: 'Hello, art-template' });
上述代碼中,rest用于存儲拼接結(jié)果;template0中的第l個參數(shù)表示模板文件的位置,第2個參數(shù)向模板中傳遞要拼接的數(shù)據(jù),對象類型或?qū)ο髮傩远伎梢灾苯釉谀0逯惺褂?。an-template模板引擎標(biāo)準(zhǔn)語法中引入了變量和輸出量,并支持JavaSeript表達(dá)式,使模板更易于讀寫。下面講解art-template模板引擎的標(biāo)準(zhǔn)語法。
1.變量
在“{{}}”符號中,使用set關(guān)鍵字來定義變量a和變量b.示例代碼如下。
{{set a = 1}}; {{set b = 2}};
2.JavaScript表達(dá)式
在“{{}}”符號中,使用set關(guān)鍵字來定義變量a和變量b,示例代碼如下。
//JavaScript表達(dá)式 {{a ? b:c}}; {{a‖b}}1: {{la + b}};
3.條件渲染
art-template模板引擎使用{{f}}…{{/if}}或者 {{if}}…{{ else if}}…{{/if}}來實(shí)現(xiàn)條件的判斷,通過判斷來渲染不同結(jié)果,示例代碼如下。
// if...語法 {{if user}} <h2>{{user.name}}</h2> {{/if}} // if...else if...語法 {{if userl}} <h1>{{user1.name}}</h1> {{else if user2}} <h2>{{user2.name}}</h2> {{/if}}
上述代碼中,如果user用戶對象存在,就將其name屬性的值渲染到<h2>標(biāo)簽中。同理,使用[if]]…lelse if]]…[if]語法實(shí)現(xiàn)多個條件判斷。如果userl用戶對象存在,就將其name屬性的值渲染到<hl>標(biāo)簽中;如果user2用戶對象存在,就將其name屬性的值渲染到<h2>標(biāo)簽中。
4.列表渲染
at-lemplate模板引擎中的列表渲染使用each實(shí)現(xiàn)對目標(biāo)對象的循環(huán)遍歷,示例代碼如下。
{{each target}} {{$index}}{{$value}} {{/each}}
上述代碼中,target 目標(biāo)對象支持Amay數(shù)組和Objecet對象類型數(shù)據(jù)的迭代,target 目標(biāo)對象使用template(模板ID,data)函數(shù)的第2個參數(shù)來傳遞,使用“$data[]”中括號的形式來訪問模板對象的屬性。$index表示當(dāng)前索引值,$value表示當(dāng)前索引對應(yīng)的值。