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)            });            

相關源碼可見github。