高效能雙端js模板---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地址

 

高效能雙端js模板---simplite