當(dāng)前位置：首頁 > 编程资源 > 综合教程 >内容正文

综合教程

前端js模板库 JinkoTemplate

發(fā)布時(shí)間：2023/12/13 综合教程 23 生活家

生活随笔收集整理的這篇文章主要介紹了前端js模板库 JinkoTemplate 小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.

有時(shí)候需要使用ajax來異步生成html，最土的方法就是用js的‘+’連接html代碼，生成繁瑣。一旦需要修改，對(duì)于少量的html代碼到?jīng)]啥問題，要是比較復(fù)雜的樣式時(shí)，就真坑爹了，眼花繚亂有木有？JinkoTemplate庫可以直接通過JinkoTemplate語法快速生成所需要的html代碼，修改的時(shí)候也相當(dāng)輕松，就如同修改當(dāng)前html文件里的代碼一樣，不需要去修改js的地方。

以下是使用Demo：

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title></title>
 6 </head>
 7 <body>
 8 <script type="text/javascript" src="jinko.template.js"></script>
 9 
10 <script type="text/html" name="" id="aaa" cols="30" rows="10">
11     {@exp var x = 'end'}
12     {@loop data,row,key,seq}
13         {@seq}:{@key} = {@row} {@x}<br>
14         {@if row.a==1 && row.c==4}
15             yes
16         {@elseif row.c==3}
17             no
18         {@endif}
19     {@endloop}
20     <br><br>
21     {@loop ary,row,key,seq}
22         {@seq}:{@key} = {@row}<br>
23     {@endloop}
24     <br><br>
25     {@if booltrue}
26         true&nbsp;
27     {@endif}
28     {@if boolfalse}
29         false
30     {@endif}
31     <br><br>
32     {@if yi == 1}
33         一
34     {@elseif yi == 2}
35         二
36     {@else}
37         零
38     {@endif}
39 
40 </script>
41 <div id="bbb"></div>
42 <script type="text/javascript">
43     var tpl = document.getElementById('aaa').innerHTML;
44     var jinkoTpl = new JinkoTemplate();
45     jinkoTpl.assign('data', {a:1, asdb:'22110', c:3});
46     jinkoTpl.assign('ary', [1,2,3,4, '你好', 'nihao']);
47     jinkoTpl.assign('booltrue', true);
48     jinkoTpl.assign('boolfalse', false);
49     jinkoTpl.assign('yi', 2);
50     document.getElementById('bbb').innerHTML = jinkoTpl.parse(tpl);
51 </script>
52 </body>
53 </html>

demo運(yùn)行結(jié)果:

1:a = 1 end
2:asdb = 22110 end
3:c = 3 end


1:0 = 1
2:1 = 2
3:2 = 3
4:3 = 4
5:4 = 你好
6:5 = nihao


true  

二

模板語法：

模板語句由‘{@’和‘}’組成，共有由下五個(gè)句子：

{@if} {@else} {@elseif} {@endif} if語句

if語句及分支，用法{@if 表達(dá)式}

{@endif}為結(jié)束標(biāo)記

{@loop} {@endloop} 循環(huán)語句

{@loop}有四個(gè)參數(shù){@loop data,row,key,seq}，參數(shù)之間用英文逗號(hào)隔開。其中，data和row參數(shù)是必須的。data是數(shù)據(jù)源（如數(shù)組等），row是遍歷中的data的子集。key和seq參數(shù)是可選的，key是數(shù)據(jù)源索引（數(shù)組下標(biāo)），seq是當(dāng)前第幾個(gè)子集（序號(hào)）。

{@endloop}為循環(huán)結(jié)束標(biāo)記

{@exp} js表達(dá)式

可以執(zhí)行js語句

{@變量} 輸出變量值

模板對(duì)象的assign方法:

assign用于給模板對(duì)象指定的內(nèi)部變量賦值，內(nèi)部變量則用于模板語法中可以直接使用的變量

模板對(duì)象的parse方法:

parse方法接收一個(gè)參數(shù)，該參數(shù)為模板字符串，對(duì)該字符串進(jìn)行解析和生成最終的html語句并返回

示例：

1 var tpl = document.getElementById('aaa').innerHTML; //獲取模板內(nèi)容
2 var jinkoTpl = new JinkoTemplate(); //創(chuàng)建模板對(duì)象
3 jinkoTpl.assign('data', {a:1, asdb:'22110', c:3}); //賦值模板對(duì)象內(nèi)部變量
4 jinkoTpl.assign('ary', [1,2,3,4, '你好', 'nihao']);//賦值模板對(duì)象內(nèi)部變量
5 jinkoTpl.assign('booltrue', true); //賦值模板對(duì)象內(nèi)部變量
6 jinkoTpl.assign('boolfalse', false); //賦值模板對(duì)象內(nèi)部變量
7 jinkoTpl.assign('yi', 2); //賦值模板對(duì)象內(nèi)部變量
8 document.getElementById('bbb').innerHTML = jinkoTpl.parse(tpl); //解析模板并添加到DOM元素中

庫下載地址(未壓縮):http://files.cnblogs.com/files/JinkoWu/jinko.template.js

庫下載地址(壓縮):http://files.cnblogs.com/files/JinkoWu/jinko.template.min.js

總結(jié)

以上是生活随笔為你收集整理的前端js模板库 JinkoTemplate的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。