前端js模板库 JinkoTemplate
有时候需要使用ajax来异步生成html，最土的方法就是用js的‘+’连接html代码，生成繁琐。一旦需要修改，对于少量的html代码到没啥问题，要是比较复杂的样式时，就真坑爹了，眼花缭乱有木有？JinkoTemplate库可以直接通过JinkoTemplate语法快速生成所需要的html代码，修改的时候也相当轻松，就如同修改当前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 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运行结果:
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
二
模板语法：
模板语句由‘{@’和‘}’组成，共有由下五个句子：
{@if} {@else} {@elseif} {@endif} if语句
if语句及分支，用法{@if 表达式}
{@endif}为结束标记
{@loop} {@endloop} 循环语句
{@loop}有四个参数{@loop data,row,key,seq}，参数之间用英文逗号隔开。其中，data和row参数是必须的。data是数据源（如数组等），row是遍历中的data的子集。key和seq参数是可选的，key是数据源索引（数组下标），seq是当前第几个子集（序号）。
{@endloop}为循环结束标记
{@exp} js表达式
可以执行js语句
{@变量} 输出变量值
模板对象的assign方法:
assign用于给模板对象指定的内部变量赋值，内部变量则用于模板语法中可以直接使用的变量
模板对象的parse方法:
parse方法接收一个参数，该参数为模板字符串，对该字符串进行解析和生成最终的html语句并返回
示例：
1 var tpl = document.getElementById('aaa').innerHTML; //获取模板内容 2 var jinkoTpl = new JinkoTemplate(); //创建模板对象 3 jinkoTpl.assign('data', {a:1, asdb:'22110', c:3}); //赋值模板对象内部变量 4 jinkoTpl.assign('ary', [1,2,3,4, '你好', 'nihao']);//赋值模板对象内部变量 5 jinkoTpl.assign('booltrue', true); //赋值模板对象内部变量 6 jinkoTpl.assign('boolfalse', false); //赋值模板对象内部变量 7 jinkoTpl.assign('yi', 2); //赋值模板对象内部变量 8 document.getElementById('bbb').innerHTML = jinkoTpl.parse(tpl); //解析模板并添加到DOM元素中
库下载地址(未压缩): https://files.cnblogs.com/files/JinkoWu/jinko.template.js
库下载地址(压缩): https://files.cnblogs.com/files/JinkoWu/jinko.template.min.js
