zoukankan      html  css  js  c++  java
  • 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,
        });
        $("#table_tc").html(html)
    });

    当前标签: javascript

    共22页: 1 2 3 4 5 6 7 8 9 下一页 末页 
    javascript模板系统 ejs v9 司徒正美 2012-03-19 12:04 阅读:629 评论:0  
     
    mass Framework lang模块 v4 司徒正美 2012-03-17 21:41 阅读:422 评论:0  
     
    mass Framework waterfall(瀑布流)插件 司徒正美 2012-03-15 09:10 阅读:1901 评论:6  
     
    mass Framework switchable插件 司徒正美 2012-03-11 11:12 阅读:1721 评论:2  
     
    mass Framework tabs插件 v2 司徒正美 2012-03-04 12:20 阅读:2253 评论:0  
     
    mass Framework tabs插件 司徒正美 2012-02-25 16:53 阅读:2607 评论:1  
     
    mass Framework pagination插件v2 司徒正美 2012-02-23 09:01 阅读:2869 评论:4  
     
    mass Framework pagination插件 司徒正美 2012-02-22 11:19 阅读:3054 评论:3  
     
    mass Framework flip插件 司徒正美 2012-02-20 20:52 阅读:2928 评论:4  
     
    mass Framework placeholder插件 司徒正美 2012-02-17 21:45 阅读:2621 评论:5  
     
    javascript suggest效果 司徒正美 2012-02-16 10:34 阅读:3147 评论:3  
     
    javascript题目,重写函数让其无限相加 司徒正美 2012-02-15 10:19 阅读:3462 评论:19  
     
    javascript 瀑布流 司徒正美 2012-02-06 14:43 阅读:5052 评论:12  
     
    (转)HTML5 全屏 API 司徒正美 2012-02-05 21:56 阅读:1709 评论:0  
     
    新锐浏览器支持原生CustomEvent事件 司徒正美 2012-02-05 13:24 阅读:1472 评论:0  
     
    javascript题目,如何在重写alert后还能正常弹出alert 司徒正美 2012-02-03 09:21 阅读:4347 评论:24  
     
    奇技淫巧之Object.keys 司徒正美 2011-12-24 11:03 阅读:3574 评论:4  
     
    mass Framework第四种模板函数 司徒正美 2011-12-17 12:03 阅读:1822 评论:1  
     
    属性监听器 司徒正美 2011-12-13 18:58 阅读:1232 评论:2  
     
    FF或将支持返回一个HTML文档对象 司徒正美 2011-12-02 10:14 阅读:994 评论:0  
  • 相关阅读:
    hdu1002
    hdu1008
    hdu1000
    fzu2089
    hdu1003
    hdu1004
    HDU1019
    《那些年啊,那些事——一个程序员的奋斗史》——87
    《那些年啊,那些事——一个程序员的奋斗史》——83
    《那些年啊,那些事——一个程序员的奋斗史》——89
  • 原文地址:https://www.cnblogs.com/Leo_wl/p/2405985.html
Copyright © 2011-2022 走看看