zoukankan      html  css  js  c++  java
  • Razor.js,基于JavaScript的Razor实现

    Razor.js,基于JavaScript的Razor实现

    哈罗大家好,之前造了JS模板轮子Otmpl,虽然勉强算不错,但是和MVC Razor的简洁优雅相比,简直是惨不忍睹。经过几天的研究,终于在参考国外一些牛人的代码后,展现出第一版,欢迎各位园友拍砖讨论。

     

    支持的 Razor 特性

     

    • if-else 判断。
    • do-while 循环。
    • while 循环。
    • for 循环。
    • helper 方法。
    • `*注释*`。

     

    示例代码1(为了在MVC中使用,我采用Esc键下面的“`”符号代替“@”。

     

    <!DOCTYPE html>
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>基于 JS 的微型 Razor 引擎</title>
    <script src="jquery-1.8.3.js"></script>
    <script src="script/Razor.base.js"></script>
    <script type="text/javascript">
    $(function () {
    var model = { id: 5, userID: 1, message: '基于 JS 的微型 Razor 引擎', date: Date.now() };
    $.razorAll(model);
    });
    </script>
    </head>
    <body>
    `helper test(index){ return index; }

    `for(var index = 0;index < model.id; index++ ){
    <span>`(">"+index)</span>
    }
    `if(model.userID == 1){
    <h1>用户编号是1</h1>
    }
    `if(model.message){
    <h2>`model.message</h2>
    }
    `if(model.date){
    <h3>`model.date</h3>
    }
    </body>
    </html>

    复制代码
    <!DOCTYPE html>
    <html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>基于 JS 的微型 Razor 引擎</title>
        <script src="jquery-1.8.3.js"></script>
        <script src="script/Razor.base.js"></script>
        <script type="text/javascript">
            $(function () {
                var model = { id: 5, userID: 1, message: '基于 JS 的微型 Razor 引擎', date: Date.now() };
                $.razorAll(model);
            });
        </script>
    </head>
    <body>
        `helper test(index){ return index; }
    
        `for(var index = 0;index < model.id; index++ ){
            <span>`(">"+index)</span>
        }
        `if(model.userID == 1){
            <h1>用户编号是1</h1>
        }
        `if(model.message){
            <h2>`model.message</h2>
        }
        `if(model.date){
            <h3>`model.date</h3>
        }
    </body>
    </html>
    复制代码
    下载
    点此下载】这个版本还不是很成熟,代码没有经过混淆,如果你不喜欢“`”,可以修改scripts/Razor.base.js的“razorAnchor”配置。关于Razor的相关语法我就不多介绍了。
    如果你有更好的优化意见,请留言!如果你喜欢这篇文章,请推荐~

  • 相关阅读:
    机器人
    昨天拿钥匙了
    Linux挂NTFS格式USB硬盘
    漫游在首都
    RHEL+WAS6部署风波
    移动电话国内漫游通话费上限评估用户意见网上调查
    WebSphere fixes
    我太强悍了
    NO SUBJECT
    pku3617 Best Cow Line
  • 原文地址:https://www.cnblogs.com/Leo_wl/p/3315183.html
Copyright © 2011-2022 走看看