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