javascript模板系统 ejs v9

的模板系统升一下级, 继续在新公司里面用。 现在几在互联网公司没有不用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	女	静态的表格	静态的表格	静态的表格