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的明天添磚加瓦，如果有什么好的代碼可以貢獻，本人不甚感激。