simplite是一款js实现的模板引擎,它能够完成浏览器端js模版和node服务器端js模板的数据渲染。
 
  渲染性能十分突出。
  支持浏览器端和node服务器端模板渲染。
  它简单易用,默认采用jsp语法风格来编写逻辑部分的代码,当然,如果你想定制其他标签,也是可以很方便的配置。
  它采用原生js语法,没有给使用者带来学习上的成本,当然,采用原生js能够进一步提高渲染的性能。
  可以动态导入子模板,当然,子模板可以多层嵌套,同时支持为子模板传入指定的数据集来渲染子模板,非常实用的功能。
  可以支持松散的js语法格式,如果你忘记写分号,没关系,模板会帮你处理。
  像大部分模板一样,可以设置属性转义输出。
      支持对数据的filter处理,可以为模板注入自己的filter。
  下面来看下它和其他流行的模板做的性能对比图:(你也可以自己git的代码,运行测试)
 
 
 
编写模板:
 
 
 1         <script type="text/" id="rootTemplate">
 2             <ul>
 3             <%
 4                 for (var i = 0; i < _this.length; i++) {
 5              %>
 6             <%
 7                  var obj = _this[i];
 8              %>
 9              <li><%=obj.name%></li>
10              <% 
11                   if (obj.id % 2) {
12                       include(subTemplate, obj);
13                   }
14              %>
15              <%
16                  }
17              %>
18              <ul>
19          </script>
 
  或者可以把逻辑部分合并
 
 
 1         <script type="text/html" id="rootTemplate">
 2             <ul>
 3             <%for(var i=0;i<_this.length;i++){
 4                 var obj = _this[i];
 5             %>
 6             <li><%=obj.name%></li>
 7             <% 
 8                 if (obj.id % 2) {
 9                     include(subTemplate, obj);
10                 }
11             }
12             %>
13             <ul>
14         </script>
 
  子模板:
 
1         <script type="text/html" id="subTemplate">
2              <li><%=_this.id%>----<%=_this.name%></li>
3         </script>
  填充数据:
 
 
 1         var data = [
 2               {
 3                   id: 1,
 4                   name: '小学'
 5               },
 6               {
 7                   id: 2,
 8                   name: '中学'
 9               },
10              {
11                  id: 3,
12                  name: '大学'
13              }
14         ];
 
  使用方式:
 
    1:调用静态方法
 
1          var compile = Simplite.compile;
2          var render = compile(templateStr);
3          var htmlStr = render(data);
 
 
    2:实例化方式
 
 
 1         var template = new Simplite({
 2             target : 'insertTemplateNodeId',
 3             template : 'rootTemplate'
 4         });
 5         template.beforerender = function(data) {
 6             console.log(data)
 7         };
 8         template.afterrender = function(node) {
 9             console.log(node)
10         };
11         template.render(data);
 
 
  通过上面的代码可见,默认配置下,可以在模板中直接使用“_this”来获取对传入数据的引用,因为咱们传入的是数组,所以可以直接遍历这个数据,来渲染出li元素。在模板中还有对name数据展示和子模板导入的使用介绍,如果name需要转义,可以使用<%=#obj.name%>来指定;例子中,子模板的导入是动态的,根据if的条件来导入,在导入的时候,也指定了子模板使用的数据,这也是这个子模板比较好用的地方,可以只传入父模板中的部分数据到子模板,若没有指定传入的数据,默认是把父模板的数据集传入子模板。从上面的子模板定义的获取属性方式_this.id,可以看到,_this代表的就是父模板传入的数据集。如果你不喜欢默认的模板风格,你也可以定制自己的标签,只要你配置如下几个属性即可:  
 
 
1          // 默认逻辑开始标签
2          Simplite.logicOpenTag = '<%';
3          // 默认逻辑闭合标签
4          Simplite.logicCloseTag = '%>';
5          // 默认属性开始标签
6          Simplite.attrOpenTag = '<%';
7          // 默认属性闭合标签
8          Simplite.attrCloseTag = '%>';
 
  如果你也不喜欢使用_this来获取当前数据集,那么你也可以定制它: Simplite.dataKey = '_this'; 
 
  渲染出来的效果:
 
    
 
  支持对数据的filter处理,首先需要通过调用addFilter进行filter的注册,然后就可以在模板中使用filter(name, data1, data2,...)的处理了,例子如下:
 
    
 
1 Simplite.addFilter('abc', function (name) {
2     return '<span style="color: blue;">' + name + '</span>';
3 });
  模板:
 
<script type="text/html" id="oneArgTemplate">
    <li>
        测试没有传递数据的情况:<% filter('abc', _this);%>
    </li>
</script>
  效果:
 
 
 
 
 
  欢迎访问我的git地址,也欢迎一起为simplite的明天添砖加瓦,如果有什么好的代码可以贡献,本人不甚感激。