调研js模板引擎
- - CSDN博客Web前端推荐文章从这几个指标来比较js模板引擎:. 1 文件大小 - 影响网络传输时间. 2 执行速度(性能) - 影响响应速度,涉及模板解析和渲染. 3 语法简明/易用/灵活/自定义操作符 - 影响开发效率和维护难度. 4 错误处理/调试 - 影响开发效率和维护难度. 5 安全(XSS) - 是否防止XSS. artTemplate(腾讯):5k.
<!--Mustache 的模板 --> <script id="Mustache" type="text/tmpl"> <ul> {{#list}} <li>{{{index}}}. 用户: {{{user}}}/ 网站:{{{site}}}</li> {{/list}} </ul> </script> <!-- doT 的模板 --> <script id="doT" type="text/tmpl"> <ul> {{ for (var val, i = 0, l = it.list.length; i < l; i ++) { }} {{ val = it.list; }} <li>{{=val[i].index}}. 用户: {{=val[i].user}}/ 网站:{{=val[i].site}}</li> {{ } }} </ul> </script> <!--juicer 的模板 --> <script id="juicer" type="text/tmpl"> <ul> {@each list as val} <li>$${val.index}. 用户: $${val.user}/ 网站:$${val.site}</li> {@/each} </ul> </script> <!-- artTemplate 的模板 --> <script id="template" type="text/tmpl"> <ul> <% for (i = 0, l = list.length; i < l; i ++) { %> <li><%=list[i].index%>. 用户: <%=list[i].user%>/ 网站:<%=list[i].site%></li> <% } %> </ul> </script> <!-- underscore 的模板 --> <script id="underscoreTemplate" type="text/tmpl"> <ul> <% for (var i = 0, l = list.length; i < l; i ++) { %> <li><%=list[i].index%>. 用户: <%=list[i].user%>/ 网站:<%=list[i].site%></li> <% } %> </ul> </script> <!-- Handlebars 的模板 --> <script id="Handlebars" type="text/tmpl"> <ul> {{#list}} <li>{{{index}}}. 用户: {{{user}}}/ 网站:{{{site}}}</li> {{/list}} </ul> </script>