node package manager
Love JavaScript? Your insights can make it even better. Take the 2017 JavaScript Ecosystem Survey »

tuma

tuma.js

极简高性能模板引擎

安装

npm install tuma

============

Usage 使用方法

模板

<!-- 注意这里的 type 不是 javascript,只是模板的容器 -->
<script id="test" type="text/html">
<ul>
  <% for(var i=0; i< list.length; i++){ %>
      <li> <%= list[i].name %> </li>
  <% } %>
</ul>
</script> 

数据

<script>
var list = [
    {id: 1, name: 'name1'},
    {id: 2, name: 'name2'},
    {id: 3, name: 'name3'}
]
</script>

渲染

var tpl = document.getElementById('test').innerHTML;
 
var render = tuma.tmpl(tpl); // 返回一个渲染函数 
 
var result = render(); // 执行渲染得到结果 
 
// 输出结果 
document.getElementById('result').innerHTML = result;
// 上面使用的是全局变量,这样并不太好。可以把需要的参数传入 
var data = {
  list: {...},
  // ... 其它变量 
}
 
var render = tuma.tmpl(tpl);
var result = render(data); // 传入参数 
 
// ... 数据变化后,再次渲染 
var result = render(data);
 
// 还可以这样写 
var result = tuma.tmpl(tpl)(data);
 
// 或者这样 
var result = tuma.tmpl(tpl, data);

结果

<div id="result">
<ul>
  
      <li> name1 </li>
  
      <li> name2 </li>
  
      <li> name3 </li>
  
</ul>
</div>

test show