template.js 一款javascript模板引擎,简单,好用。
提供一套模板语法,用户可以写一个模板区块,每次根据传入的数据,生成对应数据产生的HTML片段,渲染不同的效果。
- 模版编译,渲染
- 支持所有主流浏览器及Node(UMD)
- JavaScript原生语法
- 丰富的自定义配置
- 支持数据过滤
- 异常捕获功能
- 功能专一,简单好用
- Node 0.10+
- Safari 6+ (Mac)
- iOS 5+ Safari
- Chrome 23+ (Windows, Mac, Android, iOS, Linux, Chrome OS)
- Firefox 4+ (Windows, Mac, Android, Linux, Firefox OS)
- Internet Explorer 6+ (Windows, Windows Phone)
- Opera 10+ (Windows, linux, Android)
<script src="template.js"></script>
require(['template'], function (template) {
***
});
$ bower install template.js
$ bower install git://github.com/yanhaijing/template.js.git
$ spm install template.js
$ npm install template_js
$ npm install yanhaijing/template.js
使用一个type="text/html"的script标签存放模板,或者放到字符串中:
<script id="tpl" type="text/html">
<ul>
<%for(var i = 0; i < list.length; i++) {%>
<li><%:=list[i].name%></li>
<%}%>
</ul>
</script>
var tpl = document.getElementById('tpl').innerHTML;
template(tpl, {list: [{name: "yan"},{name: "haijing"}]});
输出结果:
<ul>
<li>yan</li>
<li>haijing</li>
</ul>
更多例子,请见demo目录。
template.js 包含完整的单元测试和性能测试。详情请见test目录。
template.js从0.2.0开始支持fis,详情请看这里。
如果你想为template.js贡献代码,请采用fork + pull request 方式,并在发起pr前先将master上超前的代码rebase到自己的分支上。
在目录运行如下命令,完成验证测试编译过程,确保无误:
$ npm install -g mocha@~2.3.4 # 安装mocha
$ npm install # 安装依赖
$ mocha test # 运行测试代码
$ npm publish
临时将package.json中的名字修改为 template.js
$ spm publish
$ bower register template.js git://github.com/yanhaijing/template.js.git
yanhaijing
已经有了那么多现成的模板引擎,为什么我还要重新发明轮子呢。其实主要是《只有20行Javascript代码!手把手教你写一个页面模板引擎》读这篇文章的产物,并结合了BaiduTemplate和artTemplate的特色,还有我自己的一些想法。如果你像我一样好奇,那么可以尝试。
想了解都有谁在使用,点击这里。