Razor.js，基于JavaScript的Razor实现

刺骨的言语ヽ痛彻心扉 2022-10-02 06:55 203阅读 0赞

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

支持的 Razor 特性

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

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

![ContractedBlock.gif][] ![ExpandedBlockStart.gif][]

<!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>

下载

【 [点此下载][Link 1]】这个版本还不是很成熟，代码没有经过混淆，如果你不喜欢“\`”，可以修改scripts/Razor.base.js的“razorAnchor”配置。关于Razor的相关语法我就不多介绍了。

如果你有更好的优化意见，请留言！如果你喜欢这篇文章，请推荐~

转载于:https://www.cnblogs.com/sofire/p/razorjs\_v1\_0.html

[ContractedBlock.gif]: https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif
[ExpandedBlockStart.gif]: /images/20220113/6ce0d983775a490eb7aefaef86a832a3.png
[Link 1]: http://files.cnblogs.com/sofire/JsRazorDemo.rar