js常用模板引擎

baiduTemplate(百度)、artTemplate(腾讯)、juicer(淘宝)、xtemplate、doT、Jade
1、Handlebars 是 JavaScript 一个语义模板库,通过对view和data的分离来快速构建web模板。 在加载时被预编译,而不是到了客户端执行到代码时再去编译,这样可以保证模板加载和运行的速度。
http://handlebarsjs.com/
http://caibaojian.com/handlebars-js.html
2、Jade是一个有着完善API和惊艳特性的JavaScript模板引擎。使用空白与缩进敏感的代码格式编写HTML页面。基于Node.js,运行在服务器端。
3、DoTjs快速和简洁的JavaScript模板引擎,同时用于Node.js和浏览器。
4、xtemplate:http://docs.spmjs.io/xtemplate/latest/
5、juicer:http://juicer.name/
<!--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>  

转载于:https://www.cnblogs.com/chenlogin/p/5266195.html

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值