高性能双端js模板（新增filter）---simplite

simplite是一款js实现的模板引擎，它能够完成浏览器端js模版和node服务器端js模板的数据渲染。

• 　　渲染性能十分突出。
• 　　支持浏览器端和node服务器端模板渲染。
• 　　它简单易用，默认采用jsp语法风格来编写逻辑部分的代码，当然，如果你想定制其他标签，也是可以很方便的配置。
• 　　它采用原生js语法，没有给使用者带来学习上的成本，当然，采用原生js能够进一步提高渲染的性能。
• 　　可以动态导入子模板，当然，子模板可以多层嵌套，同时支持为子模板传入指定的数据集来渲染子模板，非常实用的功能。
• 　　可以支持松散的js语法格式，如果你忘记写分号，没关系，模板会帮你处理。
• 　　像大部分模板一样，可以设置属性转义输出。
•       支持对数据的filter处理，可以为模板注入自己的filter。

　　下面来看下它和其他流行的模板做的性能对比图：（你也可以自己下载git的代码，运行测试）

编写模板：

 1         <script type="text/html" 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的明天添砖加瓦，如果有什么好的代码可以贡献，本人不甚感激。

　　simplite的git地址