一个适用于混合开发的模板引擎
最近通过Apicloud开发App,使用了Apicloud提供的api.js和doT.js
doT.js框架下载地址： https://github.com/olado/doT
doT.js官方说明文档：http://jinlong.github.io/doT/
1、特点是快,小,无依赖其他插件
2、常用语法
|
1 2 3 4 5 6 7 8 9 10 11 |
{{ }} for evaluation 模板标记符 {{= }} for interpolation 输出显示，默认变量名叫it {{! }} for interpolation with encoding 编码后输出显示 {{? }} for conditionals 条件分支，if条件的简写 {{~ }} for array iteration 遍历数组 //使用步骤 数据源 ： json 模板 ： 数据显示的格式 区域 ： 数据显示的位置 调用方试 ： 填充数据 |
3、在Safari模板引擎渲染速度测试
完整的doT.js在页面中使用的例子
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 |
<!doctype html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/> <title>php笔记_https://www.phpnote.cc</title> </head> <body> <!-- 赋值 --> <script id="interpolationTemp" type="text/x-dot-template" > <h1> hello {{=it.name}} </h1> </script> <div id="interpolation"></div><hr /> <!-- 循环 --> <script id="evaluationTemp" type="text/x-dot-template"> {{ for(var x in it) { }} <p>{{= x }} - > {{= it[x] }}</p> {{ } }} </script> <div id="evaluation"></div><hr /> <!-- 迭代 --> <script id="interationTemp" type="text/x-dot-template"> {{~it.array:value:index}} <p>{{= index+1 }}{{= value }}</p> {{~}} </script> <div id="interation"></div><hr /> <!-- 条件语句 --> <script id="conditionalsTemp" type="text/x-dot-template"> {{? it.lastName }} <p>{{= it.lastName }}</p> {{?}} {{? it.name }} <p>{{= it.name }}</p> {{?? it.firstName }} <p>{{= it.firstName }}</p> {{?}} {{? it.lastName }} <p> {{= it.lastName }}</p> {{?? it.age === 22}} <p> {{= it.lastName }}</p> {{?? it.firstName }} <p> {{= it.firstName }}</p> {{??}} <p>no data！</p> {{?}} </script> <div id="conditionals"></div><hr /> <script src="./js/api.js"></script> <script src="./js/doT.min.js"></script> <script type="text/javascript"> // 赋值 var interpolationData = { 'name' : 'word' }; var interpolation = doT.template( $api.dom('#interpolationTemp').innerHTML ); $api.dom( '#interpolation' ).innerHTML = interpolation( interpolationData ); // 循环 var evaluationData = {'firstName' : 'bi', 'lastName' : 'mingxing', 'age' : 22 }; var evaluation = doT.template( $api.dom('#evaluationTemp').innerHTML ); $api.dom( '#evaluation' ).innerHTML = evaluation( evaluationData ); // 迭代 var interationData = {"array":["banana","apple","orange"]}; var interation = doT.template( $api.dom('#interationTemp').innerHTML ); $api.dom( '#interation' ).innerHTML = interation( interationData ); // 条件语句 var conditionals = doT.template( $api.dom('#conditionalsTemp').innerHTML ); $api.dom( '#conditionals' ).innerHTML = conditionals( evaluationData ); </script> </body> </html> |
更多待涛哥实践总结补充
转载请注明：PHP笔记 » doT.js适用于混合开发的模板引擎
