High-performance double-end js template (New filter) --- simplite

High-performance double-end js template (New filter) --- simplite
Simplite is a js-implemented template engine that can complete Data Rendering for browser-side js templates and node-server-side js templates. Outstanding rendering performance. Supports rendering templates on the browser and node servers. It is easy to use. By default, the jsp syntax style is used to compile the logic part of the code. Of course, if you want to customize other labels, it can also be easily configured. It uses native js syntax and does not bring learning costs to users. Of course, native js can further improve rendering performance. You can dynamically import sub-templates. Of course, sub-templates can be nested in multiple layers, and you can also import a specified dataset to the sub-template to render the sub-template. This is a very practical function. It supports loose js syntax format. If you forget to write a semicolon, the template will help you deal with it. Like most templates, you can set the attribute escape output. Supports data filter processing. You can inject your own filter into the template. Next, let's take a look at the performance comparison between it and other popular templates: (You can also download the git code and run the test on your own) Compile the template: 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> or merge the logical part 1 <script type = "text/html" id = "rootTemplate "> 2 <ul> 3 <% for (var I = 0; I <_ this. l Ength; 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> subTemplate: 1 <script type = "text/html" id = "subTemplate"> 2 <li> <% = _ this. id %> ---- <% = _ this. name %> </li> 3 </script> fill data: 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]; usage: 1: call static method 1 var compile = Simplite. compile; 2 var render = compile (templateStr); 3 var htmlStr = render (data); 2: instantiation method 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); as shown in the code above, in the default configuration, you can directly use "_ this" in the template to obtain references to incoming data, Because we pass in an array, we can directly traverse this data to render the li element. The template also provides an introduction to name data display and sub-template import. If the name needs to be escaped, you can use <% = # obj. in this example, the sub-template is dynamically imported according to the if condition. The data used by the sub-template is also specified during the import, this is also a good way to use this subtemplate. You can import only part of the data in the parent template to the subtemplate. If you do not specify the imported data, the dataset of the parent template is imported to the subtemplate by default. As you can see from the method _ this. id defined by the sub-template above, _ this represents the dataset passed in by the parent template. If you do not like the default template style, you can also customize your own labels, as long as you configure the following attributes: 1 // default logic start label 2 Simplite. logicOpenTag = '<%'; 3 // default logical close tag 4 Simplite. logicCloseTag = '%>'; 5 // default attribute start label 6 Simplite. attrOpenTag = '<%'; 7 // default attribute closure label 8 Simplite. attrCloseTag = '%>'; if you do not like to use _ this to obtain the current dataset, you can also customize it: Simplite. dataKey = '_ this'; rendered effect: filter processing of data is supported. First, you need to register the filter by calling addFilter, and then you can use filter (name, data1, data2 ,...) example: 1 Simplite. addFi Lter ('abc', function (name) {2 return '<span style = "color: blue;">' + name + '</span>'; 3 }); template: <script type = "text/html" id = "oneArgTemplate"> <li> test if no data is transmitted: <% filter ('abc', _ this ); %> </li> </script> effect: Welcome to my git address. You are also welcome to contribute to the future of simplite. I am not very grateful if you have any good code.