哈罗大家好，之前造了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>
下载
【点此下载】这个版本还不是很成熟，代码没有经过混淆，如果你不喜欢“`”，可以修改scripts/Razor.base.js的“razorAnchor”配置。关于Razor的相关语法我就不多介绍了。
如果你有更好的优化意见，请留言！如果你喜欢这篇文章，请推荐~

Razor.js，基于JavaScript的Razor实现的更多相关文章

  1. 实例演示 kino.razor （前端 Javascript 模板工具，Razor 风格）的使用

    前言 对于习惯了 ASP.NET MVC Razor 模板引擎的人来说,比如我,一直在寻找前端 Javascript 端的 Razor 模板工具.这之前,我也了解到很多Javascript 端的模板工 ...

  2. ASP.NET的 Razor引擎和JavaScript是一种什么关系

    Razor能做的JS大部分能做,不是全部.比如说,如果你用了Entity Frame一类的ORM的时候,Razor可以直接绑定数据库数据,但JS就不可能直接访问数据库——必须通过其他web servi ...

  3. Vis.js – 基于浏览器的动态 JavaScript 可视化库

    Vis.js 是一个动态的,基于浏览器的可视化库.该库被设计为易于使用,能处理大量的动态数据.该库由以下几部分组成:一是数据集和数据视图,基于灵活的键/值数据集,可以添加,更新和删除项目,订阅数据集变 ...

  4. 了不起的Node.js: 将JavaScript进行到底（Web开发首选，实时，跨多服务器，高并发）

    了不起的Node.js: 将JavaScript进行到底(Web开发首选,实时,跨多服务器,高并发) Guillermo Rauch 编   赵静 译 ISBN 978-7-121-21769-2 2 ...

  5. Arctext.js - 基于 CSS3 & jQuery 的文本弯曲效果

    Arctext.js 是基于 Lettering.js 的文本旋转插件,根据设置的旋转半径准确计算每个字母的旋转弧度并均匀分布.虽然 CSS3 也能够实现字符旋转效果,但是要让安排每个字母都沿着弯曲路 ...

  6. Vue.js – 基于 MVVM 实现交互式的 Web 界面

    Vue.js 是用于构建交互式的 Web  界面的库.它提供了 MVVM 数据绑定和一个可组合的组件系统,具有简单.灵活的 API.从技术上讲, Vue.js 集中在 MVVM 模式上的视图模型层,并 ...

  7. Resumable.js – 基于 HTML5 File API 的文件上传

    Resumable.js 是一个 JavaScript 库,通过 HTML5 文件 API 提供,稳定和可恢复的批量上传功能.在上传大文件的时候通过每个文件分割成小块,每块在上传失败的时候,上传会不断 ...

  8. DalekJS – 基于 JavaScript 实现跨浏览器的自动化测试

    在 Web 项目中,浏览器兼容以及跨浏览器测试是最重要的也是最费劲的工作.DalekJS 是一个基于 JavaScript(或 Node.js) 的免费和开源的自动化测试接口.它能够同时运行测试一组流 ...

  9. JS基于时间戳写的浏览访问人数

    Title:JS基于时间戳写的浏览访问人数  --2013-12-23 14:07 <script language="JavaScript"> var timesta ...

随机推荐

  1. B-tree

    2-3 Tree 二叉搜索树的每个节点只带有一个值,这个值将数据区间划分成两部分,值左边的部分(也就是小于这个值的数据)保存到节点的左子树,值右边的部分保存到节点的右子树.因此,每个非叶子节最多能够拥 ...

  2. Keep It Simple Stupid!

    Kelly Johnson提出了KISS原则.他是一个飞机工程师以及航空发明家,同时也是一个管理天才,他一生中主要设计了40多架飞机,获得的荣誉相当之多,总之,很牛. 这个原则是对Johnson带领的 ...

  3. 找出一个二维数组中的"鞍点",即该位置上的元素在该行中最大,在该列中最小(也可能没有"鞍点"),打印有关信息.(提示:注意特殊情况:没鞍点或多个鞍点)

    #import <Foundation/Foundation.h> int main(int argc, const char * argv[]) { ][] = {}; ;i < ...

  4. C#中的using和yield return混合使用

    最近写代码为了为了省事儿用了几个yield return,因为我不想New一个List<T>或者T[]对象再往里放元素,就直接返回IEnumerable<T>了.我的代码里还有 ...

  5. 【转】Beanstalkd 队列简易使用

    Beanstalkd一个高性能分布式内存队列系统   之前在微博上调查过大家正在使用的分布式内存队列系统,反馈有Memcacheq,Fqueue, RabbitMQ, Beanstalkd以及link ...

  6. ros下多机器人系统(1)

    multi-robot system 经过两个多月的ros学习,对ros的认识有了比较深入的了解,本篇博客主要记录在ros下开发多机器人系统以及对ros更深入的开发.本篇博客是假定读者已经学习完了全部 ...

  7. 广义Euler常数

    对于区间(a,b)内f''(x)>0 那么在该区间内函数的一阶导数对应切线在该区间内只与f(x)在切点相交 1. f''(x)>0那么可知 f'(x)在该区间内是单调增的 以下图为例,过( ...

  8. MySQL的安装配置

    安装配置 MySQL1.官方下载 MySQL2.用 tar 解压.tar.bz 或.tar.gz3.解压后有三个目录,分别为 usr etc var4.进入 usr,进入 bin5.在主机上建个目录( ...

  9. RabbitMQ 记录

    RabbitMQ 中文文档 : http://rabbitmq.mr-ping.com/description.html 官方教程译文: 一 http://blog.csdn.net/xiaoxian ...

  10. SQL 2008无法连接的解决办法

    问题: 在从本地客户端连接到SQL 2008的时候出现无法连接的错误.错误信息如下所示: