John Resig 开发的一个简易模板引擎,配合json非常的实用。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 |
// Simple JavaScript Templating // John Resig - http://ejohn.org/ - MIT Licensed (function(){ var cache = {}; this.tmpl = function tmpl(str, data){ // Figure out if we're getting a template, or if we need to // load the template - and be sure to cache the result. var fn = !/\W/.test(str) ? cache[str] = cache[str] || tmpl(document.getElementById(str).innerHTML) : // Generate a reusable function that will serve as a template // generator (and which will be cached). new Function("obj", "var p=[],print=function(){p.push.apply(p,arguments);};" + // Introduce the data as local variables using with(){} "with(obj){p.push('" + // Convert the template into pure JavaScript str .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('');"); // Provide some basic currying to the user return data ? fn( data ) : fn; }; })(); |
很少的一点代码。但功能非常实用。
准备json和一个模板即可
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 |
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script><script type="text/javascript">// <![CDATA[ $(document).ready(function(){ var json = { "key":"1", "datas": [{"k":"v1","k2":"v2"}], "test_if":true, "test_for_datas":[1,2,3,4,5,6,7,8,9,10] }; var tmp = 'key:<%=key%></br>'+ 'datas: <ul> <li><%=datas[0].k%></li> <li><%=datas[0].k2%></li> </ul> '+ 'test_if:'+ '<%if(test_if){%>'+ '成立'+ '<%}else{%>'+ '失败'+ '<%}%>'+ '</br>'+ '循环:'+ '<%for(var i=0;i<test_for_datas.length;i++){%>'+ '<%=test_for_datas[i]%>'+ '<%}%>'; $("#conent").html(tmpl(tmp,json)); }); // ]]></script> |
评论关闭。