JS template engine Why Choose Dot

Because I want to introduce JS template in my project, so I studied a bit, someone told me this engine speed is very slow, so I went to collect a bit of information, the results found that jquery Tmpl is the slowest, so I gave up, compared to find out the following several arttemplate, Dot,juicer three wins from the speed (chrome), but in IE the final selection of the Dot,dot file is the smallest only 5K (no compression), and in IE is also the fastest.

Here is the use of the dot below, in fact the usage is very simple

The DOT API has the following tags

{{}} JS original eco-code
{{=}} variable operation, assignment {{=it.f1 + it.f2}}
//{{! }} Assignment and encoding
//{{# }}
//{{## #}}
The above two did not study carefully, basically I do not use it
//{{? }} Conditional statements

{{~}} loop

In fact, conditional statements and loops can be replaced with {{If}}{{else if}}{{for (var i=0;i<length;i++)}}, which is the original ecological code of JS.

Then we use only the first three kinds of labels is fully sufficient, the following example, it is easy to see the

<ScriptId= "Tmpl-demo"Type= "Text/tmpl">{%If($data. suc) {%} {%For(VarI=0; I<$data. Users.length; I++) {%} {%VarUser=$data. Users[i];%}<div style="margin-bottom:10px;"><SPAN style="margin-left:10px;">{%=User. Name%}</Span>{%!User.url%}{%=Global%}</Div>{%}%} {%each ($data);%} {%}%}</Script><ScriptType= "Text/javascript">function demo () {var FN = Dot.template ($ (" # Tmpl-demo "). HTML ()); $ ( " #demo " ). Append (fn (data));} </script><div id= "Demo" Span style= "color: #0000ff;" >></div>      

May be a question, not {{}}, in fact dot allows to customize the included tags, which will let you use your favorite template tags

For example, his original settings are such that it is not easy to modify

 var DoT ={version: ' 1.0.1 ', templatesettings: {evaluate:/\{\{([\s\s]+? ( \}?) +)\}\}/G, Interpolate:/\{\{= ([\s\s]+?) \}\}/G, encode:/\{\{! ( [\s\s]+?] \}\}/G, use:/\{\{# ([\s\s]+?) \}\}/G, Useparams:/(^|[ ^\w$]) def (?: \.| \[[\ ' \ "]) ([\w$\.] +) (?: [\ ' \ ']\])? \s*\:\s* ([\w$\.] +|\ "[^\"]+\ "|\" [^\ ']+\ ' |\{[^\}]+\})/G, define:/\{\{##\s* ([\w\.$]+) \s* (\:|=) ([\s\s]+?) #\}\}/g, Defineparams:/^\s* ([\w$]+):([\s\s]+]/g, Iterate:/\{\{~\s* (?: \} \}| ([\s\s]+?) \s*\:\s* ([\w$]+) \s* (?: \:\ s* ([\w$]+)] \s*\}\})/g, varname: ' $data ' 

I modified it to be the following, very simple

var DoT ={version: ' 1.0.1 ', templatesettings: {evaluate:/\{\% ([\s\s]+? ( \}?) +)\%\}/G, Interpolate:/\{\%= ([\s\s]+?) \%\}/G, encode:/\{\%! ( [\s\s]+?] \%\}/G, use:/\{\%# ([\s\s]+?) \%\}/G, Useparams:/(^|[ ^\w$]) def (?: \.| \[[\ ' \ "]) ([\w$\.] +) (?: [\ ' \ ']\])? \s*\:\s* ([\w$\.] +|\ "[^\"]+\ "|\" [^\ ']+\ ' |\{[^\}]+\})/G, define:/\{\%##\s* ([\w\.$]+) \s* (\:|=) ([\s\s]+?) #\%\}/g, Defineparams:/^\s* ([\w$]+):([\s\s]+]/g, Iterate:/\{\%~\s* (?: \%\}| ([\s\s]+?) \s*\:\s* ([\w$]+) \s* (?: \:\ s* ([\w$]+)] \s*\%\})/g, varname: ' $data ' 

JS template engine Why Choose Dot