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