javascript模板系统 ejs v9

最新推荐文章于 2025-12-02 21:41:05 发布

最新推荐文章于 2025-12-02 21:41:05 发布 · 496 阅读

文章标签：

#javascript #后端 #前端 #ViewUI

本文介绍了一款JavaScript模板引擎的升级细节，包括对后端数据的处理方式改进，支持更灵活的变量使用，以及如何避免语法错误等问题。通过示例展示了如何在实际项目中应用此模板引擎。

的模板系统升一下级, 继续在新公司里面用。现在几在互联网公司没有不用javascript模板了，什么TX，百度，新浪， 360什么的，最后瀑布流的流行，里面又有许多用到模板。

本版本就是改回v6的形态，后端数据还是带@前端才方便查看与调试。昨天也与一TX前端工程师讨论过这个必要性。取得模板中的需要填写的变量，再与后端传过来的JSON进行比较，尽早进行数据验证。这种技术，可以看一看PHP的变量命名就知了，带是带$前缀。

在之前的版本中，如果输出语句带分号或逗号是会报错的

            
<script type="tmpl" id="table_tmpl"> 

   <table> 

       <& for(var i=0,tl = @trs.length,tr;i<tl;i++){ &> 

         <& tr = @trs[i]; &> 

         <tr> 

             <td><&= tr.name; &></td> <td><&= tr.age; &></td> <td><&= tr.sex || "男" &></td> 

         </tr> 

       <& } &> 

 </table> 

 <&# 怎么可能不支持图片 &> 

 <img src="<&= @href &>"> 

 </script>

因为内部生成的字符串是这个样子的:

__views(data.tr.name;)

为了防止用户顺手把个逗号或分号上去,本版本自动帮你处理了.

rlastSemi = /[,;]\s*$/ 

// 略 

  case "="://处理后台返回的变量（输出到页面的); 

                            logic = els[0].substring(1); 

                            if(logic.indexOf("@")!==-1){ 

                                temp.push( startOfHTML, logic.replace(rAt,"$1data.").replace(rlastSemi,''), endOfHTML ); 

                            }else{ 

                                temp.push( startOfHTML, logic.replace(rlastSemi,''), endOfHTML ); 

                            } 

                            break;

例子

下面是一个模板，放置于浏览器会忽略解析JS代码的script标签之内，注意trs与href前面都带有@标识符。

<script type="tmpl" id="table_tmpl"> 

   <table> 

       <& for(var i=0,tl = @trs.length,tr;i<tl;i++){ &> 

         <& tr = @trs[i]; &> 

         <tr> 

             <td><&= tr.name &></td> <td><&= tr.age &></td> <td><&= tr.sex || "男" &></td> 

         <&# 导入子模板 &> 

         <&= $.ejs("tds_tmpl"); &> 

         </tr> 

       <& } &> 

 </table> 

 <&# 怎么可能不支持图片 &> 

 <img src="<&= @href &>"> 

 </script> 

 <!--  这是子模板  -->

 <script type="tmpl" id="tds_tmpl"> 

       <td>静态的表格</d> <td>静态的表格</d> <td>静态的表格</d> 

 </script>

这是它的JS代码：

$.require("ready,more/ejs,node", function(){ 

    var trs = [ 

        {name:"隐形杀手",age:29,sex:"男"}, 

        {name:"索拉",age:22,sex:"男"}, 

        {name:"fesyo",age:23,sex:"女"}, 

        {name:"恋妖壶",age:18,sex:"男"}, 

        {name:"竜崎",age:25,sex:"男"}, 

        {name:"你不懂的",age:30,sex:"女"} 

    ] 
 
    var html = $.ejs("table_tmpl",{ 

        trs: trs, 

        href: "http://images.cnblogs.com/cnblogs_com/rubylouvre/202906/o_type4.jpg"

    }); 

    $("#table_tc").html(html) 
});

隐形杀手	29	男	静态的表格	静态的表格	静态的表格
索拉	22	男	静态的表格	静态的表格	静态的表格
fesyo	23	女	静态的表格	静态的表格	静态的表格
恋妖壶	18	男	静态的表格	静态的表格	静态的表格
竜崎	25	男	静态的表格	静态的表格	静态的表格
你不懂的	30	女	静态的表格	静态的表格	静态的表格