fastpl简单高效的前端模板
简要
fastpl 是一个高效、轻量的Javascript模板引擎。
- 速度优秀
- 体积小,压缩后只有4kb不到
- 语法简洁,宽松写法减少错误,提供很多简洁的语法糖
- 入门快,与主流js、node和后端smarty等模板引擎语法接近,上手简单
- 自定义函数,提供方便的格式化函数,可添加自定义函数
- 快速的错误定位,变量、语法等错误明确提示,未知错误抛出代码
测试对比:test
在线demo:demo
快速使用
html模板:
<script type="text/tmpl" id="test"> {{ if showList }} {{for list}} <a href="#"> ${ v } </a> {{/for}} <span>${ dataTime|date_format:'yyyy-MM-dd EEE' }</span> {{/if }}
<p> ${number || 0} </p> </script>
js代码:
// 数据 var data = { list: ["js", "html", "css"], showList: true, person: { name: 'json', age: 18 } dataTime: '2014-12-1 14:14:14', number: 12345678 } // 调用模板 var tpl = fasTpl( document.getElementById( 'test' ).innerHTML ), html = tpl.render( data ); // 快捷写法 // var html = fasTpl( document.getElementById( 'test' ).innerHTML, data );
变量
变量语法,用来输出变量,提供逻辑运算和自定义方法。
逻辑运算:
<p>${ dateTimes || '不存在dateTimes' }</p> <p>${ dateTimes ? '存在dateTimes' : '不存在dateTimes' }</p> <p>${ !!dateTimes }</p>
<p>${ person|count }</p>
// fastpl-plus.min.js 才支持下面2个方法
<p>${ dateTime| date_format:'yyyy-MM-dd' }</p>
<p>${ number|number_format }</p>
自定义方法结果:
2
2014-12-01
12,345,678
自定义方法
添加自定义方法
fastpl.tools( 'toString', function( val, args ){ return String( val ).toString(); }) // 或者 fastpl.tools({ 'toString': function( val, args ){ return String( val ).toString(); } })
获取全部自定义方法 fastpl.getTools();
语法糖
{{ for }} 默认值 v 和 i ,分别是值和索引。
访问数据全局变量可使用_data。
for提供一个极好的功能,就是像原生for一样自定义循环。
{{ for list(0,1000) }}
<a href="#"> ${list} </a>
{{/for }}
{{var}} 申明一个或多个变量
// {{var}} {{var i = 10}} {{for (1,i) }} <a href="#"> ${ i } </a> {{/for}}
{{log}} console.log日志输出,可以用来调试
// {{ log }} <a href="#"> {{log '123'}} </a>
错误提示
错误标签、未声明变量、标签语法错误等提供明确提示,未闭合标签可在chrome vm下查看编译代码。
可以看到未被编译的标签语法。
具体api请看:fastpl(Github只是有点慢,安心等待,Safari请切换代理到chrome):)
如今的各种框架和库对模板支持都很完美了,但依赖性强,这里只是提供多一种选择。
浙公网安备 33010602011771号