(function ($) {

    $.fn.razor = function (data) {

        var render=$(this).data('razor');

        if (!render) {

            var html = $(this).html();

            var isNewEngine = ''.trim;

            if (isNewEngine) {

                render = new Function("data",

              "var p='';" +

              "p+='" +

              html.replace(/[\r\t\n]/g, " ").split("<%").join("\t").replace(/((^|%>)[^\t]*)'/g, "$1\r").replace(/\t=(.*?)%>/g, "';p+=$1;p+='").split("\t").join("';").split("%>").join("p+='").split("\r").join("\\'") + "';return p;");

            }

            else {

                render = new Function("data",

                 "var p=[];" +

                 "p.push('" +

                 html.replace(/[\r\t\n]/g, " ").split("<%").join("\t").replace(/((^|%>)[^\t]*)'/g, "$1\r").replace(/\t=(.*?)%>/g, "',$1,'").split("\t").join("');").split("%>").join("p.push('").split("\r").join("\\'") + "');return p.join('');");

            }

            $(this).data('razor', render);

        }

        return render(data);

    }

})(jQuery);

demo：

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <title>Razor模板引擎</title>

    <script src="Scripts/StringExtension.js"></script>

    <script src="Scripts/jquery-1.10.2.min.js"></script>

    <script src="Scripts/micro-template.js"></script>

    <script id="tmpl1" type="text/template">

        <ul>

            <%

            for(var i=0,j=data.length;i<j;i++){

                var item=data[i];%>

            <li><%=item.Name%></li>

            <%}%>

        </ul>

    </script>

    <script id="tmpl2" type="text/template">

        <table>

            <%

            for(var i=0,j=data.length;i<j;i++){

                var item=data[i];%>

                <tr><td><%=item.Name%></td></tr>

                <%}%>

        </table>

    </script>

    <script type="text/javascript">

        $(function () {

            var p = [];

            $('#tmpl1').razor(p);

            $('#tmpl2').razor(p);

            for (var i = 0; i < 10000; i++) {

                p.push({Name:'xyz'+i.toString().padLeft('0',4)});

            }

            console.time('render1');

            $('#content1').html($('#tmpl1').razor(p));

            console.timeEnd('render1');

            console.time('render2');

            $('#content2').html($('#tmpl2').razor(p));

            console.timeEnd('render2');

        });

    </script>

</head>

<body>

    <div id="content1"></div>

    <div id="content2"></div>

</body>

</html>

micro-template改造的更多相关文章

  1. 【JS/CSS3】实现带预览图幻灯片效果~

    一.前期准备 1.1 案例分析 适用场景:单例布局1.2 方法论 V视图 HTML+CSS+调试C js实现控制流程D数据 优化扩展 二.代码 结构 <div class="slide ...

  2. C++ 状态机接口

    最近的状态极差,甚至代码也写不下去了.给自己手臂上的两刀没有任何的作用,看来早已经是麻痹了. 一直想弄一个勉强能用的状态机,用于在各种涉及到状态转换的时候用到,然而脑子并不是太清醒. 先放在这里一个接 ...

  3. vue 快速入门 系列 —— 使用 vue-cli 3 搭建一个项目（上）

    其他章节请看: vue 快速入门 系列 使用 vue-cli 3 搭建一个项目(上) 前面我们已经学习了一个成熟的脚手架(vue-cli),笔者希望通过这个脚手架快速搭建系统(或项目).而展开搭建最好 ...

  4. Vue2和Vue3技术整理1 - 入门篇 - 更新完毕

    Vue2 0.前言 首先说明:要直接上手简单得很,看官网熟悉大概有哪些东西.怎么用的,然后简单练一下就可以做出程序来了,最多两天,无论Vue2还是Vue3,就都完全可以了,Vue3就是比Vue2多了一 ...

  5. Nodejs之MEAN栈开发（五）---- Angular入门与页面改造

    这个系列一共会涉及两个JavaScript框架的讲解,一个是Express用做后端,一个是Angular用于前端.和Express一样,Angular分离内容,处理视图.数据和逻辑.和MVC模式很相似 ...

  6. ES6 Features系列：Template Strings & Tagged Template Strings

    1. Brief ES6(ECMAScript 6th edition)于2015年7月份发布,虽然各大浏览器仍未全面支持ES6,但我们可以在后端通过Node.js 0.12和io.js,而前端则通过 ...

  7. AvalonDock 2.0+Caliburn.Micro+MahApps.Metro实现Metro风格插件式系统（菜单篇）

    这章主要说插件的菜单,可以说菜单是最核心的部分,前面我们已经实现了Document添加,现在主要就是生成具有层级关系的菜单,以及把菜单跟我们自定义的Document关联起来,也就是MenuPart-& ...

  8. 记一次改造react脚手架的过程

    公司突然组织需要重新搭建一个基于node的论坛系统,前端采用react,上网找了一些脚手架,或多或少不能满足自己的需求,最终在基于YeoMan的react脚手架generator-react-webp ...

  9. Django App(三) View+Template

    接着上一节(二)的内容,首先启动站点,通过界面添加Question和Choice两张表的数据,因为接下来,要向polls app里面添加views. 1.添加数据如下(这里是通过界面操作添加的数据) ...

  10. 改造 vue-cli 脚手架

    改造 vue-cli 脚手架 注意,这里使用的 vue-cli 的版本为 2.8.2,不同版本的 vue-cli 可能会有些许不一样. 一.配置多页面 项目开发目录: 需要注意一点,每个页面的文件夹命 ...

随机推荐

  1. android 知识汇总

    1.assets:不会在R.java文件下生成相应的标记,assets文件夹可以自己创建文件夹,必须使用AssetsManager类进行访问,存放到这里的资源在运行打包的时候都会打入程序安装包中, 2 ...

  2. 唯美MACD-完全版

    前言: 自己很喜欢MACD这个指标,因为很欠缺所以就搜集的多一点,有人问,学习缠为什么还这么搜集些Macd的资料呢?因为在分析走势(或盘整背驰.或趋势背驰)的时候我的习惯使用Macd做辅助判断,所以M ...

  3. java之动态代理

    摘要 相比于静态代理,动态代理避免了开发人员编写各个繁锁的静态代理类,只需简单地指定一组接口及目标类对象就能动态的获得代理对象. 这里说的静态代理可以理解为之前使用的装饰者模式,从之前使用装饰者模式实 ...

  4. input file 上传 判断文件类型、路径是否为空

    <html> <body bgcolor="white"> <TABLE cellSpacing=0 cellPadding=0 width=&quo ...

  5. Ansible学习实战手记-你想要知道的可能都在这里了

    最近接触了ansible工具,查找了一些资料,也做了一些总结.希望能给刚接触的新手带来一些帮助. 此总结有实际例子,大部分也是从实践中用到才逐一总结的. 当然可能肯定一定会存在一些错误和纰漏,还望大家 ...

  6. Mysql模糊查询like效率，以及更高效的写法

    在使用msyql进行模糊查询的时候,很自然的会用到like语句,通常情况下,在数据量小的时候,不容易看出查询的效率,但在数据量达到百万级,千万级的时候,查询的效率就很容易显现出来.这个时候查询的效率就 ...

  7. DUBBO分布式入门

    Dubbox框架简介: Dubbox是一个分布式服务框架,其前身是阿里巴巴开源项目Dubbo,被国内电商及互联网项目广泛使用,但是后阿里巴巴对该项目停止维护了,当当网后来组建了一个团队一直维护Dubb ...

  8. 调度器的实现、schedule、switch_context、switch_to

    根据<深入Linux内核架构>和Linux-3.10.1内核源码,记一些调度过程的主体工作. 调度器任务:CPU数目比要运行的进程数目少,需要程序之间共享CPU时间,创造并行执行的错觉.分 ...

  9. Vue基础进阶 之 过渡效果

    进入/离开过渡效果:Vue在插入.更新或移除DOM时,可以设置一些动画效果: 如何使用过渡效果:利用<transition></transition>组件将需要应用的过渡效果的 ...

  10. 写Java代码分别使堆溢出,栈溢出

    首先要搞清楚堆栈里放的什么东西: 栈存储运行时声明的变量——对象引用(或基础类型, primitive)内存空间,堆分配每一个对象内容(实例)内存空间. 一个变量可以先后指向多个对象实例:数组.链表等 ...