zoukankan      html  css  js  c++  java
  • micro-template改造

    (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(/[
    	
    ]/g, " ").split("<%").join("	").replace(/((^|%>)[^	]*)'/g, "$1
    ").replace(/	=(.*?)%>/g, "';p+=$1;p+='").split("	").join("';").split("%>").join("p+='").split("
    ").join("\'") + "';return p;");
                }
                else {
                    render = new Function("data",
                     "var p=[];" +
                     "p.push('" +
                     html.replace(/[
    	
    ]/g, " ").split("<%").join("	").replace(/((^|%>)[^	]*)'/g, "$1
    ").replace(/	=(.*?)%>/g, "',$1,'").split("	").join("');").split("%>").join("p.push('").split("
    ").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>
  • 相关阅读:
    圣洁之美BY Janosch Simon
    多线程的概念讲解
    纯CSS做背景渐变
    如何用css3的boxshadow属性来为盒子增加阴影
    下载的chm文件打不开?
    大学教程:客户关系管理(CRM)复习资料
    细说CSS的transform
    浏览网页常用快捷键
    EDM邮件营销
    黑白世界,感受不同的旅行...
  • 原文地址:https://www.cnblogs.com/kingge/p/4857687.html
Copyright © 2011-2022 走看看