哈罗大家好,之前造了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. 在Sublime Text3上面更加方便愉快的写php

    写php代码,elcipse体积太大,开起来太麻烦,记事本又没有什么标识,稍不留神就会出现;没加.大括号没对全的尴尬情况.所以我选择使用Sublime. 推荐几个 sublime插件:sublimeL ...

  2. 我所理解的SoC

    前阵子出去找工作,有的人不太理解,你们SoC有什么可做的,不就是找几个IP来搭积木嘛.你那个FPGA prototyping有什么可做的,不就是编一个镜像嘛. 正好,新项目,重新开始做一颗SoC.接下 ...

  3. zookeeper学习(一)安装、配置、运行

    说明:zookeeper完全可以standalone,也可以伪集群形式,当然生产中都是集群形式.另外,也可以在windows下运行. 如果只是研究用,完全可以在windows下使用standalone ...

  4. cx_freeze安装使用

    在windows下 安装比较方便又专门的安装包 然后cmd 进入 c:\python33\Scripts >cxfreeze E:\main.py --target-dir E:\ 前面是源文件 ...

  5. 关于myeclipse的破解的问题

    myeclipse的破解的问题,也是在网上down 了一下,发现并不需要找到什么注册的软件都可以自动完成的哦! 博客地址:http://blog.csdn.net/fuxiaohui/article/ ...

  6. EM最大期望化算法

    最大期望算法(Expectation-maximization algorithm,又译期望最大化算法)在统计中被用于寻找,依赖于不可观察的隐性变量的概率模型中,参数的最大似然估计. 在统计计算中,最 ...

  7. Keep It Simple Stupid!

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

  8. the fifth class

      1.实际比背景长,怎么做到的? 2个父级一个做头背景一个做尾背景 2.2层,每次自带背景上下是覆盖关系,如何做到 2层?,子浮动 3.标签 4.border可覆盖:margin-bottom 为负 ...

  9. Windows下 maven3.3.1的安装步骤+maven配置本地仓库

    简单讲下maven的安装步骤: 1.在安装maven之前,先确保已经安装JDK1.6及以上版本,并且配置好环境变量. 2.下载maven3,最新版本是Maven3.3.1 ,下载地址:http://m ...

  10. 设计模式可复用面向对象软件设计基础之对象创建型模式—ABSTRACT FACTORY( 抽象工厂)

    意图 提供一个创建一系列相关或相互依赖对象的接口,而无需指定它们具体的类. 适用性 在以下情况可以使用 Abstract Factory模式 • 一个系统要独立于它的产品的创建.组合和表示时. • 一 ...